Update to use new :local(.identifier) syntax

Author: markdalgleish

README.md

@@ -4,15 +4,15 @@
 
 [PostCSS] plugin to transform global selectors into the [local scope] format of [Webpack]'s [css-loader].
 
-**WARNING: This project depends on [css-loader]'s [local scope] feature, which is marked as experimental and is very likely to change in the future.**
+**WARNING: This project depends on [css-loader]'s [local scope] feature, which is marked as experimental and is very likely to change in the future. Always ensure you're using the latest version of both [css-loader] and postcss-local-scope together.**
 
 ## Why?
 
 Everyone agrees that dumping JavaScript in the global scope is a terrible idea. Why is CSS any different?
 
 Imagine if we could import the CSS that a component needs without leaking selectors into the global scope. We wouldn't need naming conventions like [BEM] to avoid naming collisions, and we could prevent accidental coupling between components by ensuring our CSS follows the same scoping rules as any JavaScript module.
 
-Webpack allows [local scope] in CSS with [css-loader], but it's opt-in via a special `.local[identifier]` syntax.
+Webpack allows [local scope] in CSS with [css-loader], but it's opt-in via a special `:local(.identifier)` syntax.
 
 This plugin transforms standard class selectors into local identifiers so that [local scope] is the default and global styles are the exception, just like any sane module system.
 
@@ -75,25 +75,25 @@ Classes are dynamically generated at build time by [css-loader], so components a
 ## Transformation examples
 
 ```css
-.foo { ... } /* => */ .local[foo] { ... }
+.foo { ... } /* => */ :local(.foo) { ... }
 
-.foo .bar { ... } /* => */ .local[foo] .local[bar] { ... }
+.foo .bar { ... } /* => */ :local(.foo) :local(.bar) { ... }
 
 /* Shorthand global selector */
 
 :global .foo .bar { ... } /* => */ .foo .bar { ... }
 
-.foo :global .bar { ... } /* => */ .local[foo] .bar { ... }
+.foo :global .bar { ... } /* => */ :local(.foo) .bar { ... }
 
 /* Targeted global selector */
 
-:global(.foo) .bar { ... } /* => */ .foo .local[bar] { ... }
+:global(.foo) .bar { ... } /* => */ .foo :local(.bar) { ... }
 
-.foo:global(.bar) { ... } /* => */ .local[foo].bar { ... }
+.foo:global(.bar) { ... } /* => */ :local(.foo).bar { ... }
 
-.foo :global(.bar) .baz { ... } /* => */ .local[foo] .bar .local[baz] { ... }
+.foo :global(.bar) .baz { ... } /* => */ :local(.foo) .bar :local(.baz) { ... }
 
-.foo:global(.bar) .baz { ... } /* => */ .local[foo].bar .local[baz] { ... }
+.foo:global(.bar) .baz { ... } /* => */ :local(.foo).bar :local(.baz) { ... }
 ```
 
 [PostCSS]:     https://github.com/postcss/postcss

index.js

@@ -16,7 +16,7 @@ module.exports = postcss.plugin('postcss-local-scope', function () {
 function transformSelector(rule, selector) {
   // Syntax warnings
   var trimmedSelector = selector.trim();
-  if (!/^\./.test(trimmedSelector)) {
+  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-local-scope' });
     }
@@ -26,7 +26,8 @@ function transformSelector(rule, selector) {
     .replace(/\:global\((.*?)\)/g, escapeDots)
     .replace(/\:global (.*)/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(/\.(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)/g, '.local[$1]')
+    .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'), '.');
 }
 

test.js

@@ -7,27 +7,27 @@ var tests = [
   {
     should: 'scope selectors',
     input: '.foobar {}',
-    expected: '.local[foobar] {}'
+    expected: ':local(.foobar) {}'
   },
   {
     should: 'scope multiple selectors',
     input: '.foo, .baz {}',
-    expected: '.local[foo], .local[baz] {}'
+    expected: ':local(.foo), :local(.baz) {}'
   },
   {
     should: 'scope sibling selectors',
     input: '.foo ~ .baz {}',
-    expected: '.local[foo] ~ .local[baz] {}'
+    expected: ':local(.foo) ~ :local(.baz) {}'
   },
   {
     should: 'scope psuedo elements',
     input: '.foo:after {}',
-    expected: '.local[foo]:after {}'
+    expected: ':local(.foo):after {}'
   },
   {
     should: 'scope media queries',
     input: '@media only screen { .foo {} }',
-    expected: '@media only screen { .local[foo] {} }'
+    expected: '@media only screen { :local(.foo) {} }'
   },
   {
     should: 'allow narrow global selectors',
@@ -52,42 +52,62 @@ var tests = [
   {
     should: 'allow narrow global selectors nested inside local styles',
     input: '.foo :global(.foo .bar) {}',
-    expected: '.local[foo] .foo .bar {}'
+    expected: ':local(.foo) .foo .bar {}'
   },
   {
     should: 'allow broad global selectors nested inside local styles',
     input: '.foo :global .foo .bar {}',
-    expected: '.local[foo] .foo .bar {}'
+    expected: ':local(.foo) .foo .bar {}'
   },
   {
     should: 'allow narrow global selectors appended to local styles',
     input: '.foo:global(.foo.bar) {}',
-    expected: '.local[foo].foo.bar {}'
+    expected: ':local(.foo).foo.bar {}'
   },
   {
     should: 'ignore selectors that are already local',
-    input: '.local[foobar] {}',
-    expected: '.local[foobar] {}'
+    input: ':local(.foobar) {}',
+    expected: ':local(.foobar) {}'
   },
   {
     should: 'ignore nested selectors that are already local',
-    input: '.local[foo] .local[bar] {}',
-    expected: '.local[foo] .local[bar] {}'
+    input: ':local(.foo) :local(.bar) {}',
+    expected: ':local(.foo) :local(.bar) {}'
   },
   {
     should: 'ignore multiple selectors that are already local',
-    input: '.local[foo], .local[bar] {}',
-    expected: '.local[foo], .local[bar] {}'
+    input: ':local(.foo), :local(.bar) {}',
+    expected: ':local(.foo), :local(.bar) {}'
   },
   {
     should: 'ignore sibling selectors that are already local',
-    input: '.local[foo] ~ .local[bar] {}',
-    expected: '.local[foo] ~ .local[bar] {}'
+    input: ':local(.foo) ~ :local(.bar) {}',
+    expected: ':local(.foo) ~ :local(.bar) {}'
   },
   {
     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 {}'
+    expected: ':local(.foo):after {}'
   }
 ];