diff --git a/CHANGELOG.md b/CHANGELOG.md index 3e04767..f4e8da0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,59 @@ # Change log +## 5.3.0 (2024-05-31) + +- chore: update html-bundler-webpack-plugin +- feat: add `watchFiles.includes` and `watchFiles.excludes` options to allow watch specifically external file, + e.g. *.md file included via Pug filter from any location outer project directory +- feat: add resolving the url() value in the style attribute: + ```pug + div(style="background-image: url(./image.png);") + ``` +- feat: add support for the `css-loader` option `exportType` as [css-style-sheet](https://github.com/webpack-contrib/css-loader?#exporttype) +- feat: add `entryFilter` option to include or exclude entry files when the `entry` option is the path +- feat: add support the [CSS Modules](https://github.com/css-modules/css-modules) for styles imported in JS using the [css-loader modules](https://github.com/webpack-contrib/css-loader#modules) option.\ + Required: `css-loader` >= `7.0.0`\ + The CSS _module rule_ in the webpack config: + ```js + { + test: /\.(css)$/, + use: [ + { + loader: 'css-loader', + options: { + modules: { + localIdentName: '[name]__[local]__[hash:base64:5]', + exportLocalsConvention: 'camelCase', + }, + }, + }, + ], + }, + ``` + CSS: + ```css + .red { + color: red; + } + .green { + color: green; + } + ``` + Using in JS: + ```js + // the styles contains CSS class names: { red: 'main__red__us4Tv', green: 'main__green__bcpRp' } + import styles from './main.css'; + ``` + +- feat: add support for dynamic import of styles + ``` + const loadStyles = () => import('./component.scss'); + loadStyles(); + ``` +- fix: issue when used js dynamic import with magic comments /* webpackPrefetch: true */ and css.inline=true +- fix: ansi colors for verbose output in some terminals +- fix: extract CSS from styles imported in dynamically imported JS + ## 5.2.0 (2024-04-06) - feat: add experimental (undocumented) syntax to include (using `?include` query) compiled CSS directly into style tag to allow keep tag attributes diff --git a/README.md b/README.md index bf2a4a2..aa26d52 100644 --- a/README.md +++ b/README.md @@ -24,6 +24,13 @@ ## Pug template as entry point The **Pug Plugin** generates static HTML or [template function](https://github.com/webdiscus/html-bundler-webpack-plugin#template-in-js) from **Pug template** containing source files of scripts, styles, images, fonts and other resources, similar to how it works in [Vite](https://vitejs.dev/guide/#index-html-and-project-root). +This plugin allows using a template file as an [entry point](https://github.com/webdiscus/html-bundler-webpack-plugin#option-entry). + +The plugin resolves source files of assets in templates and replaces them with correct output URLs in the generated HTML. +The resolved assets will be processed via Webpack plugins/loaders and placed into the output directory. +You can use a relative path or Webpack alias to a source file. + +A template imported in JS will be compiled into [template function](https://github.com/webdiscus/html-bundler-webpack-plugin#template-in-js). You can use the **template function** in JS to render the template with variables in runtime on the client-side in the browser. ## 💡 Highlights diff --git a/package-lock.json b/package-lock.json index 7df1470..7baa93a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,9 +10,9 @@ "license": "ISC", "dependencies": { "ansis": "2.0.3", - "html-bundler-webpack-plugin": "3.8.0", + "html-bundler-webpack-plugin": "3.14.0", "js-beautify": "^1.15.1", - "pug": "3.0.2" + "pug": "3.0.3" }, "devDependencies": { "@babel/core": "7.24.4", @@ -5884,9 +5884,9 @@ } }, "node_modules/html-bundler-webpack-plugin": { - "version": "3.8.0", - "resolved": "https://registry.npmjs.org/html-bundler-webpack-plugin/-/html-bundler-webpack-plugin-3.8.0.tgz", - "integrity": "sha512-QxeFMhJdgpO3NcmBhwrI+LlNxKLFA8ECz17M6zw1P34DqQVy7jGv438ywVVobtnDy4CvbAVA3PZI13SagxYiog==", + "version": "3.14.0", + "resolved": "https://registry.npmjs.org/html-bundler-webpack-plugin/-/html-bundler-webpack-plugin-3.14.0.tgz", + "integrity": "sha512-7/O5mz4IgNpljJqU2tugZ/AUTrRxkOrQcKRqrMicQI55MRh0fTLFuXVC7ow+PTfRT3ZgRHbZgxXdJRBHgNuFpA==", "dependencies": { "@types/html-minifier-terser": "^7.0.2", "ansis": "2.0.3", @@ -5906,7 +5906,7 @@ "favicons": ">=7.1.4", "handlebars": ">=4.7.7", "liquidjs": ">=10.7.0", - "markdown-it": ">=13.0.1", + "markdown-it": ">=12", "mustache": ">=4.2.0", "nunjucks": ">=3.2.3", "parse5": ">=7.1.2", @@ -9891,11 +9891,11 @@ } }, "node_modules/pug": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/pug/-/pug-3.0.2.tgz", - "integrity": "sha512-bp0I/hiK1D1vChHh6EfDxtndHji55XP/ZJKwsRqrz6lRia6ZC2OZbdAymlxdVFwd1L70ebrVJw4/eZ79skrIaw==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/pug/-/pug-3.0.3.tgz", + "integrity": "sha512-uBi6kmc9f3SZ3PXxqcHiUZLmIXgfgWooKWXcwSGwQd2Zi5Rb0bT14+8CJjJgI8AB+nndLaNgHGrcc6bPIB665g==", "dependencies": { - "pug-code-gen": "^3.0.2", + "pug-code-gen": "^3.0.3", "pug-filters": "^4.0.0", "pug-lexer": "^5.0.1", "pug-linker": "^4.0.0", @@ -9916,24 +9916,24 @@ } }, "node_modules/pug-code-gen": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-3.0.2.tgz", - "integrity": "sha512-nJMhW16MbiGRiyR4miDTQMRWDgKplnHyeLvioEJYbk1RsPI3FuA3saEP8uwnTb2nTJEKBU90NFVWJBk4OU5qyg==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-3.0.3.tgz", + "integrity": "sha512-cYQg0JW0w32Ux+XTeZnBEeuWrAY7/HNE6TWnhiHGnnRYlCgyAUPoyh9KzCMa9WhcJlJ1AtQqpEYHc+vbCzA+Aw==", "dependencies": { "constantinople": "^4.0.1", "doctypes": "^1.1.0", "js-stringify": "^1.0.2", "pug-attrs": "^3.0.0", - "pug-error": "^2.0.0", - "pug-runtime": "^3.0.0", + "pug-error": "^2.1.0", + "pug-runtime": "^3.0.1", "void-elements": "^3.1.0", "with": "^7.0.0" } }, "node_modules/pug-error": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-2.0.0.tgz", - "integrity": "sha512-sjiUsi9M4RAGHktC1drQfCr5C5eriu24Lfbt4s+7SykztEOwVZtbFk1RRq0tzLxcMxMYTBR+zMQaG07J/btayQ==" + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-2.1.0.tgz", + "integrity": "sha512-lv7sU9e5Jk8IeUheHata6/UThZ7RK2jnaaNztxfPYUY+VxZyk/ePVaNZ/vwmH8WqGvDz3LrNYt/+gA55NDg6Pg==" }, "node_modules/pug-filters": { "version": "4.0.0", @@ -14178,14 +14178,14 @@ "ansis": "2.0.3", "css-loader": "^6.11.0", "cssnano": "^6.1.2", - "html-bundler-webpack-plugin": "3.8.0", + "html-bundler-webpack-plugin": "3.14.0", "jest": "^29.7.0", "js-beautify": "^1.15.1", "mini-css-extract-plugin": "^2.8.1", "normalize.css": "^8.0.1", "postcss-loader": "^8.1.1", "prettier": "^3.2.5", - "pug": "3.0.2", + "pug": "3.0.3", "responsive-loader": "^3.1.2", "sass": "1.74.1", "sass-loader": "^14.1.1", @@ -18454,9 +18454,9 @@ } }, "html-bundler-webpack-plugin": { - "version": "3.8.0", - "resolved": "https://registry.npmjs.org/html-bundler-webpack-plugin/-/html-bundler-webpack-plugin-3.8.0.tgz", - "integrity": "sha512-QxeFMhJdgpO3NcmBhwrI+LlNxKLFA8ECz17M6zw1P34DqQVy7jGv438ywVVobtnDy4CvbAVA3PZI13SagxYiog==", + "version": "3.14.0", + "resolved": "https://registry.npmjs.org/html-bundler-webpack-plugin/-/html-bundler-webpack-plugin-3.14.0.tgz", + "integrity": "sha512-7/O5mz4IgNpljJqU2tugZ/AUTrRxkOrQcKRqrMicQI55MRh0fTLFuXVC7ow+PTfRT3ZgRHbZgxXdJRBHgNuFpA==", "requires": { "@types/html-minifier-terser": "^7.0.2", "ansis": "2.0.3", @@ -21277,11 +21277,11 @@ } }, "pug": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/pug/-/pug-3.0.2.tgz", - "integrity": "sha512-bp0I/hiK1D1vChHh6EfDxtndHji55XP/ZJKwsRqrz6lRia6ZC2OZbdAymlxdVFwd1L70ebrVJw4/eZ79skrIaw==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/pug/-/pug-3.0.3.tgz", + "integrity": "sha512-uBi6kmc9f3SZ3PXxqcHiUZLmIXgfgWooKWXcwSGwQd2Zi5Rb0bT14+8CJjJgI8AB+nndLaNgHGrcc6bPIB665g==", "requires": { - "pug-code-gen": "^3.0.2", + "pug-code-gen": "^3.0.3", "pug-filters": "^4.0.0", "pug-lexer": "^5.0.1", "pug-linker": "^4.0.0", @@ -21302,24 +21302,24 @@ } }, "pug-code-gen": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-3.0.2.tgz", - "integrity": "sha512-nJMhW16MbiGRiyR4miDTQMRWDgKplnHyeLvioEJYbk1RsPI3FuA3saEP8uwnTb2nTJEKBU90NFVWJBk4OU5qyg==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-3.0.3.tgz", + "integrity": "sha512-cYQg0JW0w32Ux+XTeZnBEeuWrAY7/HNE6TWnhiHGnnRYlCgyAUPoyh9KzCMa9WhcJlJ1AtQqpEYHc+vbCzA+Aw==", "requires": { "constantinople": "^4.0.1", "doctypes": "^1.1.0", "js-stringify": "^1.0.2", "pug-attrs": "^3.0.0", - "pug-error": "^2.0.0", - "pug-runtime": "^3.0.0", + "pug-error": "^2.1.0", + "pug-runtime": "^3.0.1", "void-elements": "^3.1.0", "with": "^7.0.0" } }, "pug-error": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-2.0.0.tgz", - "integrity": "sha512-sjiUsi9M4RAGHktC1drQfCr5C5eriu24Lfbt4s+7SykztEOwVZtbFk1RRq0tzLxcMxMYTBR+zMQaG07J/btayQ==" + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-2.1.0.tgz", + "integrity": "sha512-lv7sU9e5Jk8IeUheHata6/UThZ7RK2jnaaNztxfPYUY+VxZyk/ePVaNZ/vwmH8WqGvDz3LrNYt/+gA55NDg6Pg==" }, "pug-filters": { "version": "4.0.0", @@ -25437,9 +25437,9 @@ } }, "html-bundler-webpack-plugin": { - "version": "3.8.0", - "resolved": "https://registry.npmjs.org/html-bundler-webpack-plugin/-/html-bundler-webpack-plugin-3.8.0.tgz", - "integrity": "sha512-QxeFMhJdgpO3NcmBhwrI+LlNxKLFA8ECz17M6zw1P34DqQVy7jGv438ywVVobtnDy4CvbAVA3PZI13SagxYiog==", + "version": "3.14.0", + "resolved": "https://registry.npmjs.org/html-bundler-webpack-plugin/-/html-bundler-webpack-plugin-3.14.0.tgz", + "integrity": "sha512-7/O5mz4IgNpljJqU2tugZ/AUTrRxkOrQcKRqrMicQI55MRh0fTLFuXVC7ow+PTfRT3ZgRHbZgxXdJRBHgNuFpA==", "requires": { "@types/html-minifier-terser": "^7.0.2", "ansis": "2.0.3", @@ -28260,11 +28260,11 @@ } }, "pug": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/pug/-/pug-3.0.2.tgz", - "integrity": "sha512-bp0I/hiK1D1vChHh6EfDxtndHji55XP/ZJKwsRqrz6lRia6ZC2OZbdAymlxdVFwd1L70ebrVJw4/eZ79skrIaw==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/pug/-/pug-3.0.3.tgz", + "integrity": "sha512-uBi6kmc9f3SZ3PXxqcHiUZLmIXgfgWooKWXcwSGwQd2Zi5Rb0bT14+8CJjJgI8AB+nndLaNgHGrcc6bPIB665g==", "requires": { - "pug-code-gen": "^3.0.2", + "pug-code-gen": "^3.0.3", "pug-filters": "^4.0.0", "pug-lexer": "^5.0.1", "pug-linker": "^4.0.0", @@ -28285,24 +28285,24 @@ } }, "pug-code-gen": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-3.0.2.tgz", - "integrity": "sha512-nJMhW16MbiGRiyR4miDTQMRWDgKplnHyeLvioEJYbk1RsPI3FuA3saEP8uwnTb2nTJEKBU90NFVWJBk4OU5qyg==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-3.0.3.tgz", + "integrity": "sha512-cYQg0JW0w32Ux+XTeZnBEeuWrAY7/HNE6TWnhiHGnnRYlCgyAUPoyh9KzCMa9WhcJlJ1AtQqpEYHc+vbCzA+Aw==", "requires": { "constantinople": "^4.0.1", "doctypes": "^1.1.0", "js-stringify": "^1.0.2", "pug-attrs": "^3.0.0", - "pug-error": "^2.0.0", - "pug-runtime": "^3.0.0", + "pug-error": "^2.1.0", + "pug-runtime": "^3.0.1", "void-elements": "^3.1.0", "with": "^7.0.0" } }, "pug-error": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-2.0.0.tgz", - "integrity": "sha512-sjiUsi9M4RAGHktC1drQfCr5C5eriu24Lfbt4s+7SykztEOwVZtbFk1RRq0tzLxcMxMYTBR+zMQaG07J/btayQ==" + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-2.1.0.tgz", + "integrity": "sha512-lv7sU9e5Jk8IeUheHata6/UThZ7RK2jnaaNztxfPYUY+VxZyk/ePVaNZ/vwmH8WqGvDz3LrNYt/+gA55NDg6Pg==" }, "pug-filters": { "version": "4.0.0", diff --git a/package.json b/package.json index 8d2ad5a..f9e408b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pug-plugin", - "version": "5.2.0", + "version": "5.3.0", "description": "Pug plugin for webpack handles a template as an entry point, extracts CSS and JS from their sources referenced in Pug.", "keywords": [ "html", @@ -67,9 +67,9 @@ }, "dependencies": { "ansis": "2.0.3", - "html-bundler-webpack-plugin": "3.8.0", + "html-bundler-webpack-plugin": "3.14.0", "js-beautify": "^1.15.1", - "pug": "3.0.2" + "pug": "3.0.3" }, "devDependencies": { "@babel/core": "7.24.4",