fix: injection algorithm (#456)

package.json

@@ -45,42 +45,42 @@
   },
   "dependencies": {
     "loader-utils": "^1.2.3",
-    "schema-utils": "^2.0.1"
+    "schema-utils": "^2.6.4"
   },
   "devDependencies": {
-    "@babel/cli": "^7.7.4",
-    "@babel/core": "^7.7.4",
-    "@babel/preset-env": "^7.7.4",
-    "@commitlint/cli": "^8.2.0",
-    "@commitlint/config-conventional": "^8.2.0",
+    "@babel/cli": "^7.8.3",
+    "@babel/core": "^7.8.3",
+    "@babel/preset-env": "^7.8.3",
+    "@commitlint/cli": "^8.3.5",
+    "@commitlint/config-conventional": "^8.3.4",
     "@webpack-contrib/defaults": "^6.3.0",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
     "babel-jest": "^24.9.0",
-    "commitlint-azure-pipelines-cli": "^1.0.2",
+    "commitlint-azure-pipelines-cli": "^1.0.3",
     "cross-env": "^6.0.3",
-    "css-loader": "^3.4.0",
+    "css-loader": "^3.4.2",
     "del": "^5.1.0",
     "del-cli": "^3.0.0",
     "es-check": "^5.1.0",
-    "eslint": "^6.7.1",
-    "eslint-config-prettier": "^6.7.0",
-    "eslint-plugin-import": "^2.18.2",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.9.0",
+    "eslint-plugin-import": "^2.20.0",
     "file-loader": "^5.0.2",
     "husky": "^3.1.0",
     "jest": "^24.9.0",
     "jest-junit": "^10.0.0",
     "jsdom": "^15.2.1",
     "lint-staged": "^9.5.0",
-    "memfs": "^3.0.1",
+    "memfs": "^3.0.4",
     "npm-run-all": "^4.1.5",
     "prettier": "^1.19.1",
-    "sass": "^1.23.7",
-    "sass-loader": "^8.0.0",
-    "semver": "^7.1.0",
+    "sass": "^1.24.5",
+    "sass-loader": "^8.0.2",
+    "semver": "^7.1.1",
     "standard-version": "^7.0.1",
-    "webpack": "^4.41.3",
+    "webpack": "^4.41.5",
     "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.9.0"
+    "webpack-dev-server": "^3.10.1"
   },
   "keywords": [
     "webpack"

src/index.js

@@ -161,7 +161,7 @@ if (content.locals) {
 
 exported.use = function() {
   if (!(refs++)) {
-    dispose = api(module.id, content, options);
+    dispose = api(content, options);
   }
 
   return exported;
@@ -249,7 +249,7 @@ var options = ${JSON.stringify(options)};
 options.insert = ${insert};
 options.singleton = ${isSingleton};
 
-var update = api(module.id, content, options);
+var update = api(content, options);
 
 var exported = content.locals ? content.locals : {};
 

src/runtime/injectStylesIntoStyleTag.js

@@ -44,22 +44,55 @@ const getTarget = (function getTarget() {
   };
 })();
 
-const stylesInDom = {};
+const stylesInDom = [];
+
+function getIndexByIdentifier(identifier) {
+  let result = -1;
+
+  for (let i = 0; i < stylesInDom.length; i++) {
+    if (stylesInDom[i].identifier === identifier) {
+      result = i;
+      break;
+    }
+  }
+
+  return result;
+}
+
+function modulesToDom(list, options) {
+  const idCountMap = {};
+  const identifiers = [];
 
-function modulesToDom(moduleId, list, options) {
   for (let i = 0; i < list.length; i++) {
-    const part = {
-      css: list[i][1],
-      media: list[i][2],
-      sourceMap: list[i][3],
+    const item = list[i];
+    const id = options.base ? item[0] + options.base : item[0];
+    const count = idCountMap[id] || 0;
+    const identifier = `${id} ${count}`;
+
+    idCountMap[id] = count + 1;
+
+    const index = getIndexByIdentifier(identifier);
+    const obj = {
+      css: item[1],
+      media: item[2],
+      sourceMap: item[3],
     };
 
-    if (stylesInDom[moduleId][i]) {
-      stylesInDom[moduleId][i](part);
+    if (index !== -1) {
+      stylesInDom[index].references++;
+      stylesInDom[index].updater(obj);
     } else {
-      stylesInDom[moduleId].push(addStyle(part, options));
+      stylesInDom.push({
+        identifier,
+        updater: addStyle(obj, options),
+        references: 1,
+      });
     }
+
+    identifiers.push(identifier);
   }
+
+  return identifiers;
 }
 
 function insertStyleElement(options) {
@@ -117,7 +150,11 @@ const replaceText = (function replaceText() {
 })();
 
 function applyToSingletonTag(style, index, remove, obj) {
-  const css = remove ? '' : obj.css;
+  const css = remove
+    ? ''
+    : obj.media
+    ? `@media ${obj.media} {${obj.css}}`
+    : obj.css;
 
   // For old IE
   /* istanbul ignore if  */
@@ -212,7 +249,7 @@ function addStyle(obj, options) {
   };
 }
 
-module.exports = (moduleId, list, options) => {
+module.exports = (list, options) => {
   options = options || {};
 
   // Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
@@ -221,15 +258,9 @@ module.exports = (moduleId, list, options) => {
     options.singleton = isOldIE();
   }
 
-  moduleId = options.base ? moduleId + options.base : moduleId;
-
   list = list || [];
 
-  if (!stylesInDom[moduleId]) {
-    stylesInDom[moduleId] = [];
-  }
-
-  modulesToDom(moduleId, list, options);
+  let lastIdentifiers = modulesToDom(list, options);
 
   return function update(newList) {
     newList = newList || [];
@@ -238,20 +269,25 @@ module.exports = (moduleId, list, options) => {
       return;
     }
 
-    if (!stylesInDom[moduleId]) {
-      stylesInDom[moduleId] = [];
-    }
-
-    modulesToDom(moduleId, newList, options);
+    for (let i = 0; i < lastIdentifiers.length; i++) {
+      const identifier = lastIdentifiers[i];
+      const index = getIndexByIdentifier(identifier);
 
-    for (let j = newList.length; j < stylesInDom[moduleId].length; j++) {
-      stylesInDom[moduleId][j]();
+      stylesInDom[index].references--;
     }
 
-    stylesInDom[moduleId].length = newList.length;
+    const newLastIdentifiers = modulesToDom(newList, options);
+
+    for (let i = 0; i < lastIdentifiers.length; i++) {
+      const identifier = lastIdentifiers[i];
+      const index = getIndexByIdentifier(identifier);
 
-    if (stylesInDom[moduleId].length === 0) {
-      delete stylesInDom[moduleId];
+      if (stylesInDom[index].references === 0) {
+        stylesInDom[index].updater();
+        stylesInDom.splice(index, 1);
+      }
     }
+
+    lastIdentifiers = newLastIdentifiers;
   };
 };

test/__snapshots__/validate-options.test.js.snap

@@ -1,27 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`validate options should throw an error on the "attributes" option with "true" value 1`] = `
-"Invalid options object. Style Loader has been initialised using an options object that does not match the API schema.
+"Invalid options object. Style Loader has been initialized using an options object that does not match the API schema.
  - options.attributes should be an object:
    object { … }
    -> Adds custom attributes to tag (https://github.com/webpack-contrib/style-loader#attributes)."
 `;
 
 exports[`validate options should throw an error on the "esModule" option with "true" value 1`] = `
-"Invalid options object. Style Loader has been initialised using an options object that does not match the API schema.
+"Invalid options object. Style Loader has been initialized using an options object that does not match the API schema.
  - options.esModule should be a boolean.
    -> Use the ES modules syntax (https://github.com/webpack-contrib/css-loader#esmodule)."
 `;
 
 exports[`validate options should throw an error on the "injectType" option with "unknown" value 1`] = `
-"Invalid options object. Style Loader has been initialised using an options object that does not match the API schema.
+"Invalid options object. Style Loader has been initialized using an options object that does not match the API schema.
  - options.injectType should be one of these:
    \\"styleTag\\" | \\"singletonStyleTag\\" | \\"lazyStyleTag\\" | \\"lazySingletonStyleTag\\" | \\"linkTag\\"
    -> Allows to setup how styles will be injected into DOM (https://github.com/webpack-contrib/style-loader#injecttype)."
 `;
 
 exports[`validate options should throw an error on the "insert" option with "true" value 1`] = `
-"Invalid options object. Style Loader has been initialised using an options object that does not match the API schema.
+"Invalid options object. Style Loader has been initialized using an options object that does not match the API schema.
  - options.insert should be one of these:
    string | function
    -> Inserts \`<style>\`/\`<link>\` at the given position (https://github.com/webpack-contrib/style-loader#insert).
@@ -31,49 +31,49 @@ exports[`validate options should throw an error on the "insert" option with "tru
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "/test/" value 1`] = `
-"Invalid options object. Style Loader has been initialised using an options object that does not match the API schema.
+"Invalid options object. Style Loader has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
    object { injectType?, attributes?, insert?, base?, esModule? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "[]" value 1`] = `
-"Invalid options object. Style Loader has been initialised using an options object that does not match the API schema.
+"Invalid options object. Style Loader has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
    object { injectType?, attributes?, insert?, base?, esModule? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "{"foo":"bar"}" value 1`] = `
-"Invalid options object. Style Loader has been initialised using an options object that does not match the API schema.
+"Invalid options object. Style Loader has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
    object { injectType?, attributes?, insert?, base?, esModule? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "{}" value 1`] = `
-"Invalid options object. Style Loader has been initialised using an options object that does not match the API schema.
+"Invalid options object. Style Loader has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
    object { injectType?, attributes?, insert?, base?, esModule? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "1" value 1`] = `
-"Invalid options object. Style Loader has been initialised using an options object that does not match the API schema.
+"Invalid options object. Style Loader has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
    object { injectType?, attributes?, insert?, base?, esModule? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "false" value 1`] = `
-"Invalid options object. Style Loader has been initialised using an options object that does not match the API schema.
+"Invalid options object. Style Loader has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
    object { injectType?, attributes?, insert?, base?, esModule? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "test" value 1`] = `
-"Invalid options object. Style Loader has been initialised using an options object that does not match the API schema.
+"Invalid options object. Style Loader has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
    object { injectType?, attributes?, insert?, base?, esModule? }"
 `;
 
 exports[`validate options should throw an error on the "unknown" option with "true" value 1`] = `
-"Invalid options object. Style Loader has been initialised using an options object that does not match the API schema.
+"Invalid options object. Style Loader has been initialized using an options object that does not match the API schema.
  - options has an unknown property 'unknown'. These properties are valid:
    object { injectType?, attributes?, insert?, base?, esModule? }"
 `;

test/manual/index.html

@@ -75,6 +75,16 @@ <h2>Duplicate</h2>
       <div class="duplicate">SHOULD BE BLUE</div>
     </section>
 
+    <section>
+      <h2>Modules</h2>
+      <div class="selector1">BACKGROUND SHOULD BE RED</div>
+      <div class="selector2">BACKGROUND SHOULD BE NAVY</div>
+
+      <div class="toolbar"><div class="common">BACKGROUND SHOULD BE ORANGE</div></div>
+
+      <div class="page-btn">BACKGROUND SHOULD BE CRIMSON</div>
+    </section>
+
     <section>
       <h2>Custom element</h2>
       <custom-square l="100" c="red"></custom-square>

test/manual/src/index.js

@@ -12,6 +12,10 @@ import './order.css';
 import './nested.css';
 import './nested/style.css';
 import './custom-square';
+import one from './modules/one.module.css';
+import two from './modules/two.module.css';
+import toolbar from './modules/toolbar.module.css';
+import page from './modules/page.module.css';
 
 console.log('___LOCALS___');
 console.log(component);
@@ -99,3 +103,14 @@ const api = useUnse.use();
 setTimeout(() => {
   api.unuse();
 }, 6000);
+
+const selector1 = document.querySelector('.selector1');
+selector1.className = one.selector1;
+const selector2 = document.querySelector('.selector2');
+selector2.className = two.selector2;
+const toolbar1 = document.querySelector('.toolbar');
+toolbar1.className = toolbar.toolbar;
+const common1 = document.querySelector('.common');
+common1.className = toolbar.common;
+const pageBtn = document.querySelector('.page-btn');
+pageBtn.className = page['page-btn'];

test/manual/src/modules/common.module.css

@@ -0,0 +1,3 @@
+.common {
+  background-color: yellow;
+}

test/manual/src/modules/one.module.css

@@ -0,0 +1,4 @@
+.selector1 {
+  composes: common from './common.module.css';
+  background-color: red;
+}

test/manual/src/modules/page.module.css

@@ -0,0 +1,5 @@
+.page-btn {
+  composes: selector1 from './one.module.css';
+
+  background: crimson;
+}

test/manual/src/modules/toolbar.module.css

@@ -0,0 +1,5 @@
+@value common from './common.module.css';
+
+.toolbar > .common {
+  background: orange;
+}

test/manual/src/modules/two.module.css

@@ -0,0 +1,4 @@
+.selector2 {
+  composes: common from './common.module.css';
+  background-color: navy;
+}

test/manual/webpack.config.js

@@ -34,7 +34,10 @@ module.exports = {
         use: [
           {
             loader: require.resolve('../../dist/cjs.js'),
-            options: { esModule: ENABLE_ES_MODULE },
+            options: {
+              esModule: ENABLE_ES_MODULE,
+              // injectType: 'singletonStyleTag',
+            },
           },
           {
             loader: 'css-loader',