Skip to content

Commit 54fff4d

Browse files
sokrasokra
committed
add support for @keyframes, animation, CSS Variables
1 parent b5b92dc commit 54fff4d

16 files changed

Lines changed: 454 additions & 66 deletions

‎examples/css/README.md‎

Lines changed: 55 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -183,16 +183,16 @@ module.exports = __webpack_require__.p + "89a353e9c515885abd8e.png";
183183
/******/
184184
/******/ var uniqueName = "app";
185185
/******/ var loadCssChunkData = (chunkId, link) => {
186-
/******/ var data, token = "", token2, exports = {}, exportsWithId = [], i = 0, cc = 1;
186+
/******/ var data, token = "", token2, exports = {}, exportsWithId = [], exportsWithDashes = [], i = 0, cc = 1;
187187
/******/ try { if(!link) link = loadStylesheet(chunkId); data = link.sheet.cssRules; data = data[data.length - 1].style; } catch(e) { data = getComputedStyle(document.head); }
188188
/******/ data = data.getPropertyValue("--webpack-" + uniqueName + "-" + chunkId);
189189
/******/ if(!data) return;
190190
/******/ for(; cc; i++) {
191191
/******/ cc = data.charCodeAt(i);
192192
/******/ if(cc == 40) { token2 = token; token = ""; }
193193
/******/ else if(cc == 41) { exports[token2.replace(/^_/, "")] = token.replace(/^_/, ""); token = ""; }
194-
/******/ else if(cc == 47) { token = token.replace(/^_/, ""); exports[token] = token; exportsWithId.push(token); token = ""; }
195-
/******/ else if(!cc || cc == 44) { token = token.replace(/^_/, ""); exportsWithId.forEach((x) => (exports[x] = uniqueName + "-" + token + "-" + exports[x])); __webpack_require__.r(exports); __webpack_require__.m[token] = ((exports, module) => {
194+
/******/ else if(cc == 47 || cc == 37) { token = token.replace(/^_/, ""); exports[token] = token; exportsWithId.push(token); if(cc == 37) exportsWithDashes.push(token); token = ""; }
195+
/******/ else if(!cc || cc == 44) { token = token.replace(/^_/, ""); exportsWithId.forEach((x) => (exports[x] = uniqueName + "-" + token + "-" + exports[x])); exportsWithDashes.forEach((x) => (exports[x] = "--" + exports[x])); __webpack_require__.r(exports); __webpack_require__.m[token] = ((exports, module) => {
196196
/******/ module.exports = exports;
197197
/******/ }).bind(null, exports); token = ""; exports = {}; exportsWithId.length = 0; }
198198
/******/ else if(cc == 92) { token += data[++i] }
@@ -427,12 +427,48 @@ body {
427427
background: red;
428428
}
429429

430+
:root {
431+
--app-6-large: 72px;
432+
}
433+
430434
.app-6-main {
431-
font-size: large;
435+
font-size: var(--app-6-large);
436+
color: darkblue;
437+
}
438+
439+
head{--webpack-app-0:_4,_2,_1,_5,large%main/_6;}
440+
```
441+
442+
## production
443+
444+
```javascript
445+
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
446+
.img {
447+
width: 150px;
448+
height: 150px;
449+
background: url(89a353e9c515885abd8e.png);
450+
}
451+
452+
453+
body {
454+
background: green;
455+
font-family: "Open Sans";
456+
}
457+
458+
body {
459+
background: red;
460+
}
461+
462+
:root {
463+
--app-491-b: 72px;
464+
}
465+
466+
.app-491-D {
467+
font-size: var(--app-491-b);
432468
color: darkblue;
433469
}
434470

435-
head{--webpack-app-0:_4,_2,_1,_5,main/_6;}
471+
head{--webpack-app-179:_548,_431,_258,_268,b%D/_491;}
436472
```
437473

438474
# dist/1.output.css
@@ -450,16 +486,16 @@ head{--webpack-app-1:_7;}
450486
## Unoptimized
451487

452488
```
453-
assets by chunk 16.6 KiB (name: main)
454-
asset output.js 16.2 KiB [emitted] (name: main)
455-
asset 0.output.css 333 bytes [emitted] (name: main)
489+
assets by chunk 16.8 KiB (name: main)
490+
asset output.js 16.4 KiB [emitted] (name: main)
491+
asset 0.output.css 385 bytes [emitted] (name: main)
456492
asset 89a353e9c515885abd8e.png 14.6 KiB [emitted] [immutable] [from: images/file.png] (auxiliary name: main)
457493
asset 1.output.css 49 bytes [emitted]
458-
Entrypoint main 16.6 KiB (14.6 KiB) = output.js 16.2 KiB 0.output.css 333 bytes 1 auxiliary asset
459-
chunk (runtime: main) output.js, 0.output.css (main) 218 bytes (javascript) 301 bytes (css) 14.6 KiB (asset) 42 bytes (css-import) 9.8 KiB (runtime) [entry] [rendered]
494+
Entrypoint main 16.8 KiB (14.6 KiB) = output.js 16.4 KiB 0.output.css 385 bytes 1 auxiliary asset
495+
chunk (runtime: main) output.js, 0.output.css (main) 218 bytes (javascript) 335 bytes (css) 14.6 KiB (asset) 42 bytes (css-import) 9.94 KiB (runtime) [entry] [rendered]
460496
> ./example.js main
461-
runtime modules 9.8 KiB 9 modules
462-
dependent modules 42 bytes (javascript) 14.6 KiB (asset) 301 bytes (css) 42 bytes (css-import) [dependent] 6 modules
497+
runtime modules 9.94 KiB 9 modules
498+
dependent modules 42 bytes (javascript) 14.6 KiB (asset) 335 bytes (css) 42 bytes (css-import) [dependent] 6 modules
463499
./example.js 176 bytes [built] [code generated]
464500
[no exports]
465501
[used exports unknown]
@@ -476,21 +512,21 @@ webpack 5.64.4 compiled successfully
476512
## Production mode
477513

478514
```
479-
assets by chunk 4.1 KiB (name: main)
480-
asset output.js 3.77 KiB [emitted] [minimized] (name: main)
481-
asset 179.output.css 341 bytes [emitted] (name: main)
515+
assets by chunk 4.2 KiB (name: main)
516+
asset output.js 3.82 KiB [emitted] [minimized] (name: main)
517+
asset 179.output.css 385 bytes [emitted] (name: main)
482518
asset 89a353e9c515885abd8e.png 14.6 KiB [emitted] [immutable] [from: images/file.png] (auxiliary name: main)
483519
asset 159.output.css 53 bytes [emitted]
484-
Entrypoint main 4.1 KiB (14.6 KiB) = output.js 3.77 KiB 179.output.css 341 bytes 1 auxiliary asset
520+
Entrypoint main 4.2 KiB (14.6 KiB) = output.js 3.82 KiB 179.output.css 385 bytes 1 auxiliary asset
485521
chunk (runtime: main) 159.output.css 23 bytes
486522
> ./lazy-style.css ./example.js 4:0-26
487523
./lazy-style.css 23 bytes [built] [code generated]
488524
[no exports]
489525
import() ./lazy-style.css ./example.js 4:0-26
490-
chunk (runtime: main) output.js, 179.output.css (main) 218 bytes (javascript) 301 bytes (css) 14.6 KiB (asset) 42 bytes (css-import) 9.8 KiB (runtime) [entry] [rendered]
526+
chunk (runtime: main) output.js, 179.output.css (main) 218 bytes (javascript) 335 bytes (css) 14.6 KiB (asset) 42 bytes (css-import) 9.95 KiB (runtime) [entry] [rendered]
491527
> ./example.js main
492-
runtime modules 9.8 KiB 9 modules
493-
dependent modules 42 bytes (javascript) 14.6 KiB (asset) 301 bytes (css) 42 bytes (css-import) [dependent] 6 modules
528+
runtime modules 9.95 KiB 9 modules
529+
dependent modules 42 bytes (javascript) 14.6 KiB (asset) 335 bytes (css) 42 bytes (css-import) [dependent] 6 modules
494530
./example.js 176 bytes [built] [code generated]
495531
[no exports]
496532
[no exports used]

‎examples/css/style.module.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1+
:root {
2+
--large: 72px;
3+
}
4+
15
.main {
2-
font-size: large;
6+
font-size: var(--large);
37
color: darkblue;
48
}

‎examples/css/template.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,12 @@ _{{dist/output.js}}_
2222
_{{dist/0.output.css}}_
2323
```
2424

25+
## production
26+
27+
```javascript
28+
_{{production:dist/179.output.css}}_
29+
```
30+
2531
# dist/1.output.css
2632

2733
```javascript

‎lib/css/CssLoadingRuntimeModule.js‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ class CssLoadingRuntimeModule extends RuntimeModule {
139139
)};`
140140
: "// data-webpack is not used as build has no uniqueName",
141141
`var loadCssChunkData = ${runtimeTemplate.basicFunction("chunkId, link", [
142-
'var data, token = "", token2, exports = {}, exportsWithId = [], i = 0, cc = 1;',
142+
'var data, token = "", token2, exports = {}, exportsWithId = [], exportsWithDashes = [], i = 0, cc = 1;',
143143
"try { if(!link) link = loadStylesheet(chunkId); data = link.sheet.cssRules; data = data[data.length - 1].style; } catch(e) { data = getComputedStyle(document.head); }",
144144
`data = data.getPropertyValue(${
145145
uniqueName
@@ -159,9 +159,11 @@ class CssLoadingRuntimeModule extends RuntimeModule {
159159
`else if(cc == ${cc(
160160
")"
161161
)}) { exports[token2.replace(/^_/, "")] = token.replace(/^_/, ""); token = ""; }`,
162-
`else if(cc == ${cc(
163-
"/"
164-
)}) { token = token.replace(/^_/, ""); exports[token] = token; exportsWithId.push(token); token = ""; }`,
162+
`else if(cc == ${cc("/")} || cc == ${cc(
163+
"%"
164+
)}) { token = token.replace(/^_/, ""); exports[token] = token; exportsWithId.push(token); if(cc == ${cc(
165+
"%"
166+
)}) exportsWithDashes.push(token); token = ""; }`,
165167
`else if(!cc || cc == ${cc(
166168
","
167169
)}) { token = token.replace(/^_/, ""); exportsWithId.forEach(${runtimeTemplate.expressionFunction(
@@ -179,6 +181,9 @@ class CssLoadingRuntimeModule extends RuntimeModule {
179181
})
180182
}`,
181183
"x"
184+
)}); exportsWithDashes.forEach(${runtimeTemplate.expressionFunction(
185+
`exports[x] = "--" + exports[x]`,
186+
"x"
182187
)}); ${RuntimeGlobals.makeNamespaceObject}(exports); ${
183188
RuntimeGlobals.moduleFactories
184189
}[token] = (${runtimeTemplate.basicFunction(

‎lib/css/CssModulesPlugin.js‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,11 @@
88
const { ConcatSource } = require("webpack-sources");
99
const HotUpdateChunk = require("../HotUpdateChunk");
1010
const RuntimeGlobals = require("../RuntimeGlobals");
11+
const SelfModuleFactory = require("../SelfModuleFactory");
1112
const CssExportDependency = require("../dependencies/CssExportDependency");
1213
const CssImportDependency = require("../dependencies/CssImportDependency");
1314
const CssLocalIdentifierDependency = require("../dependencies/CssLocalIdentifierDependency");
15+
const CssSelfLocalIdentifierDependency = require("../dependencies/CssSelfLocalIdentifierDependency");
1416
const CssUrlDependency = require("../dependencies/CssUrlDependency");
1517
const StaticExportsDependency = require("../dependencies/StaticExportsDependency");
1618
const {
@@ -62,7 +64,7 @@ const escapeCss = (str, omitOptionalUnderscore) => {
6264
/[^a-zA-Z0-9_\u0081-\uffff-]/g,
6365
s => `\\${s}`
6466
);
65-
return !omitOptionalUnderscore && /^[0-9_-]/.test(escaped)
67+
return !omitOptionalUnderscore && /^(?!--)[0-9_-]/.test(escaped)
6668
? `_${escaped}`
6769
: escaped;
6870
};
@@ -79,6 +81,7 @@ class CssModulesPlugin {
7981
compiler.hooks.compilation.tap(
8082
plugin,
8183
(compilation, { normalModuleFactory }) => {
84+
const selfFactory = new SelfModuleFactory(compilation.moduleGraph);
8285
compilation.dependencyFactories.set(
8386
CssUrlDependency,
8487
normalModuleFactory
@@ -91,6 +94,14 @@ class CssModulesPlugin {
9194
CssLocalIdentifierDependency,
9295
new CssLocalIdentifierDependency.Template()
9396
);
97+
compilation.dependencyFactories.set(
98+
CssSelfLocalIdentifierDependency,
99+
selfFactory
100+
);
101+
compilation.dependencyTemplates.set(
102+
CssSelfLocalIdentifierDependency,
103+
new CssSelfLocalIdentifierDependency.Template()
104+
);
94105
compilation.dependencyTemplates.set(
95106
CssExportDependency,
96107
new CssExportDependency.Template()
@@ -262,11 +273,16 @@ class CssModulesPlugin {
262273
metaData.push(
263274
`${
264275
exports
265-
? Array.from(exports, ([n, v]) =>
266-
v === `${uniqueName ? uniqueName + "-" : ""}${moduleId}-${n}`
276+
? Array.from(exports, ([n, v]) => {
277+
const shortcutValue = `${
278+
uniqueName ? uniqueName + "-" : ""
279+
}${moduleId}-${n}`;
280+
return v === shortcutValue
267281
? `${escapeCss(n)}/`
268-
: `${escapeCss(n)}(${escapeCss(v)})`
269-
).join("")
282+
: v === "--" + shortcutValue
283+
? `${escapeCss(n)}%`
284+
: `${escapeCss(n)}(${escapeCss(v)})`;
285+
}).join("")
270286
: ""
271287
}${escapeCss(moduleId)}`
272288
);

0 commit comments

Comments
 (0)