Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix: injection algorithm (#456)
  • Loading branch information
evilebottnawi committed Jan 17, 2020
1 parent 36bd8f1 commit 236b243
Show file tree
Hide file tree
Showing 15 changed files with 1,279 additions and 1,078 deletions.
1,972 changes: 1,029 additions & 943 deletions package-lock.json

Large diffs are not rendered by default.

34 changes: 17 additions & 17 deletions package.json
Expand Up @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions src/index.js
Expand Up @@ -161,7 +161,7 @@ if (content.locals) {
exported.use = function() {
if (!(refs++)) {
dispose = api(module.id, content, options);
dispose = api(content, options);
}
return exported;
Expand Down Expand Up @@ -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 : {};
Expand Down
92 changes: 64 additions & 28 deletions src/runtime/injectStylesIntoStyleTag.js
Expand Up @@ -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) {
Expand Down Expand Up @@ -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 */
Expand Down Expand Up @@ -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>
Expand All @@ -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 || [];
Expand All @@ -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;
};
};
24 changes: 12 additions & 12 deletions 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).
Expand All @@ -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? }"
`;
10 changes: 10 additions & 0 deletions test/manual/index.html
Expand Up @@ -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>
Expand Down
15 changes: 15 additions & 0 deletions test/manual/src/index.js
Expand Up @@ -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);
Expand Down Expand Up @@ -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'];
3 changes: 3 additions & 0 deletions test/manual/src/modules/common.module.css
@@ -0,0 +1,3 @@
.common {
background-color: yellow;
}
4 changes: 4 additions & 0 deletions test/manual/src/modules/one.module.css
@@ -0,0 +1,4 @@
.selector1 {
composes: common from './common.module.css';
background-color: red;
}
5 changes: 5 additions & 0 deletions test/manual/src/modules/page.module.css
@@ -0,0 +1,5 @@
.page-btn {
composes: selector1 from './one.module.css';

background: crimson;
}
5 changes: 5 additions & 0 deletions test/manual/src/modules/toolbar.module.css
@@ -0,0 +1,5 @@
@value common from './common.module.css';

.toolbar > .common {
background: orange;
}
4 changes: 4 additions & 0 deletions test/manual/src/modules/two.module.css
@@ -0,0 +1,4 @@
.selector2 {
composes: common from './common.module.css';
background-color: navy;
}
5 changes: 4 additions & 1 deletion test/manual/webpack.config.js
Expand Up @@ -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',
Expand Down

0 comments on commit 236b243

Please sign in to comment.