test suite with webpack

Author: sokra

.eslintignore

@@ -1,2 +1,3 @@
 /node_modules
-/dist
+/dist
+/runtime

.gitignore

@@ -8,9 +8,10 @@ yarn-debug.log*
 /local
 /reports
 /node_modules
+/test/.output
 .DS_Store
 Thumbs.db
 .idea
 .vscode
 *.sublime-project
-*.sublime-workspace
+*.sublime-workspace

package.json

@@ -16,7 +16,7 @@
     "security": "nsp check",
     "test": "jest",
     "test:watch": "jest --watch",
-    "test:coverage": "jest --collectCoverageFrom='src/**/*.js' --coverage",
+    "test:coverage": "jest --collectCoverageFrom=\"src/**\" --coverage",
     "travis:lint": "yarn run lint && yarn run security",
     "travis:test": "yarn run test",
     "travis:coverage": "yarn run test:coverage"
@@ -45,9 +45,10 @@
     "nsp": "^2.6.3",
     "pre-commit": "^1.2.2",
     "standard-version": "^4.0.0",
+    "webpack": "^2.4.1",
     "webpack-defaults": "^0.4.6"
   },
-  "main": "dist/cjs.js",
+  "main": "dist/index.js",
   "files": [
     "dist"
   ],

runtime/index.js

