webpack-loader

Webpack loader for Griffel

A loader for Webpack 5 that performs build time transforms for @griffel/react.

• Install
• Usage
  • Handling Griffel re-exports
  • Configuring Babel settings
  • Configuring webpack resolve options
  • Configuring module evaluation
• Troubleshooting

Install

yarn add --dev @griffel/webpack-loader
# or
npm install --save-dev @griffel/webpack-loader

Usage

Webpack documentation: Loaders

Within your webpack configuration object, you'll need to add the @griffel/webpack-loader to the list of modules, like so:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: '@griffel/webpack-loader',
        },
      },

      // If your project uses TypeScript
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: '@griffel/webpack-loader',
          options: {
            babelOptions: {
              presets: ['@babel/preset-typescript'],
            },
          },
        },
      },
    ],
  },
};

While the loader itself has a short circuit to avoid processing (invoking Babel transforms) it's better to reduce the scope of processed files. For example, you can enforce a restriction to have makeStyles() calls only in .styles.ts files:

module.exports = {
  module: {
    rules: [
      {
        test: /\.styles.ts$/,
        exclude: /node_modules/,
        use: {
          loader: '@griffel/webpack-loader',
          options: {
            babelOptions: {
              presets: ['@babel/preset-typescript'],
            },
          },
        },
      },
    ],
  },
};

Handling Griffel re-exports

import { makeStyles, makeResetStyles } from 'custom-package';
// 👇 custom import names are also supported
import { createStyles } from 'custom-package';

By default, the Webpack loader handles imports from @griffel/react. The webpack loader can be re-configured to handle re-exports of Griffel from custom packages. The makeStyles function itself can also be renamed in this case.

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: '@griffel/webpack-loader',
          options: {
            modules: [
              {
                moduleSource: 'custom-package',
                importName: 'makeStyles',
                resetImportName: 'makeResetStyles',
              },
            ],
          },
        },
      },
    ],
  },
};

Note: "custom-package" should re-export following functions from @griffel/react:

• __styles
• __css
• __resetStyles
• __resetCSS

Configuring Babel settings