feat(css): implement @layer and @import rules

webpack · Apr 14, 2023 · 8af5b74 · 8af5b74
1 parent 04df193
commit 8af5b74
Show file tree

Hide file tree

Showing 29 changed files with 830 additions and 77 deletions.
diff --git a/examples/css/README.md b/examples/css/README.md
@@ -13,12 +13,31 @@ document.getElementsByTagName("main")[0].className = main;
 
 ```javascript
 @import "style-imported.css";
-@import "https://fonts.googleapis.com/css?family=Open+Sans";
+@import "https://fonts.googleapis.com/css?family=Open+Sans" screen;
+@import "https://unpkg.com/jquery-ui@1.13.1/themes/base/draggable.css" supports(touch-action: none);
+@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
@@ -39,6 +58,19 @@ body {
 
 module.exports = __webpack_require__.p + "89a353e9c515885abd8e.png";
 
+/***/ }),
+
+/***/ 5:
+/*!****************************************************************************************************************!*\
+  !*** https://fonts.gstatic.com/s/opensans/v29/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVc.ttf ***!
+  \****************************************************************************************************************/
+/*! default exports */
+/*! exports [not provided] [no usage info] */
+/*! runtime requirements: __webpack_require__.p, module, __webpack_require__.* */
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = __webpack_require__.p + "8b49cef9eef7a6b1c4cb.ttf";
+
 /***/ })
 
 /******/ 	});
@@ -392,12 +424,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 */ 8);
+/* harmony import */ var _style_module_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style.module.css */ 9);
 
 
 
-__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 */ 10));
 
 document.getElementsByTagName("main")[0].className = _style_module_css__WEBPACK_IMPORTED_MODULE_2__.main;
 
@@ -410,63 +442,167 @@ document.getElementsByTagName("main")[0].className = _style_module_css__WEBPACK_
 # dist/output.css
 
 ```javascript
-@import url("https://fonts.googleapis.com/css?family=Open+Sans");
 .img {
 	width: 150px;
 	height: 150px;
 	background: url(89a353e9c515885abd8e.png);
 }
 
 
+@media screen {
+	@font-face {
+	  font-family: 'Open Sans';
+	  font-style: normal;
+	  font-weight: 400;
+	  font-stretch: normal;
+	  src: url(8b49cef9eef7a6b1c4cb.ttf) format('truetype');
+	}
+}
+
+@supports(touch-action: none) {
+	/*!
+	 * jQuery UI Draggable 1.13.1
+	 * http://jqueryui.com
+	 *
+	 * Copyright jQuery Foundation and other contributors
+	 * Released under the MIT license.
+	 * http://jquery.org/license
+	 */
+	.ui-draggable-handle {
+		-ms-touch-action: none;
+		touch-action: none;
+	}
+}
+
+@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-9-large: 72px;
 }
 
