Migrated to css-selector-tokenizer

Author: markdalgleish

CHANGELOG.md

@@ -4,7 +4,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased][unreleased]
 ### Changed
-- Nothing yet.
+- Migrated to `css-selector-tokenizer`.
 
 ## [0.0.6] - 2015-05-28
 ### Changed

index.js

@@ -1,40 +1,54 @@
 var postcss = require('postcss');
+var Tokenizer = require('css-selector-tokenizer');
 
-var ESCAPED_DOT = ' ___LOCAL_SCOPE__ESCAPED_DOT___ ';
+function localizeNodes(nodes) {
+  var isGlobalContext = false;
 
-module.exports = postcss.plugin('postcss-modules-local-by-default', function (config) {
-  var options = config || {};
-  return function(css, result) {
-    css.eachRule(function(rule) {
-      rule.selector = rule.selector
-        .split(',')
-        .map(transformSelector.bind(null, options, rule))
-        .join(',');
-    });
-  };
-});
+  return nodes
+    .map(function(node, i) {
+      var newNode = node;
 
-function transformSelector(options, rule, selector) {
-  var trimmedSelector = selector.trim();
+      if (isGlobal(newNode)) {
+        isGlobalContext = true;
+        return null;
+      }
+
+      if (newNode.type === 'spacing' && isGlobal(nodes[i-1])) {
+        return null;
+      }
 
-  if (options.lint) {
-    if (!/^\./.test(trimmedSelector) && !/^\:local/.test(trimmedSelector)) {
-      if (!/^\:global/.test(trimmedSelector)) {
-        throw rule.error('Global selector detected in local context. Does this selector really need to be global? If so, you need to explicitly export it into the global scope with ":global", e.g. ":global '+trimmedSelector+'"', { plugin: 'postcss-modules-local-by-default' });
+      if (!isGlobalContext && node.type === 'class') {
+        newNode = { type: 'nested-pseudo-class', name: 'local', nodes: [node] }
+      } else if (isNestedGlobal(newNode)) {
+        newNode = node.nodes[0];
+      } else if (!isNestedLocal(newNode) && newNode.nodes) {
+        newNode.nodes = localizeNodes(newNode.nodes);
       }
-    }
-  }
-
-  return selector
-    .replace(/\:global\((.*?)\)/g, escapeDots)
-    .replace(/\:global (.*)/g, escapeDots)
-    .replace(/(\:extends\((.*?)\))/g, escapeDots)
-    .replace(/\.local\[(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)\]/g, '.$1') // source: http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names-selectors
-    .replace(/\:local\(\.(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)\)/g, '.$1')
-    .replace(/\.(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)/g, ':local(.$1)')
-    .replace(new RegExp(ESCAPED_DOT, 'g'), '.');
+
+      return newNode;
+    }).filter(function(node) {
+      return node !== null
+    });
 }
 
-function escapeDots(match, p1) {
-  return p1.replace(/\./g, ESCAPED_DOT);
+function isGlobal(node) {
+  return node.type === 'pseudo-class' && node.name === 'global';
 }
+
+function isNestedGlobal(node) {
+  return node.type === 'nested-pseudo-class' && node.name === 'global';
+}
+
+function isNestedLocal(node) {
+ return node.type === 'nested-pseudo-class' && node.name === 'local';
+}
+
+module.exports = postcss.plugin('postcss-modules-local-by-default', function () {
+  return function(css, result) {
+    css.eachRule(function(rule) {
+      var selector = Tokenizer.parse(rule.selector);
+      selector.nodes = localizeNodes(selector.nodes);
+      rule.selector = Tokenizer.stringify(selector).trim();
+    });
+  };
+});

package.json

@@ -15,6 +15,7 @@
     "url": "https://github.com/css-modules/postcss-modules-local-by-default.git"
   },
   "dependencies": {
+    "css-selector-tokenizer": "^0.3.1",
     "postcss": "^4.1.5"
   },
   "devDependencies": {

test.js

@@ -88,41 +88,6 @@ var tests = [
     should: 'ignore psuedo elements that are already local',
     input: ':local(.foo):after {}',
     expected: ':local(.foo):after {}'
-  },
-  {
-    should: 'convert nested selectors that are already local using the old syntax into the new local syntax',
-    input: '.local[foo] .local[bar] {}',
-    expected: ':local(.foo) :local(.bar) {}'
-  },
-  {
-    should: 'convert multiple selectors that are already local using the old syntax into the new local syntax',
-    input: '.local[foo], .local[bar] {}',
-    expected: ':local(.foo), :local(.bar) {}'
-  },
-  {
-    should: 'convert sibling selectors that are already local using the old syntax into the new local syntax',
-    input: '.local[foo] ~ .local[bar] {}',
-    expected: ':local(.foo) ~ :local(.bar) {}'
-  },
-  {
-    should: 'convert psuedo elements that are already local using the old syntax into the new local syntax',
-    input: '.local[foo]:after {}',
-    expected: ':local(.foo):after {}'
-  },
-  {
-    should: 'not reject non-global element selectors when lint mode is not enabled',
-    input: 'input {}',
-    expected: 'input {}'
-  },
-  {
-    should: 'support :extends',
-    input: '.foo:extends(.className) {}',
-    expected: ':local(.foo):extends(.className) {}'
-  },
-  {
-    should: 'support imported :extends',
-    input: '.foo:extends(.button from "library/button.css") {}',
-    expected: ':local(.foo):extends(.button from "library/button.css") {}'
   }
 ];
 
@@ -140,58 +105,6 @@ test(name, function (t) {
 });
 
 
-var errorTests = [
-  {
-    should: 'reject non-global element selectors',
-    input: 'input {}',
-    reason: 'Global selector detected in local context. Does this selector really need to be global? If so, you need to explicitly export it into the global scope with ":global", e.g. ":global input"'
-  },
-  {
-    should: 'reject non-global element selectors in a collection',
-    input: '.foo, input {}',
-    reason: 'Global selector detected in local context. Does this selector really need to be global? If so, you need to explicitly export it into the global scope with ":global", e.g. ":global input"'
-  },
-  {
-    should: 'reject non-global psuedo classes',
-    input: ':focus {}',
-    reason: 'Global selector detected in local context. Does this selector really need to be global? If so, you need to explicitly export it into the global scope with ":global", e.g. ":global :focus"'
-  },
-  {
-    should: 'reject non-global psuedo classes in a collection',
-    input: '.foo, :focus {}',
-    reason: 'Global selector detected in local context. Does this selector really need to be global? If so, you need to explicitly export it into the global scope with ":global", e.g. ":global :focus"'
-  },
-  {
-    should: 'reject non-global attribute selectors',
-    input: '[data-foobar] {}',
-    reason: 'Global selector detected in local context. Does this selector really need to be global? If so, you need to explicitly export it into the global scope with ":global", e.g. ":global [data-foobar]"'
-  },
-  {
-    should: 'reject non-global attribute selectors in a collection',
-    input: '.foo, [data-foobar] {}',
-    reason: 'Global selector detected in local context. Does this selector really need to be global? If so, you need to explicitly export it into the global scope with ":global", e.g. ":global [data-foobar]"'
-  }
-];
-
-function processError (css, options) {
-  try {
-    postcss(plugin(options)).process(css).css;
-  } catch (error) {
-    return error;
-  }
-}
-
-test(name, function (t) {
-  t.plan(errorTests.length);
-
-  errorTests.forEach(function (test) {
-    var options = { lint: true };
-    var error = processError(test.input, options);
-    t.equal(error.reason, test.reason, 'should ' + test.should);
-  });
-});
-
-
 test('should use the postcss plugin api', function (t) {
     t.plan(2);
     t.ok(plugin().postcssVersion, 'should be able to access version');