Merge pull request #13 from css-modules/animation-frames

Drop global leakage detection & fix animation blocks

Author: markdalgleish

index.js

@@ -31,13 +31,11 @@ function localizeNode(node, context) {
     case "selectors":
       var resultingGlobal;
       context.hasPureGlobals = false;
-      context.hasPureImplicitGlobals = false;
       newNodes = node.nodes.map(function(n) {
         var nContext = {
           global: context.global,
           lastWasSpacing: true,
           hasLocals: false,
-          hasImplicitGlobals: false,
           explicit: false
         };
         n = localizeNode(n, nContext);
@@ -49,9 +47,6 @@ function localizeNode(node, context) {
         }
         if(!nContext.hasLocals) {
           context.hasPureGlobals = true;
-          if(nContext.hasImplicitGlobals) {
-            context.hasPureImplicitGlobals = true;
-          }
         }
         return n;
       });
@@ -101,7 +96,6 @@ function localizeNode(node, context) {
           global: (node.name === "global"),
           inside: node.name,
           hasLocals: false,
-          hasImplicitGlobals: false,
           explicit: true
         };
         node = node.nodes.map(function(n) {
@@ -116,7 +110,6 @@ function localizeNode(node, context) {
           inside: context.inside,
           lastWasSpacing: true,
           hasLocals: false,
-          hasImplicitGlobals: false,
           explicit: context.explicit
         };
         newNodes = node.nodes.map(function(n) {
@@ -128,16 +121,6 @@ function localizeNode(node, context) {
       if(subContext.hasLocals) {
         context.hasLocals = true;
       }
-      if(subContext.hasImplicitGlobals) {
-        context.hasImplicitGlobals = true;
-      }
-      break;
-
-    case "attribute":
-    case "element":
-      if(!context.global && !context.explicit) {
-        context.hasImplicitGlobals = true;
-      }
       break;
 
     case "id":
@@ -231,12 +214,15 @@ module.exports = postcss.plugin('postcss-modules-local-by-default', function (op
       }
     });
     css.eachRule(function(rule) {
+      if(rule.parent.type === "atrule" && /keyframes$/.test(rule.parent.name)) {
+        // ignore keyframe rules
+        return;
+      }
       var selector = Tokenizer.parse(rule.selector);
       var context = {
         options: options,
         global: globalMode,
-        hasPureGlobals: false,
-        hasPureImplicitGlobals: false
+        hasPureGlobals: false
       };
       var newSelector;
       try {
@@ -248,10 +234,6 @@ module.exports = postcss.plugin('postcss-modules-local-by-default', function (op
         throw rule.error("Selector '" + Tokenizer.stringify(selector) + "' is not pure " +
           "(pure selectors must contain at least one local class or id)");
       }
-      if(!globalMode && context.hasPureImplicitGlobals) {
-        throw rule.error("Selector '" + Tokenizer.stringify(selector) + "' must be explicit flagged :global " +
-          "(elsewise it would leak globally)");
-      }
       rule.nodes.forEach(function(decl) {
         localizeDecl(decl, context);
       });

test.js

@@ -211,8 +211,8 @@ var tests = [
   },
   {
     should: 'localize keyframes',
-    input: '@keyframes foo {}',
-    expected: '@keyframes :local(foo) {}'
+    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',
@@ -222,8 +222,8 @@ var tests = [
   },
   {
     should: 'localize explicit keyframes',
-    input: '@keyframes :local(foo) {} @-webkit-keyframes :global(bar) {}',
-    expected: '@keyframes :local(foo) {} @-webkit-keyframes bar {}'
+    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',
@@ -330,31 +330,20 @@ var tests = [
     error: /@keyframes :global\(\.\.\.\) is not allowed in pure mode/
   },
   {
-    should: 'throw on implicit global element',
+    should: 'pass through global element',
     input: 'input {}',
-    error: /'input' must be explicit flagged :global/
-  },
-  {
-    should: 'throw on implicit global element (with multiple 1)',
-    input: 'input, .foo {}',
-    error: /'input, \.foo' must be explicit flagged :global/
+    expected: 'input {}'
   },
   {
-    should: 'throw on implicit global element (with multiple 2)',
-    input: '.foo, input {}',
-    error: /'\.foo, input' must be explicit flagged :global/
+    should: 'localise class and pass through element',
+    input: '.foo input {}',
+    expected: ':local(.foo) input {}'
   },
   {
-    should: 'throw on implicit global attribute',
+    should: 'pass through attribute selector',
     input: '[type="radio"] {}',
-    error: /'\[type="radio"\]' must be explicit flagged :global/
+    expected: '[type="radio"] {}'
   },
-  {
-    should: 'throw on implicit global attribute in nested',
-    input: ':not([type="radio"]) {}',
-    error: /':not\(\[type="radio"\]\)' must be explicit flagged :global/
-  },
-
   {
     should: 'not modify urls without option',
     input: '.a { background: url(./image.png); }\n' +
@@ -379,6 +368,7 @@ var tests = [
       '.b { background: url((global\\)image.png\\\"global\\\"); }\n' +
       ':local(.c) { background: url(\"(local)./image.png\\\"local\\\"\"); }'
   }
+
 ];
 
 function process (css, options) {