Release v1.2.0

- added support `webpack serve`, feature request #1
- added support require of a style  directly in pug
- added ansi styling by console output
- improve performance
- code optimisation

.editorconfig

@@ -4,6 +4,14 @@ root = true
 end_of_line = lf
 insert_final_newline = true
 
+[{*.cjs,*.js}]
+indent_size = 2
+tab_width = 2
+
+[{*.htm,*.html,*.pug}]
+indent_size = 2
+tab_width = 2
+
 [test/cases/**.html]
 end_of_line = lf
 # disable final new line for expected html files

.prettierrc

@@ -11,7 +11,7 @@
   "bracketSameLine": true,
   "overrides": [
     {
-      "files": ["*.html"],
+      "files": ["*.html", "*.pug"],
       "options": {
         "tabWidth": 4
       }

CHANGELOG.md

@@ -1,7 +1,17 @@
 # Change log
 
+## 1.2.0 (2022-01-11)
+- added support `webpack serve`
+- added support require of style source directly in pug, e.g.:
+  ```pug
+  link(rel='stylesheet' href=require('~Styles/main.scss'))
+  ```
+- added ansi styling by console output
+- improve performance
+- code optimisation
+
 ## 1.1.1 (2021-12-10)
-- update pug-loader: fixed path issues on windows 
+- update pug-loader: fixed path issues on Windows 
 
 ## 1.1.0 (2021-12-07)
 In this release was follow features tested, described and activated:

README.md

@@ -1,4 +1,4 @@
-[![npm version](https://badge.fury.io/js/pug-plugin.svg)](https://badge.fury.io/js/pug-plugin)
+[![npm](https://img.shields.io/npm/v/pug-plugin?logo=npm&color=brightgreen "npm package")](https://www.npmjs.com/package/pug-plugin "download npm package")
 [![node](https://img.shields.io/node/v/pug-plugin)](https://nodejs.org)
 [![node](https://img.shields.io/github/package-json/dependency-version/webdiscus/pug-plugin/peer/webpack)](https://webpack.js.org/)
 [![codecov](https://codecov.io/gh/webdiscus/pug-plugin/branch/master/graph/badge.svg?token=Q6YMEN536M)](https://codecov.io/gh/webdiscus/pug-plugin)
@@ -7,24 +7,59 @@
 # [pug-plugin](https://www.npmjs.com/package/pug-plugin)
 
 Webpack plugin for the [Pug](https://pugjs.org) templates.\
-This plugin extract HTML and CSS from `pug` `html` `scss` `css` files defined by `webpack entry` into output directory.
+This plugin extract HTML and CSS from `pug` `html` `scss` `css` files defined by `webpack entry` 
+and dynamically replace in a template the required source filename of CSS, image with a public hashed name. 
 
 Using the `pug-plugin` and `pug` `html` `scss` `css` assets in the `webpack entry` no longer requires additional plugins such as:
 - [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)
 - [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin)
 - [webpack-remove-empty-scripts](https://github.com/webdiscus/webpack-remove-empty-scripts)
-  or [webpack-fix-style-only-entries](https://github.com/fqborges/webpack-fix-style-only-entries) (bug fix plugins for `mini-css-extract-plugin`)
+  or [webpack-fix-style-only-entries](https://github.com/fqborges/webpack-fix-style-only-entries) \
+  (bug fix plugins for `mini-css-extract-plugin`)
 - [pug-loader](https://github.com/webdiscus/pug-loader) (this loader is already included in the `pug-plugin`)
 
 > The plugin can be used not only for `pug` but also for simply extracting `HTML` or `CSS` from  `webpack entry`, independent of pug usage.
 
 <a id="install" name="install" href="#install"></a>
 ## Install
 
-```console
+```bash
 npm install pug-plugin --save-dev
 ```
 
+## Quick Start
+
+The minimal configuration in `webpack.config.js`:
+```js
+const path = require('path');
+const PugPlugin = require('pug-plugin');
+
+module.exports = {
+  output: {
+    path: path.join(__dirname, 'public/'),
+    publicPath: '/', // must be defined any path, `auto` is not supported
+  },
+
+  entry: {
+    index: './src/pages/index.pug', // ==> public/index.html
+  },
+
+  plugins: [
+    new PugPlugin(), // add the plugin
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.pug$/,
+        loader: PugPlugin.loader, // add the pug-loader
+      },
+    ],
+  },
+};
+```
+> **Note**: this configuration work without `html-webpack-plugin`.
+
 ## Motivation
 
 ### Early
@@ -133,7 +168,7 @@ module.exports = {
         test: /\.(sass|scss)$/,
         sourcePath: path.join(__dirname, 'src/assets/sass/'),
         outputPath: path.join(__dirname, 'public/assets/css/'),
-        filename: isProduction ? '[name][contenthash:8].css' : '[name].css'
+        filename: isProduction ? '[name].[contenthash:8].css' : '[name].css'
       },
     ],
   };
@@ -185,6 +220,15 @@ module.exports = {
     ]
   };
   ```
+- extract CSS via `require()` directly in pug and replace the source filename with a public hashed name. In this case is no need to define the style in the webpack entry:
+  ```pug
+  link(rel='stylesheet' href=require('~Styles/main.scss'))
+  ```
+  output
+  ```html
+  <link rel="stylesheet" href="/assets/css/main.6f4d012e.css">
+  ```
+  [see complete example of usage](#require-style)
 
 <a id="options" name="options" href="#options"></a>
 ## Plugin options
@@ -329,12 +373,104 @@ module.exports = {
 };
 ```
 
-### Extract CSS file from SASS
+<a id="require-style" name="require-style" href="#require-style"></a>
+### Extract CSS via `require` in pug
+
+Dependencies:
+- `css-loader` handles `.css` files and prepare CSS for any CSS extractor
+- `sass-loader` handles `.scss` files
+- `sass` compiles Sass to CSS
+
+Install: `npm install css-loader sass sass-loader --save-dev`
+
+In this case no need to define the style in webpack entry. 
+The CSS will be extracted from a style source required directly in the pug template.
+
+The pug template `src/templates/index.pug`:
+```pug
+html
+  head
+    link(href=require('~Styles/my-style.scss'))
+  body
+    p Hello World!
+```
+Add to the `webpack.config.js` following:
+```js
+module.exports = {
+  entry: {
+    // ...
+    index: 'src/templates/index.pug', // the pug file with required style
+  },
+  
+  plugins: [
+    // ...
+    // handle pug and style files defined in webpack.entry
+    new PugPlugin({
+      modules: [
+        PugPlugin.extractCss(), // enable CSS extraction
+      ],
+    }),
+  ],
+
+  module: {
+    rules: [
+      // ...
+      {
+        test: /\.pug$/,
+        loader: PugPlugin.loader, // the pug-loader is already included in the PugPlugin
+      },
+      {
+        test: /\.(css|sass|scss)$/,
+        type: 'asset/resource', // extract css in pug via require
+        generator: {
+          filename: 'assets/css/[name].[hash:8].css', // save extracted css in public path
+        },
+        use: [ 'css-loader', 'sass-loader' ], // extract css from a style source
+      }
+    ],
+  },
+}
+
+```
 
-Dependencies: 
-- `css-loader` this loader translates CSS into JS strings
-- `sass-loader` need to handle the `.scss` file type
-- `sass` needed for `sass-loader` to compile Sass CSS
+The generated HTML:
+```html
+<html>
+  <head>
+    <link rel="stylesheet" href="/assets/css/main.f57966f4.css">
+  </head>
+  <body>
+    <p>Hello World!</p>
+  </body>
+</html>
+```
+
+> **Note**: don't needed any additional plugin, like `mini-css-extract-plugin`.
+
+## ! ACHTUNG ! ATTENTION !
+### STOP import styles in JavaScript! This is very BAD praxis.
+**DON'T DO IT :** `import ./src/styles.scss` This is popular but `dirty way`!
+
+### Clarification
+The importing of styles in JavaScript triggers the events in Webpack which call the `mini-css-extract-plugin` loader 
+to extract CSS from imported style source. Then the `html-webpack-plugin` using a magic add the `<link href="styles.css">` with filename of extracted CSS to any HTML file in head at last position.
+Your can't define in which HTML file will be added style and in which order. You are not in control of this process!
+This process requires two different plugins and has poor performance.\
+The single `pug-plugin` does it with right way, in one step and much faster.
+
+> ### Correct ways
+> - add a source style file directly in pug via `require`, like `link(href=require('~Styles/styles.scss'))`
+> - add a compiled css file directly in pug, like `link(href='/assets/styles.css')` and add the source of the style in webpack entry.\
+>   Yes, in this case may be needed additional assets manifest plugin to replace original filename with hashed name. But this is the right way.\
+>   In the future, will be added support to automatically replace the asset file name with a hashed one.
+
+
+### Extract CSS from SASS defined in webpack entry
+
+Dependencies:
+- `css-loader` handles `.css` files and prepare CSS for any CSS extractor
+- `sass-loader` handles `.scss` files
+- `sass` compiles Sass to CSS
 
 Install: `npm install css-loader sass sass-loader --save-dev`
 
@@ -354,10 +490,10 @@ module.exports = {
   plugins: [
     new PugPlugin({
       modules: [
-        // add the module to extract CSS into output file
+        // add the module to extract CSS
         // see options https://github.com/webdiscus/pug-plugin#options
         PugPlugin.extractCss({
-          filename: isProduction ? '[name][contenthash:8].css' : '[name].css',
+          filename: isProduction ? '[name].[contenthash:8].css' : '[name].css',
         })
       ],
     }),
@@ -454,7 +590,7 @@ module.exports = {
         },
         // add the module to extract CSS into output file
         PugPlugin.extractCss({
-          filename: isProduction ? '[name][contenthash:8].css' : '[name].css',
+          filename: isProduction ? '[name].[contenthash:8].css' : '[name].css',
           sourcePath: 'src/assets/sass/',
           outputPath: 'assets/css/',
         })

examples/hello-world-mini-css/README.md

@@ -0,0 +1,13 @@
+The app example used `html-webpack-plugin` and `mini-css-extract-plugin`.
+
+## Install
+npm install
+
+## Start local app in browser
+npm run start
+
+## Build
+npm run build
+
+## Watch
+npm run watch

examples/hello-world-mini-css/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "hello-world-mini-css",
+  "version": "1.0.0",
+  "description": "Simple web app",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack serve",
+    "build": "webpack --mode=production --progress",
+    "watch": "webpack --mode=production --watch --progress"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@webdiscus/pug-loader": "^1.5.1",
+    "css-loader": "^6.5.1",
+    "html-webpack-plugin": "^5.5.0",
+    "mini-css-extract-plugin": "^2.4.5",
+    "sass": "^1.45.2",
+    "sass-loader": "^12.4.0",
+    "webpack": "^5.65.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.7.2"
+  }
+}

examples/hello-world-mini-css/src/app/app.js

@@ -0,0 +1,9 @@
+//const html = require('./app.pug'); // for CommonJS syntax use the loader option `esModule: false`
+import html from './app.pug';
+
+const appRootId = 'app-root';
+
+export function app() {
+  const appRootContainer = document.getElementById(appRootId);
+  appRootContainer.innerHTML = html;
+}

examples/hello-world-mini-css/src/app/app.pug

@@ -0,0 +1,15 @@
+h2 Simple web application.
+p Hello World!
+
+div Here is the content loaded from JavaScript application.
+div This supports `live reload` after edit.
+
+p Edit this content and save than the site will be live reloaded.
+
+img(src=require('Images/image.jpeg'))
+
+- var colors = require('App/colors.json')
+
+.colors
+    each color in colors
+        div(style=`background-color:${color.hex};`)= color.name

examples/hello-world-mini-css/src/app/colors.json

@@ -0,0 +1,14 @@
+[
+  {
+    "name": "rose",
+    "hex": "#ff0080"
+  },
+  {
+    "name": "violet",
+    "hex": "#7f00ff"
+  },
+  {
+    "name": "azure",
+    "hex": "#0080ff"
+  }
+]

examples/hello-world-mini-css/src/assets/styles/about.css

@@ -0,0 +1,3 @@
+.about-css {
+  color: yellowgreen;
+}

examples/hello-world-mini-css/src/assets/styles/common.scss

@@ -0,0 +1,12 @@
+$color: #520000;
+
+body {
+  color: $color;
+  font-family: monospace;
+  background-color: #0d1117;
+  margin: 0;
+}
+
+h1, h2 {
+  color: #555;
+}

examples/hello-world-mini-css/src/assets/styles/faq.css

@@ -0,0 +1,3 @@
+.faq-css {
+    color: red;
+}

examples/hello-world-mini-css/src/assets/styles/main.scss

@@ -0,0 +1,23 @@
+img {
+  width: 120px;
+}
+
+#app-root {
+  padding: 20px;
+  background-color: #ffe280;
+}
+
+#static-content {
+  padding: 20px;
+  background-color: #7fffb8;
+}
+
+.main {
+  color: darkgoldenrod;
+}
+
+.colors {
+  width: 120px;
+  color: yellow;
+  text-align: center;
+}