Merge pull request #114 from css-modules/remove-keyframes

Remove keyframes in favor of postcss-icss-keyframes

Author: TrySound

package.json

@@ -20,10 +20,21 @@
   },
   "lint-staged": {
     "*.js": [
+      "eslint",
       "prettier --single-quote --no-semi --write",
       "git add"
     ]
   },
+  "eslintConfig": {
+    "parserOptions": {
+      "ecmaVersion": 6,
+      "sourceType": "module"
+    },
+    "env": {
+      "es6": true
+    },
+    "extends": "eslint:recommended"
+  },
   "babel": {
     "presets": [
       [
@@ -52,6 +63,7 @@
     "babel-preset-env": "^1.5.1",
     "codecov.io": "^0.1.2",
     "coveralls": "^2.11.2",
+    "eslint": "^3.19.0",
     "husky": "^0.13.3",
     "jest": "^20.0.3",
     "lint-staged": "^3.4.2",

src/index.js

@@ -1,5 +1,6 @@
-var postcss = require('postcss')
-var Tokenizer = require('css-selector-tokenizer')
+/* eslint-env node */
+import postcss from 'postcss'
+import Tokenizer from 'css-selector-tokenizer'
 
 function normalizeNodeArray(nodes) {
   var array = []
@@ -158,148 +159,9 @@ function localizeNode(node, context) {
   return node
 }
 
-function localizeDeclNode(node, context) {
-  var newNode
-  switch (node.type) {
-    case 'item':
-      if (context.localizeNextItem) {
-        newNode = Object.create(node)
-        newNode.name = ':local(' + newNode.name + ')'
-        context.localizeNextItem = false
-        return newNode
-      }
-      break
-
-    case 'nested-item':
-      var newNodes = node.nodes.map(function(n) {
-        return localizeDeclValue(n, context)
-      })
-      node = Object.create(node)
-      node.nodes = newNodes
-      break
-  }
-  return node
-}
-
-function localizeDeclValue(valueNode, context) {
-  var newValueNode = Object.create(valueNode)
-  newValueNode.nodes = valueNode.nodes.map(function(node) {
-    return localizeDeclNode(node, context)
-  })
-  return newValueNode
-}
-
-function localizeAnimationShorthandDeclValueNodes(nodes, context) {
-  var validIdent = (validIdent = /^-?[_a-z][_a-z0-9-]*$/i)
-
-  /*
-  The spec defines some keywords that you can use to describe properties such as the timing
-  function. These are still valid animation names, so as long as there is a property that accepts
-  a keyword, it is given priority. Only when all the properties that can take a keyword are
-  exhausted can the animation name be set to the keyword. I.e.
-
-  animation: infinite infinite;
-
-  The animation will repeat an infinite number of times from the first argument, and will have an
-  animation name of infinite from the second.
-  */
-  var animationKeywords = {
-    $alternate: 1,
-    '$alternate-reverse': 1,
-    $backwards: 1,
-    $both: 1,
-    $ease: 1,
-    '$ease-in': 1,
-    '$ease-in-out': 1,
-    '$ease-out': 1,
-    $forwards: 1,
-    $infinite: 1,
-    $linear: 1,
-    $none: Infinity, // No matter how many times you write none, it will never be an animation name
-    $normal: 1,
-    $paused: 1,
-    $reverse: 1,
-    $running: 1,
-    '$step-end': 1,
-    '$step-start': 1,
-    $initial: Infinity,
-    $inherit: Infinity,
-    $unset: Infinity
-  }
-
-  var didParseAnimationName = false
-  var parsedAnimationKeywords = {}
-  return nodes.map(function(valueNode) {
-    var value = valueNode.type === 'item' ? valueNode.name.toLowerCase() : null
-
-    var shouldParseAnimationName = false
-
-    if (!didParseAnimationName && value && validIdent.test(value)) {
-      if ('$' + value in animationKeywords) {
-        parsedAnimationKeywords['$' + value] = '$' + value in
-          parsedAnimationKeywords
-          ? parsedAnimationKeywords['$' + value] + 1
-          : 0
-
-        shouldParseAnimationName =
-          parsedAnimationKeywords['$' + value] >= animationKeywords['$' + value]
-      } else {
-        shouldParseAnimationName = true
-      }
-    }
-
-    var subContext = {
-      options: context.options,
-      global: context.global,
-      localizeNextItem: shouldParseAnimationName && !context.global
-    }
-    return localizeDeclNode(valueNode, subContext)
-  })
-}
-
-function localizeAnimationShorthandDeclValues(valuesNode, decl, context) {
-  var newValuesNode = Object.create(valuesNode)
-  newValuesNode.nodes = valuesNode.nodes.map(function(valueNode, index) {
-    var newValueNode = Object.create(valueNode)
-    newValueNode.nodes = localizeAnimationShorthandDeclValueNodes(
-      valueNode.nodes,
-      context
-    )
-    return newValueNode
-  })
-  decl.value = Tokenizer.stringifyValues(newValuesNode)
-}
-
-function localizeDeclValues(localize, valuesNode, decl, context) {
-  var newValuesNode = Object.create(valuesNode)
-  newValuesNode.nodes = valuesNode.nodes.map(function(valueNode) {
-    var subContext = {
-      options: context.options,
-      global: context.global,
-      localizeNextItem: localize && !context.global
-    }
-    return localizeDeclValue(valueNode, subContext)
-  })
-  decl.value = Tokenizer.stringifyValues(newValuesNode)
-}
-
-function localizeDecl(decl, context) {
-  var valuesNode = Tokenizer.parseValues(decl.value)
-
-  var isAnimation = /animation?$/.test(decl.prop)
-  if (isAnimation)
-    return localizeAnimationShorthandDeclValues(valuesNode, decl, context)
-
-  var isAnimationName = /animation(-name)?$/.test(decl.prop)
-  if (isAnimationName)
-    return localizeDeclValues(true, valuesNode, decl, context)
-
-  return localizeDeclValues(false, valuesNode, decl, context)
-}
-
 module.exports = postcss.plugin(
   'postcss-modules-local-by-default',
-  (options = {}) => (css, result) => {
+  (options = {}) => css => {
     if (
       options.mode &&
       options.mode !== 'global' &&
@@ -312,33 +174,6 @@ module.exports = postcss.plugin(
     }
     var pureMode = options.mode === 'pure'
     var globalMode = options.mode === 'global'
-    css.walkAtRules(function(atrule) {
-      if (/keyframes$/.test(atrule.name)) {
-        var globalMatch = /^\s*:global\s*\((.+)\)\s*$/.exec(atrule.params)
-        var localMatch = /^\s*:local\s*\((.+)\)\s*$/.exec(atrule.params)
-        var globalKeyframes = globalMode
-        if (globalMatch) {
-          if (pureMode) {
-            throw atrule.error(
-              '@keyframes :global(...) is not allowed in pure mode'
-            )
-          }
-          atrule.params = globalMatch[1]
-          globalKeyframes = true
-        } else if (localMatch) {
-          atrule.params = localMatch[0]
-          globalKeyframes = false
-        } else if (!globalMode) {
-          atrule.params = ':local(' + atrule.params + ')'
-        }
-        atrule.walkDecls(function(decl) {
-          localizeDecl(decl, {
-            options: options,
-            global: globalKeyframes
-          })
-        })
-      }
-    })
     css.walkRules(function(rule) {
       if (
         rule.parent.type === 'atrule' &&
@@ -367,12 +202,6 @@ module.exports = postcss.plugin(
             '(pure selectors must contain at least one local class or id)'
         )
       }
-      // Less-syntax mixins parse as rules with no nodes
-      if (rule.nodes) {
-        rule.nodes.forEach(function(decl) {
-          localizeDecl(decl, context)
-        })
-      }
       rule.selector = Tokenizer.stringify(newSelector)
     })
   }

test.js

@@ -1,5 +1,6 @@
-const postcss = require('postcss')
-const plugin = require('./src')
+/* eslint-env jest */
+import postcss from 'postcss'
+import plugin from './src'
 
 const tests = [
   {
@@ -132,76 +133,6 @@ const tests = [
     input: '.foo :global .bar :local .foobar :local .barfoo {}',
     expected: ':local(.foo) .bar :local(.foobar) :local(.barfoo) {}'
   },
-  {
-    should: 'localize a single animation-name',
-    input: '.foo { animation-name: bar; }',
-    expected: ':local(.foo) { animation-name: :local(bar); }'
-  },
-  {
-    should: 'not localize a single animation-delay',
-    input: '.foo { animation-delay: 1s; }',
-    expected: ':local(.foo) { animation-delay: 1s; }'
-  },
-  {
-    should: 'localize multiple animation-names',
-    input: '.foo { animation-name: bar, foobar; }',
-    expected: ':local(.foo) { animation-name: :local(bar), :local(foobar); }'
-  },
-  {
-    should: 'localize animation',
-    input: '.foo { animation: bar 5s, foobar; }',
-    expected: ':local(.foo) { animation: :local(bar) 5s, :local(foobar); }'
-  },
-  {
-    should: 'localize animation with vendor prefix',
-    input: '.foo { -webkit-animation: bar; animation: bar; }',
-    expected: ':local(.foo) { -webkit-animation: :local(bar); animation: :local(bar); }'
-  },
-  {
-    should: 'not localize other rules',
-    input: '.foo { content: "animation: bar;" }',
-    expected: ':local(.foo) { content: "animation: bar;" }'
-  },
-  {
-    should: 'not localize global rules',
-    input: ':global .foo { animation: foo; animation-name: bar; }',
-    expected: '.foo { animation: foo; animation-name: bar; }'
-  },
-  {
-    should: 'handle a complex animation rule',
-    input: '.foo { animation: foo, bar 5s linear 2s infinite alternate, barfoo 1s; }',
-    expected: ':local(.foo) { animation: :local(foo), :local(bar) 5s linear 2s infinite alternate, :local(barfoo) 1s; }'
-  },
-  {
-    should: 'handle animations where the first value is not the animation name',
-    input: '.foo { animation: 1s foo; }',
-    expected: ':local(.foo) { animation: 1s :local(foo); }'
-  },
-  {
-    should: 'handle animations where the first value is not the animation name whilst also using keywords',
-    input: '.foo { animation: 1s normal ease-out infinite foo; }',
-    expected: ':local(.foo) { animation: 1s normal ease-out infinite :local(foo); }'
-  },
-  {
-    should: 'handle animations with custom timing functions',
-    input: '.foo { animation: 1s normal cubic-bezier(0.25, 0.5, 0.5. 0.75) foo; }',
-    expected: ':local(.foo) { animation: 1s normal cubic-bezier(0.25, 0.5, 0.5. 0.75) :local(foo); }'
-  },
-  {
-    should: 'handle animations whose names are keywords',
-    input: '.foo { animation: 1s infinite infinite; }',
-    expected: ':local(.foo) { animation: 1s infinite :local(infinite); }'
-  },
-  {
-    should: 'handle not localize an animation shorthand value of "inherit"',
-    input: '.foo { animation: inherit; }',
-    expected: ':local(.foo) { animation: inherit; }'
-  },
-  {
-    should: 'handle "constructor" as animation name',
-    input: '.foo { animation: constructor constructor; }',
-    expected: ':local(.foo) { animation: :local(constructor) :local(constructor); }'
-  },
   {
     should: 'default to global when mode provided',
     input: '.foo {}',
@@ -242,22 +173,6 @@ const tests = [
       ':local(.a) .b {}'
     ].join('\n')
   },
-  {
-    should: 'localize keyframes',
-    input: '@keyframes foo { from { color: red; } to { color: blue; } }',
-    expected: '@keyframes :local(foo) { from { color: red; } to { color: blue; } }'
-  },
-  {
-    should: 'localize keyframes in global default mode',
-    input: '@keyframes foo {}',
-    options: { mode: 'global' },
-    expected: '@keyframes foo {}'
-  },
-  {
-    should: 'localize explicit keyframes',
-    input: '@keyframes :local(foo) { 0% { color: red; } 33.3% { color: yellow; } 100% { color: blue; } } @-webkit-keyframes :global(bar) { from { color: red; } to { color: blue; } }',
-    expected: '@keyframes :local(foo) { 0% { color: red; } 33.3% { color: yellow; } 100% { color: blue; } } @-webkit-keyframes bar { from { color: red; } to { color: blue; } }'
-  },
   {
     should: 'ignore :export statements',
     input: ':export { foo: __foo; }',
@@ -356,12 +271,6 @@ const tests = [
     options: { mode: 'pure' },
     error: /"\[type="radio"\]" is not pure/
   },
-  {
-    should: 'throw on not pure keyframes',
-    input: '@keyframes :global(foo) {}',
-    options: { mode: 'pure' },
-    error: /@keyframes :global\(\.\.\.\) is not allowed in pure mode/
-  },
   {
     should: 'pass through global element',
     input: 'input {}',
@@ -384,7 +293,7 @@ const tests = [
   },
   {
     should: 'not crash on a rule without nodes',
-    input: (function() {
+    input: (() => {
       var inner = postcss.rule({ selector: '.b', ruleWithoutBody: true })
       var outer = postcss.rule({ selector: '.a' }).push(inner)
       var root = postcss.root().push(outer)
@@ -393,6 +302,11 @@ const tests = [
     })(),
     // postcss-less's stringify would honor `ruleWithoutBody` and omit the trailing `{}`
     expected: ':local(.a) {\n    :local(.b) {}\n}'
+  },
+  {
+    should: 'not localize keyframes rules',
+    input: '@keyframes foo { from {} to {} }',
+    expected: '@keyframes foo { from {} to {} }'
   }
 ]