karma-typescript-cssmodules-transform

karma-typescript-cssmodules-transform

Karma-Typescript :heart: CSS Modules

This plugin is a specialized PostCSS runner, which transforms CSS :exports blocks to JSON on the fly when running tests with karma-typescript.

The CSS Modules specification is implemented by running PostCSS with these plugins:

• postcss-modules-local-by-default
• postcss-modules-extract-imports
• postcss-modules-scope
• postcss-modules-values

Installation

$ npm install --save-dev karma-typescript-cssmodules-transform

Configuration

In the karma-typescript section of karma.conf.js:

karmaTypescriptConfig: {
    bundlerOptions: {
        transforms: [
            require("karma-typescript-cssmodules-transform")()
        ]
    }
}

Options

Custom options can be passed to the runner in the first argument when calling the plugin:

• PostCSS options. Optional, but the properties to and from are always set to the filename of the CSS file automatically.
• Custom options. Optional, defaults to:

{
    generateScopedName: "[name]_[local]_[hash:base64:5]",
    mode: "local" // valid options are "local" | "global" | "pure"
}

• A RegExp object to filter which files should be processed.
  Optional, defaults to /\.css$/.

An example using a custom scope name generator string and a RegExp filter:

karmaTypescriptConfig: {
    bundlerOptions: {
        transforms: [
            require("karma-typescript-cssmodules-transform")(
                {}, { generateScopedName: "[local]___[hash:base64:5]" } /\.css$/
            )
        ]
    }
}

Licensing

This software is licensed with the MIT license.

© 2016-2021 Erik Barke, Monounity