pug-plugin - npm Package Versions

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:

  div(style="background-image: url(./image.png);")
  

• feat: add support for the css-loader option exportType as css-style-sheet

• feat: add entryFilter option to include or exclude entry files when the entry option is the path

• feat: add support the CSS Modules for styles imported in JS using the css-loader modules option.
  Required: css-loader >= 7.0.0
  The CSS module rule in the webpack config:

  {
    test: /\.(css)$/,
    use: [
      {
        loader: 'css-loader',
        options: {
          modules: {
            localIdentName: '[name]__[local]__[hash:base64:5]',
            exportLocalsConvention: 'camelCase',
          },
        },
      },
    ],
  },
  

  CSS:

  .red {
    color: red;
  }
  .green {
    color: green;
  }
  

  Using in 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

  style(scope='some')=require('./component.scss?include')
  

  will be generate

  <style scope="some">
    ... CSS ...
  </style>
  

5.1.0 (2024-03-21)

• feat: app the pretty and prettyOptions options to format the generated HTML

5.0.3 (2024-03-17)

• fix: catching of the error when a peer dependency for a Pug filter is not installed

5.0.2 (2024-03-14)

• fix: resolving asset files on windows

5.0.1 (2024-03-11)

• fix: avoid recompiling all entry templates after changes of a non-entry partial file, #66

5.0.0 (2024-02-08)

Note

The pug-plugin since the version 5.0.0 has completely new code based on the html-bundler-webpack-plugin version 3.5.5.

The new version have many many new cool features, but contains some BREAKING CHANGES.

BREAKING CHANGES

Pug loader

The Pug loader should not be defined in the module.rules anymore. The plugin add the pug loader automatically. Please remove the PugPlugin.loader from the config:

module.exports = {
  mode: 'production',
  output: {
    path: path.join(__dirname, 'dist/'),
  },
  entry: {
    index: './src/index.pug',
  },
  plugins: [
    new PugPlugin(),
  ],
  module: {
    rules: [
-      {
-        test: /\.pug$/,
-        loader: PugPlugin.loader,
-      },
    ],
  },
};

Only if you need to define the Pug options then use the new preprocessorOptions plugin option:

module.exports = {
  plugins: [
    new PugPlugin({
+      preprocessorOptions: {
+        basedir: path: path.join(__dirname, 'src/'),
+      }
    }),
  ],
};

The modules option

The modules option is removed. Use the plugin js and css options. Instead of the modules.test option you can use following:

• test option for template extensions
• js.test option for script extensions
• css.test option for style extensions

See new plugin options.

Inline JS

JS code can be inlined using the js.inline: true option or using the ?ìnline query:

//- OLD syntax
- script=require('./main.js?inline')

//- NEW syntax
+ script(src='./main.js?inline')

Inline CSS

CSS code can be inlined using the css.inline: true option or using the ?ìnline query:

//- OLD syntax
- style=require('./style.css?inline' rel='stylesheet')

//- NEW syntax
+ link(href='./style.css?inline' rel='stylesheet')

Using require() in srcset attribute

The require() function in srcset attribute works anymore.

//- OLD syntax
    Note: the required file is relative to the current pug partial file, recommends to use an webpack alias
- img(srcset=`${require('./image1.png')} 400w, ${require('@images/image2.png')} 800w` src=require('./image.png'))

//- NEW syntax
    Note: the file is relative to the main entrypoint pug file, recommends to use an webpack alias
+ img(srcset=`./image1.png 400w, @images/image2.png 800w` src='./image.png')

4.9.9 (2023-08-12)

• fix: resolve filename containing a URI fragment, e.g.:

  use(href=require("./icons.svg#home"))
  

• chore: update npm packages

4.9.8 (2023-07-06)

• fix: missing slash in output filename when publicPath is an url
• test: add test for bugfix with missing slash in output filename

4.9.7 (2023-03-10)

• fix: add missing node modules to compilation after rebuild, #65
• fix: correct inline JS when used split chunks
• refactor: optimize code for script processing
• test: add manual test for missing node modules after rebuild