feat(Pug): add experimental syntax to include compiled CSS into style tag

webdiscus · webdiscus · commit 32f46eebcf95 · 2024-04-06T00:36:06.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,20 @@
 # Change log
 
+## 3.8.0 (2024-04-06)
+
+- feat(Pug): add experimental (undocumented) syntax to include (using `?include` query) compiled CSS directly into style tag to allow keep tag attributes
+  ```pug
+  style(scope='some')=require('./component.scss?include')
+  ```
+  will be generate
+  ```html
+  <style scope="some">
+    ... CSS ...
+  </style>
+  ```
+- test: add test for lazy loading CSS using `fetch()` and `document.adoptedStyleSheets`
+- docs: update readme
+
 ## 3.7.0 (2024-03-21)
 
 - feat: add the possibility to add many post processes. Next postprocess receives the result from previous.
diff --git a/README.md b/README.md
@@ -536,6 +536,7 @@ See [boilerplate](https://github.com/webdiscus/webpack-html-scss-boilerplate)
    - [How to config `splitChunks`](#recipe-split-chunks)
    - [How to keep package name for **split chunks** from **node_modules**](#recipe-split-chunks-keep-module-name)
    - [How to split CSS files](#recipe-split-css)
+   - [How to split CSS files](#recipe-split-css)
 2. [Problems & Solutions](#solutions)
    - [Automatic resolving of file extensions](#solutions-resolve-extensions)
    - [How to use `@import url()` in CSS](#solutions-import-url-in-css)
@@ -6071,11 +6072,26 @@ If you commented out a tag and don't want to resolve files in the tag's [attribu
 For example: `href` -> `x-href` or `src` -> `x-src`.
 
 ```html
-<!-- <link x-href="./styles.css" rel="stylesheet /> -->
+<!-- <link x-href="./styles.scss" rel="stylesheet /> -->
 <!-- <script x-src="./main.js" defer="defer"></script> -->
 <!-- <img x-src="./image.png"> -->
 ```
 
+If used any [template engine](#template-engine) (defaults is [Eta](#loader-option-preprocessor-options-eta))
+then can be used [templating comments](https://eta.js.org/docs/intro/template-syntax) `<%/* ... */%>`.
+
+```html
+<%/* <link rel="stylesheet href="./style.scss" /> Single line comment w/o resolving */%>
+
+<%/*
+  Multiline comment w/o resolving of files in attributes
+  <img src="./image1.png" />
+  <img src="./image2.png" />
+*/%>
+```
+
+The generated HTML will not contain templating comments.
+
 
 #### [↑ back to contents](#contents)
 
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "description": "HTML bundler plugin for webpack handles a template as an entry point, extracts CSS and JS from their sources referenced in HTML, supports template engines like Eta, EJS, Handlebars, Nunjucks.",
   "keywords": [
     "html",
diff --git a/src/Plugin/Collection.js b/src/Plugin/Collection.js
@@ -901,6 +901,17 @@ class Collection {
                 importedStyles.push(asset);
               } else if (inline) {
                 content = this.#inlineStyle(content, resource, asset, LF) || content;
+              } else {
+                // special use case for Pug only e.g.: style(scope='some')=require('./component.css?include')
+                const [, query] = resource.split('?');
+                const isIncluded = query?.includes('include');
+                if (isIncluded) {
+                  const startPos = content.indexOf(asset.assetFile);
+                  if (startPos > 0) {
+                    const source = CssExtractModule.getInlineSource(asset.assetFile);
+                    content = content.slice(0, startPos) + source + content.slice(startPos + asset.assetFile.length);
+                  }
+                }
               }
 
               // 1.1 compute CSS integrity
diff --git a/test/cases/_pug/inline-css-in-style-tag/expected/index.html b/test/cases/_pug/inline-css-in-style-tag/expected/index.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html><html><head><style>h1{color:#228b22}</style>
+</head><body><h1>Home</h1><div class="my-component"><style scope="some">.my-component{color:violet}</style><div>my component</div></div></body></html>
diff --git a/test/cases/_pug/inline-css-in-style-tag/src/component.css b/test/cases/_pug/inline-css-in-style-tag/src/component.css
@@ -0,0 +1,3 @@
+.my-component {
+  color: violet;
+}
diff --git a/test/cases/_pug/inline-css-in-style-tag/src/index.pug b/test/cases/_pug/inline-css-in-style-tag/src/index.pug
@@ -0,0 +1,11 @@
+html
+  head
+    //- inline CSS
+    link(href=require('./style.css?inline') rel='stylesheet')
+  body
+    h1 Home
+
+    .my-component
+      //- include compiled CSS directly into style tag to keep custom attributes
+      style(scope='some')=require('./component.css?include')
+      div my component
diff --git a/test/cases/_pug/inline-css-in-style-tag/src/style.css b/test/cases/_pug/inline-css-in-style-tag/src/style.css
@@ -0,0 +1,3 @@
+h1 {
+  color: forestgreen;
+}
diff --git a/test/cases/_pug/inline-css-in-style-tag/webpack.config.js b/test/cases/_pug/inline-css-in-style-tag/webpack.config.js
@@ -0,0 +1,32 @@
+const path = require('path');
+const PugPlugin = require('@test/html-bundler-webpack-plugin');
+
+module.exports = {
+  mode: 'production',
+
+  output: {
+    path: path.join(__dirname, 'dist/'),
+  },
+
+  plugins: [
+    new PugPlugin({
+      entry: {
+        index: './src/index.pug',
+      },
+      css: {
+        filename: '[name].[contenthash:8].css',
+      },
+      preprocessor: 'pug',
+      preprocessorOptions: {},
+    }),
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.(css|sass|scss)$/,
+        use: ['css-loader', 'sass-loader'],
+      },
+    ],
+  },
+};
diff --git a/test/cases/comment-not-resolve/expected/index.html b/test/cases/comment-not-resolve/expected/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test</title>
+      </head>
+  <body>
+    <h1>Hello World!</h1>
+      </body>
+</html>
diff --git a/test/cases/comment-not-resolve/src/index.html b/test/cases/comment-not-resolve/src/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test</title>
+    <%/* <link rel="stylesheet href="./style.css" /> Single line comment w/o resolving */%>
+  </head>
+  <body>
+    <h1>Hello World!</h1>
+    <%/*
+      Multi line comment w/o resolving
+      <img src="./image1.png" />
+      <img src="./image2.png" />
+    */%>
+  </body>
+</html>
diff --git a/test/cases/comment-not-resolve/webpack.config.js b/test/cases/comment-not-resolve/webpack.config.js
@@ -0,0 +1,19 @@
+const path = require('path');
+const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin');
+
+module.exports = {
+  mode: 'production',
+
+  output: {
+    path: path.join(__dirname, 'dist/'),
+  },
+
+  entry: {
+    index: './src/index.html',
+  },
+
+  plugins: [
+    // zero config
+    new HtmlBundlerPlugin(),
+  ],
+};
diff --git a/test/cases/option-css-inline-auto-dev/expected2/assets/css/style-inline-false.bundle.css b/test/cases/option-css-inline-auto-dev/expected2/assets/css/style-inline-false.bundle.css
diff --git a/test/cases/option-css-inline-auto-dev/expected2/assets/img/apple.02a7c382.png b/test/cases/option-css-inline-auto-dev/expected2/assets/img/apple.02a7c382.png
diff --git a/test/cases/option-css-inline-auto-dev/expected2/index.html b/test/cases/option-css-inline-auto-dev/expected2/index.html
diff --git a/test/cases/option-css-inline-auto-dev/expected2/pages/about.html b/test/cases/option-css-inline-auto-dev/expected2/pages/about.html
diff --git a/test/cases/option-css-inline-keep-attrs/expected/index.html b/test/cases/option-css-inline-keep-attrs/expected/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Home</title>
+
+  <!-- inline CSS in head-->
+  <style>h1 {
+  color: forestgreen;
+}</style>
+</head>
+<body>
+  <h1>Home</h1>
+
+  <div class="my-component">
+    <!-- inline CSS in component and keep attributes in the style tag -->
+    <style scope="some">.my-component {
+  color: violet;
+}</style>
+  </div>
+</body>
+</html>
diff --git a/test/cases/option-css-inline-keep-attrs/src/component.css b/test/cases/option-css-inline-keep-attrs/src/component.css
@@ -0,0 +1,3 @@
+.my-component {
+  color: violet;
+}
diff --git a/test/cases/option-css-inline-keep-attrs/src/index.html b/test/cases/option-css-inline-keep-attrs/src/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Home</title>
+
+  <!-- inline CSS in head-->
+  <link href="./style.css?inline" rel="stylesheet"/>
+</head>
+<body>
+  <h1>Home</h1>
+
+  <div class="my-component">
+    <!-- inline CSS in component and keep attributes in the style tag -->
+    <link href="./component.css?inline" rel="stylesheet" scope="some" />
+  </div>
+</body>
+</html>
diff --git a/test/cases/option-css-inline-keep-attrs/src/style.css b/test/cases/option-css-inline-keep-attrs/src/style.css
@@ -0,0 +1,3 @@
+h1 {
+  color: forestgreen;
+}
diff --git a/test/cases/option-css-inline-keep-attrs/webpack.config.js b/test/cases/option-css-inline-keep-attrs/webpack.config.js
@@ -0,0 +1,30 @@
+const path = require('path');
+const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin');
+
+module.exports = {
+  mode: 'development',
+
+  output: {
+    path: path.join(__dirname, 'dist/'),
+  },
+
+  plugins: [
+    new HtmlBundlerPlugin({
+      entry: {
+        index: './src/index.html',
+      },
+      css: {
+        filename: '[name].bundle.css',
+      },
+    }),
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.(css|sass|scss)$/,
+        use: ['css-loader', 'sass-loader'],
+      },
+    ],
+  },
+};
diff --git a/test/integration-pug.test.js b/test/integration-pug.test.js
diff --git a/test/integration.test.js b/test/integration.test.js

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "html-bundler-webpack-plugin",`
`3`		`- "version": "3.7.0",`
	`3`	`+ "version": "3.8.0",`
`4`	`4`	`"description": "HTML bundler plugin for webpack handles a template as an entry point, extracts CSS and JS from their sources referenced in HTML, supports template engines like Eta, EJS, Handlebars, Nunjucks.",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"html",`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+<!DOCTYPE html><html><head><style>h1{color:#228b22}</style>`
	`2`	`+</head><body><h1>Home</h1><div class="my-component"><style scope="some">.my-component{color:violet}</style><div>my component</div></div></body></html>`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.my-component {`
	`2`	`+ color: violet;`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+h1 {`
	`2`	`+ color: forestgreen;`
	`3`	`+}`