Example for utilizing ES6 Modules

[maurer2]

Hello, I think an example of how to use the plugin with es6 modules could be helpful. Here's an proposal:

Use (ES6)

import postcss from 'postcss';
import spiffing from 'postcss-spiffing';
import * as fs from 'fs';

const css = fs.readFileSync('random.css');

console.log(postcss(spiffing()).process(css).css);

Maybe a section about loading ES6 modules in node with ESM (https://github.com/standard-things/esm) might be helpful, too:

Execute in Node >= 13

// Execute directly
node main.js

// Execute via npm scripts
// package.json
{
  ...
  "type": "module",
  "scripts": {
    "convert": "node main.js"
  }
  ....
}
// Command line
npm run convert
yarn convert

[maurer2]

Hello, in order to use this postcss plugin with webpack you have to create a webpack config file and use the plugin as a postcss-loader plugin like so:

Use with Webpack

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const spiffing = require('postcss-spiffing');

module.exports = {
  entry: './main-wp.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  target: 'node',
  plugins: [
    new MiniCssExtractPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: 'css-loader',
            options: {
              url: false,
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                spiffing,
              ]
            }
          }
        ]
      }
    ]
  }
};

MiniCssExtractPlugin is used in this example but style-loader works fine as well.

[maurer2]

Bump. Removed esm from example as esm is unmaintained (https://github.com/standard-things/esm/issues/893)