PostCSS Pkg Version To Stylesheet

PostCSS plugin to replace a template string in your stylesheet with your current package version from package.json.

Input

/*!
    Theme Name: my-wordpress-theme
    Theme URI: https://github.com/user/theme
    Author: you
    Author URI: https://example.com
    Description: My Fance Wordpress Theme
    Requires at least: WordPress 5.8.1
    Version: {{ package_version }}
    License: private
*/
.foo {
    color: hotpink;
}

// package.json
{
  "name": "my-wordpress-theme",
  "version": "1.8.2"
}

Output

/*!
    Theme Name: my-wordpress-theme
    Theme URI: https://github.com/user/theme
    Author: you
    Author URI: https://example.com
    Description: My Fance Wordpress Theme
    Requires at least: WordPress 5.8.1
    Version: 1.8.2
    License: private
*/
.foo {
  color: hotpink;
}

Usage

Step 1: Install plugin:

npm i -D postcss @gebruederheitz/postcss-pkg-version-to-stylesheet

Step 2: Check you project for existed PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you do not use PostCSS, add it according to official docs and set this plugin in settings.

Step 3: Add the plugin to plugins list:

module.exports = {
  plugins: [
+   require('@gebruederheitz/postcss-pkg-version-to-stylesheet'),
    require('autoprefixer')
  ]
}

Options

By default this plugin will use the package.json located at the current working directory (i.e. wherever you (or your task runner) are running postcss from). You can provide an alternative package.json through the packagePath option as a string.