diff --git a/examples/css/README.md b/examples/css/README.md index 08b76f663b4..c7bb4729180 100644 --- a/examples/css/README.md +++ b/examples/css/README.md @@ -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 @@ -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"; @@ -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; @@ -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 @@ -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; } @@ -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 @@ -479,7 +551,7 @@ body { color: blue; } -head{--webpack-app-1:_7;} +head{--webpack-app-1:_8;} ``` # Info @@ -487,16 +559,16 @@ head{--webpack-app-1:_7;} ## 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] @@ -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 ``` diff --git a/examples/css/index.html b/examples/css/index.html index 9b3f06397ab..2212111ec25 100644 --- a/examples/css/index.html +++ b/examples/css/index.html @@ -5,6 +5,12 @@
color: rebeccapurple
because the
+ special
layer comes after the base
layer. My
+ black border, font-size, and padding come from the
+ base
layer.
+