Skip to content

Commit 8a26186

Browse files
cap-Bernarditocap-Bernardito
authoredJul 12, 2021
fix: reduce runtime (#519)
·
v4.0.0v3.1.0
1 parent 1556c0b commit 8a26186

7 files changed

+310
-36
lines changed
 

‎package-lock.json

+2-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/index.js

+5-35
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
getStyleTagTransformFn,
1414
getExportStyleCode,
1515
getExportLazyStyleCode,
16+
getSetAttributesCode,
1617
} from "./utils";
1718

1819
import schema from "./options.json";
@@ -37,39 +38,6 @@ loaderAPI.pitch = function loader(request) {
3738
base: options.base,
3839
};
3940

40-
let setAttributesFn;
41-
42-
if (typeof options.attributes !== "undefined") {
43-
setAttributesFn =
44-
typeof options.attributes.nonce === "undefined"
45-
? `function(style, attributes) {
46-
var nonce =
47-
typeof __webpack_nonce__ !== "undefined" ? __webpack_nonce__ : null;
48-
49-
if (nonce) {
50-
attributes.nonce = nonce;
51-
}
52-
53-
Object.keys(attributes).forEach((key) => {
54-
style.setAttribute(key, attributes[key]);
55-
});
56-
}`
57-
: `function(style, attributes) {
58-
Object.keys(attributes).forEach((key) => {
59-
style.setAttribute(key, attributes[key]);
60-
});
61-
}`;
62-
} else {
63-
setAttributesFn = `function(style) {
64-
var nonce =
65-
typeof __webpack_nonce__ !== "undefined" ? __webpack_nonce__ : null;
66-
67-
if (nonce) {
68-
style.setAttribute("nonce", nonce);
69-
}
70-
}`;
71-
}
72-
7341
const insertFn = insertIsFunction
7442
? options.insert.toString()
7543
: `function(style){
@@ -139,6 +107,7 @@ ${esModule ? "export default {}" : ""}`;
139107
${getImportStyleAPICode(esModule, this)}
140108
${getImportStyleDomAPICode(esModule, this, isSingleton, isAuto)}
141109
${getImportGetTargetCode(esModule, this, insertIsFunction)}
110+
${getSetAttributesCode(esModule, this, options)}
142111
${getImportInsertStyleElementCode(esModule, this)}
143112
${getImportStyleContentCode(esModule, this, request)}
144113
${isAuto ? getImportIsOldIECode(esModule, this) : ""}
@@ -158,7 +127,7 @@ var update;
158127
var options = ${JSON.stringify(runtimeOptions)};
159128
160129
${getStyleTagTransformFn(styleTagTransformFn, isSingleton)};
161-
options.setAttributes = ${setAttributesFn};
130+
options.setAttributes = setAttributes;
162131
options.insert = ${insertFn};
163132
options.domAPI = ${getdomAPI(isAuto)};
164133
options.insertStyleElement = insertStyleElement;
@@ -197,6 +166,7 @@ ${getExportLazyStyleCode(esModule, this, request)}
197166
${getImportStyleAPICode(esModule, this)}
198167
${getImportStyleDomAPICode(esModule, this, isSingleton, isAuto)}
199168
${getImportGetTargetCode(esModule, this, insertIsFunction)}
169+
${getSetAttributesCode(esModule, this, options)}
200170
${getImportInsertStyleElementCode(esModule, this)}
201171
${getImportStyleContentCode(esModule, this, request)}
202172
${isAuto ? getImportIsOldIECode(esModule, this) : ""}
@@ -209,7 +179,7 @@ ${getExportLazyStyleCode(esModule, this, request)}
209179
var options = ${JSON.stringify(runtimeOptions)};
210180
211181
${getStyleTagTransformFn(styleTagTransformFn, isSingleton)};
212-
options.setAttributes = ${setAttributesFn};
182+
options.setAttributes = setAttributes;
213183
options.insert = ${insertFn};
214184
options.domAPI = ${getdomAPI(isAuto)};
215185
options.insertStyleElement = insertStyleElement;

