`pluginCSS`

Rspack plugin that adds support of importing CSS files.

Basic usage

rspack.config.js
import { pluginCSS } from '@krutoo/utils/rspack';

export default {
  entry: './src/index.tsx',
  plugins: [
    // just use plugin function
    pluginCSS(),
  ],
};

Dependencies

It uses css-loader and CssExtractRspackPlugin under the hood.

So css-loader must be installed in your project.

npm install --save-dev css-loader

css-loader is a part of Webpack ecosystem but don't worry - it is compatible with Rspack

Extraction

By default plugin uses builtin CssExtractRspackPlugin.

You can configure it (see CssExtractRspackPlugin options):

rspack.config.js
import { pluginCSS } from '@krutoo/utils/rspack';

export default {
  plugins: [
    pluginCSS({
      extract: {
        filename: 'styles.css',
        // ...and any other options for CssExtractRspackPlugin
      },
    }),
  ],
};

Or disable:

rspack.config.js
import { pluginCSS } from '@krutoo/utils/rspack';

export default {
  plugins: [
    pluginCSS({
      extract: false,
    }),
  ],
};

CSS-modules

CSS-modules enabled by default for files like some.module.css and some.m.css.

You can configure css-modules by provide cssModules option:

rspack.config.js
import { pluginCSS } from '@krutoo/utils/rspack';

export default {
  plugins: [
    pluginCSS({
      cssModules: {
        namedExport: false,
        localIdentName: '[name]__[local]--[hash:3]',
      },
    }),
  ],
};

Rule insertion

Under the hood this plugin adds item to module.rules in your configuration.

You can configure how to add rule by set ruleInsert option:

rspack.config.js
import { pluginCSS } from '@krutoo/utils/rspack';

export default {
  plugins: [
    pluginCSS({
      // 'to-start' | 'to-end', default: 'to-end'
      ruleInsert: 'to-end',
    }),
  ],
};

Tip: TypeScript declarations for CSS-modules

To provide information for the TypeScript about css-modules files, you can manually add type declarations like this:

src/typings/css-modules.d.ts
// regular css
declare module '*.css' {}

// css-modules
declare module '*.module.css' {
  const styles: { [key: string]: string | undefined };
  export default styles;
}

// css-modules (short syntax)
declare module '*.m.css' {
  const styles: { [key: string]: string | undefined };
  export default styles;
}

Or you can use ready declarations from this package as described here: Type declarations