-.app-6-main {
-	font-size: var(--app-6-large);
+.app-9-main {
+	font-size: var(--app-9-large);
 	color: darkblue;
 }
 
 @media (min-width: 1024px) {
-	.app-6-main {
+	.app-9-main {
 		color: green;
 	}
 }
 
 @supports (display: grid) {
-	.app-6-main {
+	.app-9-main {
 		display: grid
 	}
 }
 
-head{--webpack-app-0:_4,_2,_1,_5,large%main/_6;}
+head{--webpack-app-0:_2,_4,_6,_7,_1,_8,large%main/_9;}
 ```
 
 ## production
 
 ```javascript
-@import url("https://fonts.googleapis.com/css?family=Open+Sans");
 .img {
 	width: 150px;
 	height: 150px;
 	background: url(89a353e9c515885abd8e.png);
 }
 
 
+@media screen {
+	@font-face {
+	  font-family: 'Open Sans';
+	  font-style: normal;
+	  font-weight: 400;
+	  font-stretch: normal;
+	  src: url(8b49cef9eef7a6b1c4cb.ttf) format('truetype');
+	}
+}
+
+@supports(touch-action: none) {
+	/*!
+	 * jQuery UI Draggable 1.13.1
+	 * http://jqueryui.com
+	 *
+	 * Copyright jQuery Foundation and other contributors
+	 * Released under the MIT license.
+	 * http://jquery.org/license
+	 */
+	.ui-draggable-handle {
+		-ms-touch-action: none;
+		touch-action: none;
+	}
+}
+
+@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;
 }
@@ -492,7 +628,7 @@ body {
 	}
 }
 
-head{--webpack-app-179:_548,_431,_258,_268,b%D/_491;}
+head{--webpack-app-179:_431,_572,_863,_252,_258,_268,b%D/_491;}
 ```
 
 # dist/1.output.css
@@ -502,24 +638,26 @@ body {
 	color: blue;
 }
 
-head{--webpack-app-1:_7;}
+head{--webpack-app-1:_10;}
 ```
 
 # Info
 
 ## Unoptimized
 
 ```
-assets by chunk 17 KiB (name: main)
-  asset output.js 16.5 KiB [emitted] (name: main)
-  asset output.css 516 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 17 KiB (14.6 KiB) = output.js 16.5 KiB output.css 516 bytes 1 auxiliary asset
-chunk (runtime: main) output.js, output.css (main) 218 bytes (javascript) 454 bytes (css) 14.6 KiB (asset) 42 bytes (css-import) 10 KiB (runtime) [entry] [rendered]
+assets by info 45.2 KiB [immutable]
+  asset 8b49cef9eef7a6b1c4cb.ttf 30.6 KiB [emitted] [immutable] [from: https://fonts.gstatic.com/s/opensans/v29/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVc.ttf] (auxiliary name: main)
+  asset 89a353e9c515885abd8e.png 14.6 KiB [emitted] [immutable] [from: images/file.png] (auxiliary name: main)
+assets by chunk 18.4 KiB (name: main)
+  asset output.js 17.1 KiB [emitted] (name: main)
+  asset output.css 1.29 KiB [emitted] (name: main)
+asset 1.output.css 50 bytes [emitted]
+Entrypoint main 18.4 KiB (45.2 KiB) = output.js 17.1 KiB output.css 1.29 KiB 2 auxiliary assets
+chunk (runtime: main) output.js, output.css (main) 260 bytes (javascript) 1.39 KiB (css) 45.2 KiB (asset) 10 KiB (runtime) [entry] [rendered]
   > ./example.js main
+  dependent modules 84 bytes (javascript) 45.2 KiB (asset) 1.39 KiB (css) [dependent] 9 modules
   runtime modules 10 KiB 9 modules
-  dependent modules 42 bytes (javascript) 14.6 KiB (asset) 454 bytes (css) 42 bytes (css-import) [dependent] 6 modules
   ./example.js 176 bytes [built] [code generated]
     [no exports]
     [used exports unknown]
@@ -530,30 +668,32 @@ chunk (runtime: main) 1.output.css 23 bytes
     [no exports]
     [used exports unknown]
     import() ./lazy-style.css ./example.js 4:0-26
-webpack 5.78.0 compiled successfully
+webpack 5.79.0 compiled successfully
 ```
 
 ## Production mode
 
 ```
-assets by chunk 4.38 KiB (name: main)
-  asset output.js 3.88 KiB [emitted] [minimized] (name: main)
-  asset output.css 514 bytes [emitted] (name: main)
-asset 89a353e9c515885abd8e.png 14.6 KiB [emitted] [immutable] [from: images/file.png] (auxiliary name: main)
+assets by info 45.2 KiB [immutable]
+  asset 8b49cef9eef7a6b1c4cb.ttf 30.6 KiB [emitted] [immutable] [from: https://fonts.gstatic.com/s/opensans/v29/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVc.ttf] (auxiliary name: main)
+  asset 89a353e9c515885abd8e.png 14.6 KiB [emitted] [immutable] [from: images/file.png] (auxiliary name: main)
+assets by chunk 5.22 KiB (name: main)
+  asset output.js 3.94 KiB [emitted] [minimized] (name: main)
+  asset output.css 1.29 KiB [emitted] (name: main)
 asset 159.output.css 53 bytes [emitted]
-Entrypoint main 4.38 KiB (14.6 KiB) = output.js 3.88 KiB output.css 514 bytes 1 auxiliary asset
+Entrypoint main 5.22 KiB (45.2 KiB) = output.js 3.94 KiB output.css 1.29 KiB 2 auxiliary assets
 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) 454 bytes (css) 14.6 KiB (asset) 42 bytes (css-import) 10 KiB (runtime) [entry] [rendered]
+chunk (runtime: main) output.js, output.css (main) 260 bytes (javascript) 1.39 KiB (css) 45.2 KiB (asset) 10 KiB (runtime) [entry] [rendered]
   > ./example.js main
+  dependent modules 84 bytes (javascript) 45.2 KiB (asset) 1.39 KiB (css) [dependent] 9 modules
   runtime modules 10 KiB 9 modules
-  dependent modules 42 bytes (javascript) 14.6 KiB (asset) 454 bytes (css) 42 bytes (css-import) [dependent] 6 modules
   ./example.js 176 bytes [built] [code generated]
     [no exports]
     [no exports used]
     entry ./example.js main
-webpack 5.78.0 compiled successfully
+webpack 5.79.0 compiled successfully
 ```
diff --git a/examples/css/index.html b/examples/css/index.html
@@ -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>
diff --git a/examples/css/style.css b/examples/css/style.css
@@ -1,7 +1,26 @@
 @import "style-imported.css";
-@import "https://fonts.googleapis.com/css?family=Open+Sans";
+@import "https://fonts.googleapis.com/css?family=Open+Sans" screen;
+@import "https://unpkg.com/jquery-ui@1.13.1/themes/base/draggable.css" supports(touch-action: none);
+@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;
+  }
+}
diff --git a/examples/css/style3.css b/examples/css/style3.css
@@ -0,0 +1,4 @@
+body {
+	font-weight: bold;
+	text-decoration: underline;
+}
diff --git a/examples/css/webpack.config.js b/examples/css/webpack.config.js
@@ -3,6 +3,14 @@ module.exports = {
 		uniqueName: "app"
 	},
 	experiments: {
+		buildHttp: {
+			allowedUris: [
+				"https://fonts.googleapis.com",
+				"https://fonts.gstatic.com",
+				"https://unpkg.com"
+			],
+			frozen: false
+		},
 		css: true
 	}
 };
diff --git a/examples/css/webpack.lock b/examples/css/webpack.lock
@@ -0,0 +1,6 @@
+{
+  "https://fonts.googleapis.com/css?family=Open+Sans": { "integrity": "sha512-N58gP8WenQgxVpqofshprDTqvAh3tZ/OkhNgKd2uCcRAk6LXLVB8echZKWx78ETx6P9+C1KJfDYMuy9zpBYAfg==", "contentType": "text/css; charset=utf-8" },
+  "https://fonts.gstatic.com/s/opensans/v29/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVc.ttf": { "integrity": "sha512-PUea/AZwAh372fk4PYolSDpxSWNtgsJ0bzdL6LBVIxn+sRMONrSs3Po7qVk8veWuuJwZq0TZePsXUblXAZCz9w==", "contentType": "font/ttf" },
+  "https://unpkg.com/jquery-ui@1.13.1/themes/base/draggable.css": { "integrity": "sha512-ID6NYyrTEGxfWaVutJAR/C+668CmUVWh8htwDW3NuBfdFpezO0ANTzD4Hl2G7HO7BrK1B+OwzauU0vG2f6gSCw==", "contentType": "text/css; charset=utf-8" },
+  "version": 1
+}