Skip to content

Commit

Permalink
feat(css): implement @layer and @import rules
Browse files Browse the repository at this point in the history
  • Loading branch information
@noreiller
noreiller committed Jun 1, 2022
1 parent 2738eeb commit 9bdbf80
Show file tree
Hide file tree
Showing 24 changed files with 676 additions and 35 deletions.
116 changes: 94 additions & 22 deletions examples/css/README.md
View file
Expand Up @@ -14,11 +14,29 @@ document.getElementsByTagName("main")[0].className = main;
```javascript
@import "style-imported.css";
@import "https://fonts.googleapis.com/css?family=Open+Sans";
@import url( "style3.css" ) layer( base ) supports( font-weight: bold ) screen and (min-width: 1024px);

@layer base, special;

body {
background: green;
font-family: "Open Sans";
}

@layer special {
.item {
color: rebeccapurple;
}
}

@layer base {
.item {
color: black;
border: 5px solid black;
font-size: 1.3em;
padding: .5em;
}
}
```

# dist/output.js
Expand All @@ -34,7 +52,7 @@ body {
\*************************/
/*! default exports */
/*! exports [not provided] [no usage info] */
/*! runtime requirements: module, __webpack_require__.p, __webpack_require__.* */
/*! runtime requirements: __webpack_require__.p, module, __webpack_require__.* */
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__.p + "89a353e9c515885abd8e.png";
Expand Down Expand Up @@ -393,12 +411,12 @@ var __webpack_exports__ = {};
/*! runtime requirements: __webpack_require__, __webpack_require__.r, __webpack_exports__, __webpack_require__.e, __webpack_require__.* */
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./style.css */ 1);
/* harmony import */ var _style2_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./style2.css */ 5);
/* harmony import */ var _style_module_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style.module.css */ 6);
/* harmony import */ var _style2_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./style2.css */ 6);
/* harmony import */ var _style_module_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style.module.css */ 7);



__webpack_require__.e(/*! import() */ 1).then(__webpack_require__.bind(__webpack_require__, /*! ./lazy-style.css */ 7));
__webpack_require__.e(/*! import() */ 1).then(__webpack_require__.bind(__webpack_require__, /*! ./lazy-style.css */ 8));

document.getElementsByTagName("main")[0].className = _style_module_css__WEBPACK_IMPORTED_MODULE_2__.main;

Expand All @@ -418,26 +436,53 @@ document.getElementsByTagName("main")[0].className = _style_module_css__WEBPACK_
background: url(89a353e9c515885abd8e.png);
}

@layer base {
@supports(font-weight: bold) {
@media screen and (min-width: 1024px) {
body {
font-weight: bold;
text-decoration: underline;
}
}
}
}

@layer base, special;

body {
background: green;
font-family: "Open Sans";
}

@layer special {
.item {
color: rebeccapurple;
}
}

@layer base {
.item {
color: black;
border: 5px solid black;
font-size: 1.3em;
padding: .5em;
}
}

body {
background: red;
}

:root {
--app-6-large: 72px;
--app-7-large: 72px;
}

