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',