‎src/runtime/setAttributesWithAttributes.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/* istanbul ignore next */
2+
function setAttributesWithoutAttributes(style, attributes) {
3+
const nonce =
4+
typeof __webpack_nonce__ !== "undefined" ? __webpack_nonce__ : null;
5+
6+
if (nonce) {
7+
attributes.nonce = nonce;
8+
}
9+
10+
Object.keys(attributes).forEach((key) => {
11+
style.setAttribute(key, attributes[key]);
12+
});
13+
}
14+
15+
module.exports = setAttributesWithoutAttributes;

‎src/runtime/setAttributesWithAttributesAndNonce.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/* istanbul ignore next */
2+
function setAttributesWithoutAttributes(style, attributes) {
3+
Object.keys(attributes).forEach((key) => {
4+
style.setAttribute(key, attributes[key]);
5+
});
6+
}
7+
8+
module.exports = setAttributesWithoutAttributes;

‎src/runtime/setAttributesWithoutAttributes.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/* istanbul ignore next */
2+
function setAttributesWithoutAttributes(style) {
3+
const nonce =
4+
typeof __webpack_nonce__ !== "undefined" ? __webpack_nonce__ : null;
5+
6+
if (nonce) {
7+
style.setAttribute("nonce", nonce);
8+
}
9+
}
10+
11+
module.exports = setAttributesWithoutAttributes;

‎src/utils.js

+30
Original file line numberDiff line numberDiff line change
@@ -274,6 +274,35 @@ function getExportLazyStyleCode(esModule, loaderContext, request) {
274274
: "module.exports = exported;";
275275
}
276276

