npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@herman-bilous/jest-css-modules-transform

v5.0.1

Published

Jest's preprocessor for css, sass, less, stylus modules generated with Webpack

Downloads

15

Readme

Build Status

jest-css-modules-transform

Preprocessor css modules for Jest test framework

This preprocessor converts css files in modules like Webpack. If we have css files

.class1, .class2, .class3 {
    display: block;
}

Webpack will transfrom it to object.

{
    class1: 'class1', //value may be different. It depends of localIndentName property
    class2: 'class2',
    class3: 'class3',
}

In testing you need to mock all css modules to aviod exception. But use pure object {} for mocking is bad idea, because it makes wrong classNames in components. This preprocessor makes correct modules as if Webpack did.

Usage

In Jest config add option

"transform": {
  ".+\\.(css|styl|less|sass|scss)$": "jest-css-modules-transform"
},

or

"transform": {
  ".+\\.(css|styl|less|sass|scss)$": "<rootDir>/node_modules/jest-css-modules-transform"
},

It supports pure CSS, SCSS, SASS, STYLUS and LESS.

For PostCSS

For .css, .pcss, .postcss files used postcss.config.js from root folder(if file exist of course).
For tests you can rewrite your existed postcss.config.js. See options.

Options

You can save preproccessor options in file jest-css-modules-transform-config.cjs in root of your project(Where is the file package.json). You can pass options for your preprocessors.

example:
const path = require('path');  
const additionalResolvePath = path.resolve(__dirname, 'src', 'additional_modules');

module.exports = {
    sassConfig: {
        loadPaths: [additionalResolvePath],
        precision: 5,
    },
    lessConfig: {
        paths: [additionalResolvePath],
    },
    stylusConfig: {
        paths: [additionalResolvePath],
    },
    postcssConfig: {
        plugins: [
            require('autoprefixer')({
                browsers: ['Chrome 68', 'Firefox 62', 'Safari 12']
            })
        ]
    },
};

For all preprocessor options see offical documentations for Sass, Less, Stylus.

cssLoaderConfig

exportLocalsStyle

Webpack's cssLoader has option exportLocalsStyle.

// file jest-css-modules-transform-config.cjs
module.exports = {
   cssLoaderConfig: {
        exportLocalsStyle: 'camelCase'
   }
};

then this css code

    .foo__bar{color: red;}
    .foo__bar2{color: red;}

converted to

    {
        foo__bar: 'foo__bar',
        fooBar: 'foo__bar',
        foo__bar2: 'foo__bar2',
        fooBar: 'foo__bar2',
    }

Available values camelCase, camelCaseOnly, dashes, dashesOnly, asIs(by default)

prepend

Type: string, Function, Array<string | Function>
Default: null

Pass urls for prepend(before file content) to transformed files.
Useful in a situation where the module uses variables or mixins without explicit import.

For example you have vars in file, but without implicit import. You can prepend file with sass variables before convert module.

injectIntoDOM

Type: boolean Default: false

Inject the generated CSS into the head of the document.

This option could be useful for visual regression testing, where the output dom has the styles applied to it.

sassModuleName

Type: string Default: null

The default nodejs module for sass/scss files is sass. If not found in node_modules, then node-sass. You can define any another module.

Example with array of paths
// file jest-css-modules-transform-config.cjs
module.exports = {
   prepend: [
       'some/url/vars.scss',
       'some/url/theme.scss',
   ],
};
Example with single string
// file jest-css-modules-transform-config.cjs
module.exports = {
   prepend: 'some/url/vars.scss',
};
Example with custom function
// file jest-css-modules-transform-config.cjs
module.exports = {
   prepend: (filepath) => {
       if (filepath.includes('components')) {
           return [
               'components/vars.scss',
               'components2/vars.scss',
           ];
       }

       return [
            'common/vars.scss',
            'common/vars2.scss',
       ];
   },
};

It works with any preprocessors(Sass, Less, Styles, PostCSS, pure CSS)

Custom config path

By default option plugin's config file is jest-css-modules-transform-config.cjs from root. For specify custom path just add env JEST_CSS_MODULES_TRANSFORM_CONFIG. For example:

JEST_CSS_MODULES_TRANSFORM_CONFIG=custom-config-path npm test

or

JEST_CSS_MODULES_TRANSFORM_CONFIG=custom-config-path yarn test

Install

npm i jest-css-modules-transform