add loader processing

Author: sokra

runtime/index.js

@@ -0,0 +1,25 @@
+export function a(array) {
+  array.toString = function() {
+    // T O D O
+    return this;
+  }
+}
+
+export function b(id, source, sourceMap) {
+  return [id, source, "", sourceMap];
+}
+
+export function c(id, source) {
+  return b(id, source, null);
+}
+
+export function d(data, mediaQuery) {
+  return data.map(function(item) {
+    return [item[0], item[1], joinMediaQuery(item[2], mediaQuery), item[3]];
+  })
+}
+
+function joinMediaQuery(itemA, itemB) {
+  if(itemA && itemB) return "(" + itemA + ") and (" + itemB + ")";
+  return itemA || itemB || "";
+}

src/index.js

@@ -6,7 +6,7 @@ import loaderUtils from 'loader-utils';
 import parse from './parse';
 
 export default function loader(source, map) {
-  const options = loaderUtils.getOptions(this);
+  const options = loaderUtils.getOptions(this) || {};
   const remainingRequest = loaderUtils.getRemainingRequest(this);
   const parseResult = parse(source);
 
@@ -19,7 +19,96 @@ export default function loader(source, map) {
     replacer = new ReplaceSource(new RawSource(source), remainingRequest);
   }
 
+  const includedStylesheets = new Set();
+  const includedStylesheetsMediaQuery = new Map();
+
+  parseResult.atImports.forEach((imp) => {
+    if(loaderUtils.isUrlRequest(imp.url, options.root)) {
+      const request = loaderUtils.urlToRequest(imp.url, options.root);
+      replacer.replace(imp.start, imp.end, '');
+      includedStylesheets.add(request);
+      includedStylesheetsMediaQuery.set(request, imp.mediaQuery.join(' '));
+    }
+  });
+
+  let columns = true;
+  const importedNames = new Map();
+
+  parseResult.imports.forEach((imp) => {
+    importedNames.set(imp.alias, imp);
+  });
+
+  const declarations = [];
+  const importReplacements = new Map();
+
+  let id = 0;
+  for(const pair of importedNames) {
+    const internalName = `cssLoaderImport${id}_${pair[1].importName}`;
+    id += 1;
+    importReplacements.set(pair[0], internalName);
+    declarations.push(`import { ${pair[1].importName} as ${internalName} } from ${JSON.stringify(pair[1].from)};`);
+    includedStylesheets.add(pair[1].from);
+  }
+
+  for(const pair of importReplacements) {
+    const identifier = parseResult.identifiers.get(pair[0]);
+    if(identifier) {
+      columns = false;
+      const length = identifier.name.length;
+      identifier.locations.forEach((loc) => {
+        replacer.replace(loc, loc + length - 1, `$CSS$LOADER$\{${pair[1]}}`);
+      });
+    }
+  }
+
   parseResult.metablocks.forEach((block) => {
     replacer.replace(block.start, block.end, '');
   });
+
+  const includedStylesheetsArray = [];
+  for(const include of includedStylesheets) {
+    const internalName = `cssLoaderImport${id}`;
+    id += 1;
+    declarations.push(`import ${internalName} from ${loaderUtils.stringifyRequest(this, include)};`);
+    includedStylesheetsArray.push({
+      name: internalName,
+      mediaQuery: includedStylesheetsMediaQuery.get(include) || ''
+    });
+  }
+
+  let css;
+  let sourceMap;
+  if(options.sourceMap) {
+    const sourceAndMap = replacer.sourceAndMap(typeof options.sourceMap === 'object' ? options.sourceMap : {
+      columns: columns
+    });
+    css = sourceAndMap.code;
+    sourceMap = sourceAndMap.map;
+  } else {
+    css = replacer.source();
+    sourceMap = null;
+  }
+
+  const cssJs = JSON.stringify(css).replace(/\$CSS\$LOADER\$\{([^}]+)\}/g, (match, identifer) => `" + ${identifer} + "`);
+
+  return [
+    '// css runtime',
+    `import * as runtime from ${loaderUtils.stringifyRequest(this, require.resolve("../runtime"))};`,
+    '',
+    '// declarations',
+    declarations.join('\n'),
+    '',
+    '// CSS',
+    'export default runtime.a([',
+  ].concat(
+    includedStylesheetsArray.map((include) => {
+      if(!include.mediaQuery) return `  ${include.name},`;
+      return `  runtime.d(${include.name}, ${JSON.stringify(include.mediaQuery)},`;
+    })
+  ).concat([
+    sourceMap ?
+    `  runtime.b(module.id, ${cssJs}, ${sourceMap})` :
+    `  runtime.c(module.id, ${cssJs})`,
+    ']);'
+  ]).join('\n');
 }

src/parse-at-import.js

@@ -27,7 +27,7 @@ function atImportMediaMatch(match) {
 }
 
 function atImportEndMatch(match, index, length) {
-  this.currentItem.end = index + length;
+  this.currentItem.end = index + length - 1;
   return 'topLevel';
 }
 

src/parse-common.js

@@ -3,7 +3,7 @@ export function throwUnexpectedToken(match, index, length, state) {
 }
 
 export function metablockEndMatch(match, index, length) {
-  this.currentBlock.end = index + length;
+  this.currentBlock.end = index + length - 1;
   this.currentImport = undefined;
   return 'topLevel';
 }