@@ -1,18 +1,25 @@
 export function create(items) {
   var array = [];
-  items.forEach(function(elements) {
-    elements.forEach(function(item) {
+  var map = Object.create ? Object.create(null) : {};
+  items.forEach(function (elements) {
+    elements.forEach(function (item) {
+      var id = item[0];
+      if (id !== null) {
+        if (map[id]) return;
+        map[id] = true;
+      }
       array.push(item);
     });
   });
-  array.toString = function() {
-    return this.map(function(item) {
-      if(item[2]) {
+  array.toString = function toString() {
+    return this.map(function (item) {
+      if (item[2]) {
         return '@media ' + item[2] + '{' + item[1] + '}';
       }
-      return item[1]
+      return item[1];
     }).join('\n');
-  }
+  };
+  return array;
 }
 
 export function moduleWithSourceMap(id, source, sourceMap) {
@@ -24,14 +31,19 @@ export function moduleWithoutSourceMap(id, source) {
 }
 
 export function importStylesheet(data, mediaQuery) {
-  if(typeof data === 'string')
+  if (typeof data === 'string') {
     return moduleWithoutSourceMap(null, data);
-  return data.map(function(item) {
+  }
+  if (!mediaQuery) {
+    return data;
+  }
+  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 + ')';
+  // not perfect, but work fine in 99%
+  if (itemA && itemB) return '(' + itemA + ') and (' + itemB + ')';
   return itemA || itemB || '';
 }

src/cjs.js

@@ -1,10 +1,19 @@
+import path from 'path';
 import OriginalSource from 'webpack-sources/lib/OriginalSource';
 import RawSource from 'webpack-sources/lib/RawSource';
 import ReplaceSource from 'webpack-sources/lib/ReplaceSource';
 import SourceMapSource from 'webpack-sources/lib/SourceMapSource';
 import loaderUtils from 'loader-utils';
 import parse from './parse';
 
+function toRelativeUrl(p, context) {
+  const url = path.relative(context, p).replace(/\\/g, '/');
+  if (/^\.\.?\//.test(url)) {
+    return url;
+  }
+  return `./${url}`;
+}
+
 export default function loader(source, map) {
   const options = loaderUtils.getOptions(this) || {};
   const remainingRequest = loaderUtils.getRemainingRequest(this);
@@ -19,9 +28,11 @@ export default function loader(source, map) {
     replacer = new ReplaceSource(new RawSource(source), remainingRequest);
   }
 
+  // List of @imports with media queries
   const includedStylesheets = new Set();
   const includedStylesheetsMediaQuery = new Map();
 
+  // Interate parsed @import
   parseResult.atImports.forEach((imp) => {
     if (loaderUtils.isUrlRequest(imp.url, options.root)) {
       const request = loaderUtils.urlToRequest(imp.url, options.root);
@@ -31,17 +42,29 @@ export default function loader(source, map) {
     }
   });
 
+  // Flag if column mappings make sense for this SourceMap
+  // It only makes sense if we don't replace values from imported values
   let columns = true;
+
+  // Mapping from css-identifier to import
   const importedNames = new Map();
 
+  // Interate parsed :import
   parseResult.imports.forEach((imp) => {
     importedNames.set(imp.alias, imp);
   });
 
+  // List of all declarates that should be emitted to the output
   const declarations = [];
+
+  // Mapping from css-identifier to imported identifier
   const importReplacements = new Map();
 
+  // Counter to generate unique ids for identifiers
   let id = 0;
+
+  // Iterate all imported names and internal identifiers
+  // Also make sure that :imports are imported like @imports
   for (const pair of importedNames) {
     const internalName = `cssLoaderImport${id}_${pair[1].importName}`;
     id += 1;
@@ -50,6 +73,7 @@ export default function loader(source, map) {
     includedStylesheets.add(pair[1].from);
   }
 
+  // Iterate all replacements and replace them with a maker token
   for (const pair of importReplacements) {
     const identifier = parseResult.identifiers.get(pair[0]);
     if (identifier) {
@@ -61,10 +85,12 @@ export default function loader(source, map) {
     }
   }
 
+  // Delete all metablocks, they only contain meta information and are not valid css
   parseResult.metablocks.forEach((block) => {
     replacer.replace(block.start, block.end, '');
   });
 
+  // Generate declarations for all imports
   const includedStylesheetsArray = [];
   for (const include of includedStylesheets) {
     const internalName = `cssLoaderImport${id}`;
@@ -76,14 +102,62 @@ export default function loader(source, map) {
     });
   }
 
+  // Mapping from exported name to exported value as array (will be joined by spaces)
+  const exportedNames = new Map();
+
+  // Iterate parsed exports
+  parseResult.exports.forEach((exp) => {
+    // Note this elimiate duplicates, only last exported value is valid
+    exportedNames.set(exp.name, exp.value);
+  });
+
+  for (const pair of exportedNames) {
+    const [name, value] = pair;
+    const processedValues = value.map((item) => {
+      const replacement = importReplacements.get(item);
+      if (replacement) {
+        return {
+          name: replacement,
+        };
+      }
+      return item;
+    }).reduce((arr, item) => {
+      if (typeof item === 'string' && arr.length > 0 && typeof arr[arr.length - 1] === 'string') {
+        arr[arr.length - 1] += item; // eslint-disable-line no-param-reassign
+        return arr;
+      }
+      arr.push(item);
+      return arr;
+    }, []);
+    if (processedValues.length === 1 && typeof processedValues[0] !== 'string') {
+      declarations.push(`export { ${processedValues[0].name} as ${name} };`);
+    } else {
+      const valuesJs = processedValues.map((item) => {
+        if (typeof item === 'string') {
+          return JSON.stringify(item);
+        }
+        return item.name;
+      }).join(' + ');
+      declarations.push(`export var ${name} = ${valuesJs};`);
+    }
+  }
+
   let css;
   let sourceMap;
   if (options.sourceMap) {
     const sourceAndMap = replacer.sourceAndMap(typeof options.sourceMap === 'object' ? options.sourceMap : {
       columns,
     });
-    css = sourceAndMap.code;
+    css = sourceAndMap.source;
     sourceMap = sourceAndMap.map;
+    if (options.sourceMapContext) {
+      sourceMap.sources = sourceMap.sources.map(absPath => toRelativeUrl(absPath, options.sourceMapContext));
+    }
+    if (options.sourceMapPrefix) {
+      sourceMap.sources = sourceMap.sources.map(sourcePath => options.sourceMapPrefix + sourcePath);
+    } else {
+      sourceMap.sources = sourceMap.sources.map(sourcePath => `webpack-css:///${sourcePath}`);
+    }
   } else {
     css = replacer.source();
     sourceMap = null;
@@ -94,19 +168,17 @@ export default function loader(source, map) {
   return [
     '// css runtime',
     `import * as runtime from ${loaderUtils.stringifyRequest(this, require.resolve('../runtime'))};`,
-    '',
-    '// declarations',
     declarations.join('\n'),
     '',
     '// CSS',
     'export default /*#__PURE__*/runtime.create([',
   ].concat(
     includedStylesheetsArray.map((include) => {
       if (!include.mediaQuery) return `  ${include.name},`;
-      return `  runtime.importStylesheet(${include.name}, ${JSON.stringify(include.mediaQuery)},`;
+      return `  runtime.importStylesheet(${include.name}, ${JSON.stringify(include.mediaQuery)}),`;
     }),
   ).concat([
-    `  runtime.${sourceMap ? 'moduleWithSourceMap' : 'moduleWithoutSourceMap'}(module.id, ${cssJs}${sourceMap ? `, ${sourceMap}` : ''})`,
+    `  runtime.${sourceMap ? 'moduleWithSourceMap' : 'moduleWithoutSourceMap'}(module.id, ${cssJs}${sourceMap ? `, ${JSON.stringify(sourceMap)}` : ''})`,
     ']);',
   ]).join('\n');
 }

src/index.js

@@ -1,5 +1,5 @@
-export function throwUnexpectedToken(match, index, length, state) {
-  throw new Error(`Unexpected token '${match}' at ${index} in ${state}`);
+export function throwUnexpectedToken(match, index) {
+  throw new Error(`Unexpected token '${match}' at ${index}`);
 }
 
 export function metablockEndMatch(match, index, length) {

src/parse-common.js

@@ -1,4 +1,4 @@
-import { IDENTIFIER, metablockEndMatch } from './parse-common';
+import { CSS_IDENTIFIER, IDENTIFIER, metablockEndMatch } from './parse-common';
 
 function exportStartMatch(match, index) {
   const block = {
@@ -24,6 +24,13 @@ function exportValueMatch(match) {
   this.currentItem.value.push(match);
 }
 
+function exportWhitespaceMatch() {
+  if (this.currentItem.value.length > 0 && this.currentItem.value[this.currentItem.value.length - 1] === ' ') {
+    return;
+  }
+  this.currentItem.value.push(' ');
+}
+
 export default {
   exportRuleStart: {
     ':export': exportStartMatch,
@@ -50,17 +57,19 @@ export default {
     'comment',
     'whitespace',
     {
-      ':': 'export3',
+      ':\\s*': 'export3',
     },
     'nothingElse',
   ],
   export3: [
     'comment',
-    'whitespace',
     {
       '\\}\\s*': metablockEndMatch,
       ';': 'export1',
-      '[^\\};\\s]+': exportValueMatch,
+      '\\s+': exportWhitespaceMatch,
+      '[^\\};\\-_a-zA-Z0-9\\s]+': exportValueMatch,
+      [CSS_IDENTIFIER]: exportValueMatch,
+      '[\\-_a-zA-Z0-9]+': exportValueMatch,
     },
     'nothingElse',
   ],