277+
function getSetAttributesCode(esModule, loaderContext, options) {
278+
let modulePath;
279+
280+
if (typeof options.attributes !== "undefined") {
281+
modulePath =
282+
options.attributes.nonce !== "undefined"
283+
? stringifyRequest(
284+
loaderContext,
285+
`!${path.join(
286+
__dirname,
287+
"runtime/setAttributesWithAttributesAndNonce.js"
288+
)}`
289+
)
290+
: stringifyRequest(
291+
loaderContext,
292+
`!${path.join(__dirname, "runtime/setAttributesWithAttributes.js")}`
293+
);
294+
} else {
295+
modulePath = stringifyRequest(
296+
loaderContext,
297+
`!${path.join(__dirname, "runtime/setAttributesWithoutAttributes.js")}`
298+
);
299+
}
300+
301+
return esModule
302+
? `import setAttributes from ${modulePath};`
303+
: `var setAttributes = require(${modulePath});`;
304+
}
305+
277306
// eslint-disable-next-line import/prefer-default-export
278307
export {
279308
stringifyRequest,
@@ -291,4 +320,5 @@ export {
291320
getStyleTagTransformFn,
292321
getExportStyleCode,
293322
getExportLazyStyleCode,
323+
getSetAttributesCode,
294324
};

‎test/manual/src/index.js

+239
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,242 @@
11
/* eslint-env browser */
22
/* eslint-disable no-console */
33
import "./style.css";
4+
import "./other-style.scss";
5+
import component from "./component.module.css";
6+
import styleLazy from "./style.lazy.css";
7+
import useUnse from "./use-unuse.lazy.css";
8+
import otherStyleLazy from "./other-style.lazy.scss";
9+
import componentLazy from "./component.lazy.module.css";
10+
import "./style.link.css";
11+
import "./order.css";
12+
import "./nested.css";
13+
import "./nested/style.css";
14+
import "./custom-square";
15+
import one from "./modules/one.module.css";
16+
import two from "./modules/two.module.css";
17+
import toolbar from "./modules/toolbar.module.css";
18+
import page from "./modules/page.module.css";
19+
import toogle from "./toogle.lazy.css";
20+
import {
21+
namedExportRed,
22+
namedExportGreen,
23+
namedExportBlue,
24+
namedExportBackground,
25+
} from "./style.named-export.module.css";
26+
import api2, {
27+
namedExportLazyRed,
28+
namedExportLazyGreen,
29+
namedExportLazyBlue,
30+
namedExportLazyBackground,
31+
} from "./style.named-export.lazy.module.css";
32+
33+
console.log("___LOCALS___");
34+
console.log(component);
35+
36+
console.log("___LOCALS_LAZY___");
37+
console.log(componentLazy);
38+
39+
styleLazy.use();
40+
otherStyleLazy.use();
41+
42+
const articleElement1 = document.createElement("article");
43+
const h3Element = document.createElement("h3");
44+
const h3TextNode = document.createTextNode("CSS modules");
45+
46+
const divElement1 = document.createElement("div");
47+
const divElement1Content = document.createTextNode("Red");
48+
49+
divElement1.className = component["module-red"];
50+
divElement1.appendChild(divElement1Content);
51+
52+
const divElement2 = document.createElement("div");
53+
const divElement2Content = document.createTextNode("Green");
54+
55+
divElement2.className = component["module-green"];
56+
divElement2.appendChild(divElement2Content);
57+
58+
const divElement3 = document.createElement("div");
59+
const divElement3Content = document.createTextNode("Blue");
60+
61+
divElement3.className = component["module-blue"];
62+
divElement3.appendChild(divElement3Content);
63+
64+
const divElement4 = document.createElement("div");
65+
66+
divElement4.className = component["module-background"];
67+
68+
h3Element.appendChild(h3TextNode);
69+
articleElement1.appendChild(h3Element);
70+
articleElement1.appendChild(divElement1);
71+
articleElement1.appendChild(divElement2);
72+
articleElement1.appendChild(divElement3);
73+
articleElement1.appendChild(divElement4);
74+
75+
document.querySelectorAll("section")[0].appendChild(articleElement1);
76+
77+
componentLazy.use();
78+
79+
const articleElement2 = document.createElement("article");
80+
const h3Element2 = document.createElement("h3");
81+
const h3TextNode2 = document.createTextNode("CSS modules");
82+
83+
const divElement5 = document.createElement("div");
84+
const divElement5Content = document.createTextNode("Red");
85+
86+
divElement5.className = componentLazy.locals["module-red"];
87+
divElement5.appendChild(divElement5Content);
88+
89+
const divElement6 = document.createElement("div");
90+
const divElement6Content = document.createTextNode("Green");
91+
92+
divElement6.className = componentLazy.locals["module-green"];
93+
divElement6.appendChild(divElement6Content);
94+
95+
const divElement7 = document.createElement("div");
96+
const divElement7Content = document.createTextNode("Blue");
97+
98+
divElement7.className = componentLazy.locals["module-blue"];
99+
divElement7.appendChild(divElement7Content);
100+
101+
const divElement8 = document.createElement("div");
102+
103+
divElement8.className = componentLazy.locals["module-background"];
104+
105+
h3Element2.appendChild(h3TextNode2);
106+
articleElement2.appendChild(h3Element2);
107+
articleElement2.appendChild(divElement5);
108+
articleElement2.appendChild(divElement6);
109+
articleElement2.appendChild(divElement7);
110+
articleElement2.appendChild(divElement8);
111+
112+
document.querySelectorAll("section")[1].appendChild(articleElement2);
113+
114+
const api = useUnse.use();
115+
116+
setTimeout(() => {
117+
api.unuse();
118+
}, 6000);
119+
120+
const selector1 = document.querySelector(".selector1");
121+
selector1.className = one.selector1;
122+
const selector2 = document.querySelector(".selector2");
123+
selector2.className = two.selector2;
124+
const toolbar1 = document.querySelector(".toolbar");
125+
toolbar1.className = toolbar.toolbar;
126+
const common1 = document.querySelector(".common");
127+
common1.className = toolbar.common;
128+
const pageBtn = document.querySelector(".page-btn");
129+
pageBtn.className = page["page-btn"];
130+
131+
const button = document.createElement("button");
132+
133+
button.innerText = "Toggle CSS";
134+
135+
let used = false;
136+
137+
button.addEventListener("click", () => {
138+
if (!used) {
139+
console.log("toggle on");
140+
toogle.use();
141+
142+
used = true;
143+
} else {
144+
console.log("toggle off");
145+
146+
toogle.unuse();
147+
148+
used = false;
149+
}
150+
});
151+
152+
const toggleSection = document.getElementById("toggle-section");
153+
154+
toggleSection.appendChild(button);
155+
156+
console.log("___NAMED_EXPORT___");
157+
console.log(
158+
namedExportRed,
159+
namedExportGreen,
160+
namedExportBlue,
161+
namedExportBackground
162+
);
163+
164+
const articleElement3 = document.createElement("article");
165+
const h3Element3 = document.createElement("h3");
166+
const h3TextNode3 = document.createTextNode("Named export");
167+
168+
const divElement9 = document.createElement("div");
169+
const divElement1Content1 = document.createTextNode("Red");
170+
171+
divElement9.className = namedExportRed;
172+
divElement9.appendChild(divElement1Content1);
173+
174+
const divElement10 = document.createElement("div");
175+
const divElement2Content1 = document.createTextNode("Green");
176+
177+
divElement10.className = namedExportGreen;
178+
divElement10.appendChild(divElement2Content1);
179+
180+
const divElement11 = document.createElement("div");
181+
const divElement3Content1 = document.createTextNode("Blue");
182+
183+
divElement11.className = namedExportBlue;
184+
divElement11.appendChild(divElement3Content1);
185+
186+
const divElement12 = document.createElement("div");
187+
188+
divElement12.className = namedExportBackground;
189+
190+
h3Element3.appendChild(h3TextNode3);
191+
articleElement3.appendChild(h3Element3);
192+
articleElement3.appendChild(divElement9);
193+
articleElement3.appendChild(divElement10);
194+
articleElement3.appendChild(divElement11);
195+
articleElement3.appendChild(divElement12);
196+
197+
document.querySelectorAll("section")[0].appendChild(articleElement3);
198+
199+
console.log("___LAZY_NAMED_EXPORT___");
200+
console.log(
201+
namedExportLazyRed,
202+
namedExportLazyGreen,
203+
namedExportLazyBlue,
204+
namedExportLazyBackground
205+
);
206+
207+
api2.use();
208+
209+
const articleElement4 = document.createElement("article");
210+
const h3Element4 = document.createElement("h3");
211+
const h3TextNode4 = document.createTextNode("Named export");
212+
213+
const divElement13 = document.createElement("div");
214+
const divElement5Content1 = document.createTextNode("Red");
215+
216+
divElement13.className = namedExportLazyRed;
217+
divElement13.appendChild(divElement5Content1);
218+
219+
const divElement14 = document.createElement("div");
220+
const divElement6Content2 = document.createTextNode("Green");
221+
222+
divElement14.className = namedExportLazyGreen;
223+
divElement14.appendChild(divElement6Content2);
224+
225+
const divElement15 = document.createElement("div");
226+
const divElement7Content2 = document.createTextNode("Blue");
227+
228+
divElement15.className = namedExportLazyBlue;
229+
divElement15.appendChild(divElement7Content2);
230+
231+
const divElement16 = document.createElement("div");
232+
233+
divElement16.className = namedExportLazyBackground;
234+
235+
h3Element4.appendChild(h3TextNode4);
236+
articleElement4.appendChild(h3Element4);
237+
articleElement4.appendChild(divElement13);
238+
articleElement4.appendChild(divElement14);
239+
articleElement4.appendChild(divElement15);
240+
articleElement4.appendChild(divElement16);
241+
242+
document.querySelectorAll("section")[1].appendChild(articleElement4);

0 commit comments

Comments
 (0)
Please sign in to comment.