refactor: postcss-parser (#821)

lib/plugins/index.js

@@ -1,9 +1,9 @@
 const importParser = require('./postcss-import-parser');
-const parser = require('./postcss-parser');
+const icssParser = require('./postcss-icss-parser');
 const urlParser = require('./postcss-url-parser');
 
 module.exports = {
   importParser,
-  parser,
+  icssParser,
   urlParser,
 };

lib/plugins/postcss-parser.js → lib/plugins/postcss-icss-parser.js

@@ -1,18 +1,18 @@
 const postcss = require('postcss');
 const valueParser = require('postcss-value-parser');
 const icssUtils = require('icss-utils');
-const Tokenizer = require('css-selector-tokenizer');
 const loaderUtils = require('loader-utils');
 
+const pluginName = 'postcss-icss-parser';
+
 module.exports = postcss.plugin(
-  'postcss-parser',
+  pluginName,
   (options) =>
     function process(css) {
       const importItems = options.importItems || [];
       const urlItems = options.urlItems || [];
-      const icss = icssUtils.extractICSS(css);
-
       const imports = {};
+      const icss = icssUtils.extractICSS(css);
       const exports = icss.icssExports;
 
       Object.keys(icss.icssImports).forEach((key) => {
@@ -50,46 +50,21 @@ module.exports = postcss.plugin(
         return str;
       }
 
-      Object.keys(exports).forEach((exportName) => {
-        exports[exportName] = replaceImportsInString(exports[exportName]);
-      });
-
-      function processNode(item) {
-        switch (item.type) {
-          case 'value':
-            item.nodes.forEach(processNode);
-            break;
-          case 'nested-item':
-            item.nodes.forEach(processNode);
-            break;
-          case 'item': {
-            const importIndex = imports[`$${item.name}`];
-            if (typeof importIndex === 'number') {
-              // eslint-disable-next-line no-param-reassign
-              item.name = `___CSS_LOADER_IMPORT___${importIndex}___`;
-            }
-            break;
-          }
-          // no default
-        }
-      }
-
+      // Replace tokens in declarations
       css.walkDecls((decl) => {
-        const values = Tokenizer.parseValues(decl.value);
-
-        values.nodes.forEach((value) => {
-          value.nodes.forEach(processNode);
-        });
-
         // eslint-disable-next-line no-param-reassign
-        decl.value = Tokenizer.stringifyValues(values);
+        decl.value = replaceImportsInString(decl.value.toString());
       });
 
+      // Replace tokens in at-rules
       css.walkAtRules((atrule) => {
-        if (typeof atrule.params === 'string') {
-          // eslint-disable-next-line no-param-reassign
-          atrule.params = replaceImportsInString(atrule.params);
-        }
+        // eslint-disable-next-line no-param-reassign
+        atrule.params = replaceImportsInString(atrule.params.toString());
+      });
+
+      // Replace tokens in export
+      Object.keys(exports).forEach((exportName) => {
+        exports[exportName] = replaceImportsInString(exports[exportName]);
       });
 
       /* eslint-disable no-param-reassign */

lib/processCss.js

@@ -10,7 +10,7 @@ const extractImports = require('postcss-modules-extract-imports');
 const modulesScope = require('postcss-modules-scope');
 const modulesValues = require('postcss-modules-values');
 
-const { importParser, parser, urlParser } = require('./plugins');
+const { importParser, icssParser, urlParser } = require('./plugins');
 
 const Warning = require('./Warning');
 const CssSyntaxError = require('./CssSyntaxError');
@@ -73,7 +73,7 @@ module.exports = function processCss(content, map, options, callback) {
     plugins.push(urlParser(parserOptions));
   }
 
-  plugins.push(parser(parserOptions));
+  plugins.push(icssParser(parserOptions));
 
   postcss(plugins)
     .process(content, {