Merge pull request #158 from css-modules/icss-utils

Add icss-utils
css-modules · May 27, 2017 · e708e5d · e708e5d
2 parents 28ada22 + 5ea7ba5
commit e708e5d
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 1,166 deletions.
diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
   "homepage": "https://github.com/css-modules/postcss-modules-scope",
   "dependencies": {
     "css-selector-tokenizer": "^0.7.0",
+    "icss-utils": "^2.1.0",
     "postcss": "^6.0.1"
   },
   "devDependencies": {

diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,6 @@
-const postcss = require('postcss')
-const Tokenizer = require('css-selector-tokenizer')
+import postcss from 'postcss'
+import Tokenizer from 'css-selector-tokenizer'
+import { extractICSS, createICSSRules } from 'icss-utils'
 
 let hasOwnProperty = Object.prototype.hasOwnProperty
 
@@ -51,10 +52,19 @@ function getSingleLocalNamesForComposes(selectors) {
   })
 }
 
-module.exports = postcss.plugin('postcss-modules-scope', function(options) {
-  return css => {
+const defaultGenerateScopedName = function(exportedName, path) {
+  let sanitisedPath = path
+    .replace(/\.[^\.\/\\]+$/, '')
+    .replace(/[\W_]+/g, '_')
+    .replace(/^_|_$/g, '')
+  return `_${sanitisedPath}__${exportedName}`
+}
+
+module.exports = postcss.plugin(
+  'postcss-modules-scope',
+  (options = {}) => css => {
     let generateScopedName =
-      (options && options.generateScopedName) || processor.generateScopedName
+      options.generateScopedName || defaultGenerateScopedName
 
     let exports = {}
 
@@ -65,7 +75,7 @@ module.exports = postcss.plugin('postcss-modules-scope', function(options) {
         css.source.input.css
       )
       exports[name] = exports[name] || []
-      if (exports[name].indexOf(scopedName) < 0) {
+      if (exports[name].indexOf(scopedName) === -1) {
         exports[name].push(scopedName)
       }
       return scopedName
@@ -84,10 +94,7 @@ module.exports = postcss.plugin('postcss-modules-scope', function(options) {
           return newNode
       }
       throw new Error(
-        node.type +
-          ' ("' +
-          Tokenizer.stringify(node) +
-          '") is not allowed in a :local block'
+        `${node.type} ("${Tokenizer.stringify(node)}") is not allowed in a :local block`
       )
     }
 
@@ -111,14 +118,13 @@ module.exports = postcss.plugin('postcss-modules-scope', function(options) {
     }
 
     // Find any :import and remember imported names
-    let importedNames = {}
-    css.walkRules(rule => {
-      if (/^:import\(.+\)$/.test(rule.selector)) {
-        rule.walkDecls(decl => {
-          importedNames[decl.prop] = true
-        })
-      }
-    })
+    const { icssImports } = extractICSS(css, false)
+    const importedNames = Object.keys(icssImports).reduce((acc, key) => {
+      Object.keys(icssImports[key]).forEach(local => {
+        acc[local] = true
+      })
+      return acc
+    }, {})
 
     // Find any :local classes
     css.walkRules(rule => {
@@ -186,25 +192,12 @@ module.exports = postcss.plugin('postcss-modules-scope', function(options) {
     })
 
     // If we found any :locals, insert an :export rule
-    let exportedNames = Object.keys(exports)
-    if (exportedNames.length > 0) {
-      let exportRule = postcss.rule({ selector: `:export` })
-      exportedNames.forEach(exportedName =>
-        exportRule.append({
-          prop: exportedName,
-          value: exports[exportedName].join(' '),
-          raws: { before: '\n  ' }
-        })
-      )
-      css.append(exportRule)
-    }
+    const normalizedExports = Object.keys(exports).reduce((acc, key) => {
+      acc[key] = exports[key].join(' ')
+      return acc
+    }, {})
+    css.append(createICSSRules({}, normalizedExports))
   }
-})
+)
 
-module.exports.generateScopedName = function(exportedName, path) {
-  let sanitisedPath = path
-    .replace(/\.[^\.\/\\]+$/, '')
-    .replace(/[\W_]+/g, '_')
-    .replace(/^_|_$/g, '')
-  return `_${sanitisedPath}__${exportedName}`
-}
+module.exports.generateScopedName = defaultGenerateScopedName
diff --git a/test/test-cases/export-with-composes/expected.css b/test/test-cases/export-with-composes/expected.css
@@ -1,3 +1,4 @@
 ._lib_extender__otherClass { background: red; } ._lib_extender__exportName { color: green; } :export {
   otherClass: _lib_extender__otherClass;
-  exportName: _lib_extender__exportName _lib_extender__otherClass; }
+  exportName: _lib_extender__exportName _lib_extender__otherClass;
+}
diff --git a/test/test-cases/export-with-global-composes/expected.css b/test/test-cases/export-with-global-composes/expected.css
@@ -3,4 +3,5 @@
 .aThirdClass { color: red; }
 ._lib_extender__exportName { color: green; }
 :export {
-  exportName: _lib_extender__exportName otherClass andAgain aThirdClass; }
+  exportName: _lib_extender__exportName otherClass andAgain aThirdClass;
+}
diff --git a/test/test-cases/export-with-multiple-composes/expected.css b/test/test-cases/export-with-multiple-composes/expected.css
@@ -6,4 +6,5 @@
   otherClass: _lib_extender__otherClass;
   andAgain: _lib_extender__andAgain;
   aThirdClass: _lib_extender__aThirdClass;
-  exportName: _lib_extender__exportName _lib_extender__otherClass _lib_extender__andAgain _lib_extender__aThirdClass; }
+  exportName: _lib_extender__exportName _lib_extender__otherClass _lib_extender__andAgain _lib_extender__aThirdClass;
+}