.app-6-main {
font-size: var(--app-6-large);
.app-7-main {
font-size: var(--app-7-large);
color: darkblue;
}

head{--webpack-app-0:_4,_2,_1,_5,large%main/_6;}
head{--webpack-app-0:_4,_2,_5,_1,_6,large%main/_7;}
```

## production
Expand All @@ -450,12 +495,39 @@ head{--webpack-app-0:_4,_2,_1,_5,large%main/_6;}
background: url(89a353e9c515885abd8e.png);
}

@layer base {
@supports(font-weight: bold) {
@media screen and (min-width: 1024px) {
body {
font-weight: bold;
text-decoration: underline;
}
}
}
}

@layer base, special;

body {
background: green;
font-family: "Open Sans";
}

@layer special {
.item {
color: rebeccapurple;
}
}

@layer base {
.item {
color: black;
border: 5px solid black;
font-size: 1.3em;
padding: .5em;
}
}

body {
background: red;
}
Expand All @@ -469,7 +541,7 @@ body {
color: darkblue;
}

head{--webpack-app-179:_548,_431,_258,_268,b%D/_491;}
head{--webpack-app-179:_548,_431,_252,_258,_268,b%D/_491;}
```

# dist/1.output.css
Expand All @@ -479,24 +551,24 @@ body {
color: blue;
}

head{--webpack-app-1:_7;}
head{--webpack-app-1:_8;}
```

# Info

## Unoptimized

```
assets by chunk 16.9 KiB (name: main)
assets by chunk 17.2 KiB (name: main)
asset output.js 16.5 KiB [emitted] (name: main)
asset output.css 385 bytes [emitted] (name: main)
asset output.css 757 bytes [emitted] (name: main)
asset 89a353e9c515885abd8e.png 14.6 KiB [emitted] [immutable] [from: images/file.png] (auxiliary name: main)
asset 1.output.css 49 bytes [emitted]
Entrypoint main 16.9 KiB (14.6 KiB) = output.js 16.5 KiB output.css 385 bytes 1 auxiliary asset
chunk (runtime: main) output.js, output.css (main) 218 bytes (javascript) 335 bytes (css) 14.6 KiB (asset) 42 bytes (css-import) 10 KiB (runtime) [entry] [rendered]
Entrypoint main 17.2 KiB (14.6 KiB) = output.js 16.5 KiB output.css 757 bytes 1 auxiliary asset
chunk (runtime: main) output.js, output.css (main) 218 bytes (javascript) 699 bytes (css) 14.6 KiB (asset) 42 bytes (css-import) 10 KiB (runtime) [entry] [rendered]
> ./example.js main
runtime modules 10 KiB 9 modules
dependent modules 42 bytes (javascript) 14.6 KiB (asset) 335 bytes (css) 42 bytes (css-import) [dependent] 6 modules
dependent modules 42 bytes (javascript) 14.6 KiB (asset) 699 bytes (css) 42 bytes (css-import) [dependent] 7 modules
./example.js 176 bytes [built] [code generated]
[no exports]
[used exports unknown]
Expand All @@ -507,30 +579,30 @@ chunk (runtime: main) 1.output.css 23 bytes
[no exports]
[used exports unknown]
import() ./lazy-style.css ./example.js 4:0-26
webpack 5.66.0 compiled successfully
webpack 5.72.1 compiled successfully
```

## Production mode

```
assets by chunk 4.25 KiB (name: main)
assets by chunk 4.62 KiB (name: main)
asset output.js 3.87 KiB [emitted] [minimized] (name: main)
asset output.css 385 bytes [emitted] (name: main)
asset output.css 759 bytes [emitted] (name: main)
asset 89a353e9c515885abd8e.png 14.6 KiB [emitted] [immutable] [from: images/file.png] (auxiliary name: main)
asset 159.output.css 53 bytes [emitted]
Entrypoint main 4.25 KiB (14.6 KiB) = output.js 3.87 KiB output.css 385 bytes 1 auxiliary asset
Entrypoint main 4.62 KiB (14.6 KiB) = output.js 3.87 KiB output.css 759 bytes 1 auxiliary asset
chunk (runtime: main) 159.output.css 23 bytes
> ./lazy-style.css ./example.js 4:0-26
./lazy-style.css 23 bytes [built] [code generated]
[no exports]
import() ./lazy-style.css ./example.js 4:0-26
chunk (runtime: main) output.js, output.css (main) 218 bytes (javascript) 335 bytes (css) 14.6 KiB (asset) 42 bytes (css-import) 10 KiB (runtime) [entry] [rendered]
chunk (runtime: main) output.js, output.css (main) 218 bytes (javascript) 699 bytes (css) 14.6 KiB (asset) 42 bytes (css-import) 10 KiB (runtime) [entry] [rendered]
> ./example.js main
runtime modules 10 KiB 9 modules
dependent modules 42 bytes (javascript) 14.6 KiB (asset) 335 bytes (css) 42 bytes (css-import) [dependent] 6 modules
dependent modules 42 bytes (javascript) 14.6 KiB (asset) 699 bytes (css) 42 bytes (css-import) [dependent] 7 modules
./example.js 176 bytes [built] [code generated]
[no exports]
[no exports used]
entry ./example.js main
webpack 5.66.0 compiled successfully
webpack 5.72.1 compiled successfully
```
6 changes: 6 additions & 0 deletions examples/css/index.html
View file
Expand Up @@ -5,6 +5,12 @@
<body>
<main>Hello World</main>
<p class="img"></p>
<div class="item">
I am displayed in <code>color: rebeccapurple</code> because the
<code>special</code> layer comes after the <code>base</code> layer. My
black border, font-size, and padding come from the
<code>base</code> layer.
</div>
<script src="dist/output.js"></script>
</body>
</html>
18 changes: 18 additions & 0 deletions examples/css/style.css
View file
@@ -1,7 +1,25 @@
@import "style-imported.css";
@import "https://fonts.googleapis.com/css?family=Open+Sans";
@import url( "style3.css" ) layer( base ) supports( font-weight: bold ) screen and (min-width: 1024px);

@layer base, special;

body {
background: green;
font-family: "Open Sans";
}

@layer special {
.item {
color: rebeccapurple;
}
}

@layer base {
.item {
color: black;
border: 5px solid black;
font-size: 1.3em;
padding: .5em;
}
}
4 changes: 4 additions & 0 deletions examples/css/style3.css
View file
@@ -0,0 +1,4 @@
body {
font-weight: bold;
text-decoration: underline;
}
9 changes: 9 additions & 0 deletions lib/css/CssModulesPlugin.js
View file
Expand Up @@ -10,6 +10,7 @@ const HotUpdateChunk = require("../HotUpdateChunk");
const RuntimeGlobals = require("../RuntimeGlobals");
const SelfModuleFactory = require("../SelfModuleFactory");
const CssExportDependency = require("../dependencies/CssExportDependency");
const CssImportDecoratorDependency = require("../dependencies/CssImportDecoratorDependency");
const CssImportDependency = require("../dependencies/CssImportDependency");
const CssLocalIdentifierDependency = require("../dependencies/CssLocalIdentifierDependency");
const CssSelfLocalIdentifierDependency = require("../dependencies/CssSelfLocalIdentifierDependency");
Expand Down Expand Up @@ -121,6 +122,14 @@ class CssModulesPlugin {
CssImportDependency,
new CssImportDependency.Template()
);
compilation.dependencyFactories.set(
CssImportDecoratorDependency,
normalModuleFactory
);
compilation.dependencyTemplates.set(
CssImportDecoratorDependency,
new CssImportDecoratorDependency.Template()
);
compilation.dependencyTemplates.set(
StaticExportsDependency,
new StaticExportsDependency.Template()
Expand Down

0 comments on commit 9bdbf80

Please sign in to comment.