#Interface: CssModules

The CssModules option is used for the customization of CSS Modules configurations.

#Remarks

The CSS module is enabled for *.module.css, *.module.scss and *.module.less. Use CssModules.auto to customize the filtering behavior.

#Properties

#auto?

optional auto?: boolean | RegExp | ((filename: string) => boolean)

The auto option allows CSS modules to be automatically enabled based on their filenames.

#Default Value

true

#Remarks

Given the various auto values, the behavior is described as follows:

• true: enable CSS modules for all files matching /\.module\.\w+$/i.test(filename) RegExp.

• false: disable CSS modules.

• RegExp: enable CSS modules for all files matching the auto.test(filename) RegExp.

• function: enable CSS modules based on the filter function.

See css-loader#auto for details.

#Example

Enable CSS module for *.module.css and shared/*.css:

import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
  output: {
    cssModules: {
      auto: (filename) => {
        return filename.includes('.module.') || filename.includes('shared/')
      },
    },
  },
})

#exportGlobals?

optional exportGlobals?: boolean

Allows exporting names from global class names, so you can use them via import.

#Default Value

false

#Remarks

See css-loader#exportGlobals for details.

#exportLocalsConvention?

optional exportLocalsConvention?: CssModuleLocalsConvention

The style of exported class names.

#Default Value

'camelCase'

#Remarks

Given the various exportLocalsConvention values, the behavior is described as follows:

• 'asIs': Class names will be exported as is.

• 'camelCase': Class names will be camelized, the original class name will not to be removed from the locals

• 'camelCaseOnly': Class names will be camelized, the original class name will be removed from the locals

• 'dashes': Only dashes in class names will be camelized

• 'dashesOnly': Dashes in class names will be camelized, the original class name will be removed from the locals

See css-loader#exportLocalsConvention for details.

#localIdentName?

optional localIdentName?: string

Sets the format of the className generated by CSS Modules after compilation.

#Default Value

'[path][name]__[local]-[hash:base64:6]' in development, '[local]-[hash:base64:6]' otherwise

#Remarks

Available placeholders:

• [local]: Original class name

• [hash]: Hash of the class name

• [path]: File path

• [name]: File name

• [ext]: File extension

See css-loader#localIdentName for details.

#Examples

Use only hash for shorter class names:

import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
  output: {
    cssModules: {
      localIdentName: '[hash:base64:8]',
    },
  },
})

Include file name for debugging:

import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
  output: {
    cssModules: {
      localIdentName: '[name]__[local]--[hash:base64:5]',
    },
  },
})