src/parse-import.js

@@ -25,7 +25,8 @@ function importFromRawMatch(match, index) {
 function importAliasMatch(match) {
   const importItem = {
     alias: match,
-    importName: null
+    importName: null,
+    from: this.currentImport,
   };
   this.imports.push(importItem);
   this.currentItem = importItem;

test/__snapshots__/loader.test.js.snap

@@ -1,3 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`loader should process simple.css 1`] = `undefined`;
+exports[`loader should process import.css 1`] = `
+Array [
+  "// css runtime
+import * as runtime from \\"../runtime/index.js\\";
+
+// declarations
+import { ABC as cssLoaderImport0_ABC } from \\"some-file\\";
+import { DEF as cssLoaderImport1_DEF } from \\"some-file\\";
+import { HIJ as cssLoaderImport2_HIJ } from \\"other-file\\";
+import cssLoaderImport3 from \\"some-file\\";
+import cssLoaderImport4 from \\"other-file\\";
+
+// CSS
+export default runtime.a([
+  cssLoaderImport3,
+  cssLoaderImport4,
+  runtime.c(module.id, \\"body {\\\\n  background: \\" + cssLoaderImport0_ABC + \\" \\" + cssLoaderImport1_DEF + \\" \\" + cssLoaderImport2_HIJ + \\" klm\\\\n}\\\\n\\\\n.\\" + cssLoaderImport0_ABC + \\" { \\" + cssLoaderImport1_DEF + \\": \\" + cssLoaderImport2_HIJ + \\"; }\\\\n\\")
+]);",
+]
+`;
+
+exports[`loader should process simple.css 1`] = `
+Array [
+  "// css runtime
+import * as runtime from \\"../runtime/index.js\\";
+
+// declarations
+
+
+// CSS
+export default runtime.a([
+  runtime.c(module.id, \\"body {\\\\n  background: red;\\\\n}\\\\n\\\\n.class {\\\\n  color: rgb(1, 2, 3);\\\\n}\\\\n\\")
+]);",
+]
+`;

test/__snapshots__/parse.test.js.snap

@@ -4,19 +4,19 @@ exports[`parse should parse at-import.css 1`] = `
 Object {
   "atImports": Array [
     Object {
-      "end": 15,
+      "end": 14,
       "mediaQuery": Array [],
       "start": 0,
       "url": "abc",
     },
     Object {
-      "end": 35,
+      "end": 34,
       "mediaQuery": Array [],
       "start": 15,
       "url": "abc",
     },
     Object {
-      "end": 64,
+      "end": 63,
       "mediaQuery": Array [
         "print,",
         "screen",
@@ -25,7 +25,7 @@ Object {
       "url": "abc",
     },
     Object {
-      "end": 173,
+      "end": 172,
       "mediaQuery": Array [
         "screen",
         "print",
@@ -48677,19 +48677,19 @@ Object {
   "imports": Array [],
   "metablocks": Array [
     Object {
-      "end": 37,
+      "end": 36,
       "start": 0,
     },
     Object {
-      "end": 51,
+      "end": 50,
       "start": 37,
     },
     Object {
-      "end": 112,
+      "end": 111,
       "start": 51,
     },
     Object {
-      "end": 233,
+      "end": 232,
       "start": 112,
     },
   ],
@@ -48786,32 +48786,36 @@ Object {
   "imports": Array [
     Object {
       "alias": "_imp_abc",
+      "from": "some-file.css",
       "importName": "abc",
     },
     Object {
       "alias": "_imp_def",
+      "from": "some-file.css",
       "importName": "def",
     },
     Object {
       "alias": "--hoho",
+      "from": "abc",
       "importName": "abc",
     },
     Object {
       "alias": "__123hihi",
+      "from": "sum(\\"zzz\\")",
       "importName": "__123hihi",
     },
   ],
   "metablocks": Array [
     Object {
-      "end": 64,
+      "end": 63,
       "start": 0,
     },
     Object {
-      "end": 96,
+      "end": 95,
       "start": 64,
     },
     Object {
-      "end": 249,
+      "end": 248,
       "start": 96,
     },
   ],

test/loader-fixtures/import.css

@@ -0,0 +1,18 @@
+:import(some-file) {
+  abc: ABC;
+  def: DEF;
+}
+
+:import(other-file) {
+  hij: HIJ;
+}
+
+:export {
+  xyz: abc def hij klm;
+}
+
+body {
+  background: abc def hij klm
+}
+
+.abc { def: hij; }

test/loader.test.js

@@ -11,7 +11,25 @@ describe('loader', () => {
     it(`should process ${filename}`, () => {
       const filepath = path.resolve(fixtures, filename);
       const content = fs.readFileSync(filepath, 'utf-8').replace(/\r\n?/g, '\n');
-      const result = loader.call({}, content);
+      let result;
+      const directResult = loader.call({
+        request: "css-loader!file.css",
+        loaders: [
+          {
+            path: "css-loader",
+          },
+        ],
+        context: __dirname,
+        currentLoaderIndex: 0,
+        sourceMap: false,
+        callback(err, ...args) {
+          if(err) {
+            throw err;
+          }
+          result = args;
+        }
+      }, content);
+      result = result || [directResult];
       expect(result).toMatchSnapshot();
     });
   });