Support for Preact CLI

[imrea]

Hi @johanholmerin! Very promising lib! I was eager to pull it in my preact project, however I am having some hard time figuring out how to wire it into preact-cli.

I tried to follow your guides in the Readme's webpack section, and even the vue-related example that you prepared, without much luck.

The conversion to atomic classnames seemed to be working, as they were written onto the target element in the DOM, but I was missing the actual related CSS output. I am not sure whether it is related to how preact-cli assembles the final loaders for webpack, where it seemes to be using style-loader instead of css-loader and maybe even MiniCssExtractPlugin.

I tried with something like this:

// preact.config.js

import Style9Plugin from 'style9/webpack';

export default {
  webpack(config, env, helpers, options) {
  // ...
    config.module.rules.splice(4, 0, {
      test: /\.(tsx|ts|js|mjs|jsx)$/,
      use: Style9Plugin.loader
    });

    config.plugins.splice(8, 0, new Style9Plugin());
  }
};

Could you give some hints on pulling style9 into a preact project?

[johanholmerin]

preact-cli processes all CSS files as CSS modules, and therefore renames the class names. The following preact.config.js should remove the existing webpack style rules.

import Style9Plugin from 'style9/webpack';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';

export default {
  webpack(config) {
    config.module.rules.splice(4, 2);
    config.module.rules.push(
      {
        test: /\.(tsx|ts|js|mjs|jsx)$/,
        use: Style9Plugin.loader,
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      }
    );
    config.plugins.push(new Style9Plugin());
  },
};