refactor: import

Author: alexander-akait

src/index.js

@@ -11,7 +11,6 @@ import {
   isUrlRequest,
   getRemainingRequest,
   getCurrentRequest,
-  stringifyRequest,
 } from 'loader-utils';
 
 import schema from './options.json';
@@ -21,8 +20,10 @@ import {
   getModulesPlugins,
   getImportPrefix,
   getFilter,
+  getApiCode,
   getImportCode,
-  getExportType,
+  getModuleCode,
+  getExportCode,
   prepareCode,
 } from './utils';
 import Warning from './Warning';
@@ -61,15 +62,22 @@ export default function loader(content, map, meta) {
     plugins.push(...getModulesPlugins(options, this));
   }
 
+  // Run other loader (`postcss-loader`, `sass-loader` and etc) for importing CSS
+  const importPrefix = getImportPrefix(this, options.importLoaders);
+
   plugins.push(
     icssParser({
+      loaderContext: this,
+      importPrefix,
       exportLocalsStyle: options.exportLocalsStyle,
     })
   );
 
   if (options.import !== false) {
     plugins.push(
       importParser({
+        loaderContext: this,
+        importPrefix,
         filter: getFilter(options.import, this.resourcePath),
       })
     );
@@ -78,6 +86,7 @@ export default function loader(content, map, meta) {
   if (options.url !== false) {
     plugins.push(
       urlParser({
+        loaderContext: this,
         filter: getFilter(options.url, this.resourcePath, (value) =>
           isUrlRequest(value)
         ),
@@ -111,23 +120,15 @@ export default function loader(content, map, meta) {
         result.messages = [];
       }
 
-      const {
-        exportOnlyLocals: onlyLocals,
-        exportLocalsStyle: localsStyle,
-      } = options;
-      // Run other loader (`postcss-loader`, `sass-loader` and etc) for importing CSS
-      const importPrefix = getImportPrefix(this, options.importLoaders);
+      const { exportOnlyLocals: onlyLocals } = options;
 
-      const buildInfo = {
-        loaderContext: this,
-        hasUrlHelper: false,
-        sourceMap,
-        result,
-        onlyLocals,
-        localsStyle,
-        importPrefix,
-      };
+      const importItems = result.messages
+        .filter((message) => (message.type === 'import' ? message : false))
+        .reduce((accumulator, currentValue) => {
+          accumulator.push(currentValue.import);
 
+          return accumulator;
+        }, []);
       const exportItems = result.messages
         .filter((message) => (message.type === 'export' ? message : false))
         .reduce((accumulator, currentValue) => {
@@ -136,27 +137,20 @@ export default function loader(content, map, meta) {
           return accumulator;
         }, []);
 
-      const importCode = getImportCode(buildInfo);
-      const moduleCode = !onlyLocals
-        ? `exports.push([module.id, ${JSON.stringify(result.css)}, ""${
-            sourceMap && result.map ? `,${result.map}` : ''
-          }]);\n`
-        : '';
-      const exportCode =
-        exportItems.length > 0
-          ? `${getExportType(onlyLocals)} = {\n${exportItems.join(',\n')}\n};`
-          : false;
-      const apiCode =
-        importCode.length > 0 || moduleCode.length > 0
-          ? `exports = module.exports = require(${stringifyRequest(
-              this,
-              require.resolve('./runtime/api')
-            )})(${sourceMap});\n`
-          : false;
+      const importCode = getImportCode(importItems, onlyLocals);
+      const moduleCode = getModuleCode(result, sourceMap, onlyLocals);
+      const exportCode = getExportCode(exportItems, onlyLocals);
+      const apiCode = getApiCode(this, sourceMap, importItems, moduleCode);
 
       return callback(
         null,
-        prepareCode({ apiCode, importCode, moduleCode, exportCode }, buildInfo)
+        prepareCode(
+          { apiCode, importCode, moduleCode, exportCode },
+          result.messages,
+          this,
+          importPrefix,
+          onlyLocals
+        )
       );
     })
     .catch((error) => {

src/plugins/postcss-icss-parser.js

@@ -3,6 +3,8 @@ import { extractICSS, replaceValueSymbols, replaceSymbols } from 'icss-utils';
 import loaderUtils from 'loader-utils';
 import cc from 'camelcase';
 
+import { getImportItemCode } from '../utils';
+
 const pluginName = 'postcss-icss-parser';
 
 function hasImportMessage(messages, url) {
@@ -88,10 +90,18 @@ export default postcss.plugin(
           });
 
           if (!hasImportMessage(result.messages, url)) {
+            const media = '';
+            const { loaderContext, importPrefix } = options;
+
             result.messages.push({
               pluginName,
               type: 'import',
-              item: { url, media: '' },
+              import: getImportItemCode(
+                { url, media },
+                loaderContext,
+                importPrefix
+              ),
+              item: { url, media },
             });
           }
         }
@@ -100,14 +110,19 @@ export default postcss.plugin(
       replaceSymbols(css, importReplacements);
 
       for (const exportName of Object.keys(icssExports)) {
+        const name = exportName;
+        const value = replaceValueSymbols(
+          icssExports[name],
+          importReplacements
+        );
+
         result.messages.push({
           pluginName,
-          export: getExportItem(
-            exportName,
-            replaceValueSymbols(icssExports[exportName], importReplacements),
-            options.exportLocalsStyle
-          ).join(',\n'),
+          export: getExportItem(name, value, options.exportLocalsStyle).join(
+            ',\n'
+          ),
           type: 'export',
+          item: { name, value },
         });
       }
     }

src/plugins/postcss-import-parser.js

@@ -1,6 +1,8 @@
 import postcss from 'postcss';
 import valueParser from 'postcss-value-parser';
 
+import { getImportItemCode } from '../utils';
+
 const pluginName = 'postcss-import-parser';
 
 function getArg(nodes) {
@@ -102,7 +104,15 @@ export default postcss.plugin(
       const paths = uniq(traversed);
 
       paths.forEach((item) => {
-        result.messages.push({ pluginName, type: 'import', item });
+        result.messages.push({
+          pluginName,
+          type: 'import',
+          import: getImportItemCode(
+            item,
+            options.loaderContext,
+            options.importPrefix
+          ),
+        });
       });
     }
 );

src/plugins/postcss-url-parser.js

@@ -1,6 +1,8 @@
 import postcss from 'postcss';
 import valueParser from 'postcss-value-parser';
 
+import { getUrlHelperCode, getUrlItemCode } from '../utils';
+
 const pluginName = 'postcss-url-parser';
 
 const isUrlFunc = /url/i;
@@ -133,16 +135,35 @@ export default postcss.plugin(
 
       const placeholders = [];
 
+      let hasUrlHelper = false;
+
       paths.forEach((path, index) => {
+        const { loaderContext } = options;
         const placeholder = `___CSS_LOADER_URL___${index}___`;
         const { url, needQuotes } = path;
 
         placeholders.push({ placeholder, path });
 
+        if (!hasUrlHelper) {
+          result.messages.push({
+            pluginName,
+            type: 'import',
+            import: getUrlHelperCode(loaderContext),
+          });
+
+          // eslint-disable-next-line no-param-reassign
+          hasUrlHelper = true;
+        }
+
         result.messages.push({
           pluginName,
-          type: 'url',
-          item: { url, placeholder, needQuotes },
+          type: 'import',
+          import: getUrlItemCode(
+            { url, placeholder, needQuotes },
+            loaderContext
+          ),
+          importType: 'url',
+          placeholder,
         });
       });