{"id":20149,"library":"jest-css-modules-transform","title":"jest-css-modules-transform","description":"A Jest preprocessor that transforms CSS, SCSS, SASS, Less, and Stylus files into JavaScript objects mimicking Webpack's css-loader module output. Version 4.4.2 is current stable; released occasionally with bug fixes and minor features. Unlike simple identity mock objects (e.g., `{}`), this generates correct class name mappings (as-is, camelCase, dashes), supports PostCSS with custom plugins, and allows prepending variables or mixins. It provides configuration via `jest-css-modules-transform-config.js` for per-preprocessor options, making it ideal for visual regression testing or component testing where real class names matter.","status":"active","version":"4.4.2","language":"javascript","source_language":"en","source_url":"git://github.com/Connormiha/jest-css-modules-transform","tags":["javascript","jest","webpack","css-import","transform","preprocessor","class","classname","css"],"install":[{"cmd":"npm install jest-css-modules-transform","lang":"bash","label":"npm"},{"cmd":"yarn add jest-css-modules-transform","lang":"bash","label":"yarn"},{"cmd":"pnpm add jest-css-modules-transform","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for SCSS/SASS processing if not using node-sass","package":"sass","optional":true},{"reason":"Alternative for SCSS/SASS processing if sass is not available","package":"node-sass","optional":true},{"reason":"Required for Less file processing","package":"less","optional":true},{"reason":"Required for Stylus file processing","package":"stylus","optional":true},{"reason":"Required if using PostCSS plugins","package":"postcss","optional":true}],"imports":[{"note":"This package is a Jest transform, not imported in test files. Configure in Jest's 'transform' option as a string.","wrong":"","symbol":"default","correct":"module.exports = require('jest-css-modules-transform'); // or in Jest config as string"},{"note":"Options are exported from a separate config file, not passed to the transform directly.","wrong":"","symbol":"process","correct":"In jest-css-modules-transform-config.js: module.exports = { ... };"}],"quickstart":{"code":"// jest.config.js\nmodule.exports = {\n  transform: {\n    '^.+\\\\.(css|styl|less|sass|scss)$': 'jest-css-modules-transform',\n  },\n};\n\n// Optionally create jest-css-modules-transform-config.js in project root\n// to customize preprocessor options:\n// jest-css-modules-transform-config.js\nmodule.exports = {\n  cssLoaderConfig: {\n    exportLocalsStyle: 'camelCase',\n  },\n  postcssConfig: {\n    plugins: [require('autoprefixer')],\n  },\n  prepend: ['src/variables.scss'],\n};\n\n// In your test file, import CSS as usual:\nimport styles from './styles.css';\nexpect(styles.myClass).toBeDefined();","lang":"javascript","description":"Shows basic setup for Jest transform configuration and optional config file for custom CSS module output style."},"warnings":[{"fix":"Rename config file or move to root directory.","message":"Options file must be named exactly 'jest-css-modules-transform-config.js' and located in project root (where package.json is).","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure postcss.config.js is in root or use postcssConfig in jest-css-modules-transform-config.js for non-.css files.","message":"PostCSS processing only applies to .css, .pcss, .postcss files; other preprocessors (scss, less) are handled by their respective modules.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade Node to version 10 or higher.","message":"Node.js <10 is not supported; package uses modern JavaScript features.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Install 'sass' as a devDependency or set sassModuleName: 'node-sass' in config.","message":"The 'sass' module is preferred over 'node-sass' for scss processing; if both exist, 'sass' is used unless sassModuleName is set.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Use cssLoaderConfig.exportLocalsStyle to control class name format.","message":"Option 'localIdentName' from webpack is not supported; use exportLocalsStyle instead.","severity":"deprecated","affected_versions":">=4.0.0"}],"env_vars":null,"search_vec":"'4.4.2':30 'allow':65 'as-i':54 'bug':37 'camelcas':57 'class':51,92,103 'classnam':104 'compon':88 'configur':72 'correct':50 'css':3,11,25,99,105 'css-import':98 'css-loader':24 'current':32 'custom':62 'dash':58 'e.g':47 'featur':41 'file':17 'fix':38 'generat':49 'ideal':82 'ident':44 'import':100 'javascript':19,95 'jest':2,7,96 'jest-css-modules-transform':1 'jest-css-modules-transform-config.js':74 'less':14 'loader':26 'make':80 'map':53 'matter':94 'mimick':21 'minor':40 'mixin':69 'mock':45 'modul':4,27 'name':52,93 'object':20,46 'occasion':35 'option':79 'output':28 'per':77 'per-preprocessor':76 'plugin':63 'postcss':60 'prepend':66 'preprocessor':8,78,102 'provid':71 'real':91 'regress':85 'releas':34 'sass':13 'scss':12 'simpl':43 'stabl':33 'stylus':16 'support':59 'test':86,89 'transform':5,10,101 'unlik':42 'variabl':67 'version':29 'via':73 'visual':84 'webpack':22,97","created_at":"2026-04-25T11:21:35.239992+00:00","updated_at":"2026-04-25T11:21:35.239992+00:00","problems":[{"fix":"Run 'npm install sass --save-dev' or 'npm install node-sass --save-dev'.","cause":"Missing dependency for processing scss files.","error":"Cannot find module 'sass' or 'node-sass'"},{"fix":"Ensure 'jest-css-modules-transform-config.js' exports a plain object.","cause":"Options file exports a function instead of an object.","error":"TypeError: Cannot read property 'includes' of undefined"},{"fix":"Add '.+\\.(css|styl|less|sass|scss)$' to transform in Jest config.","cause":"Jest transform mapping missing for CSS extension.","error":"Module parse failed: Unexpected token (1:0) in file styles.css"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/Connormiha/jest-css-modules-transform","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/jest-css-modules-transform","openapi_spec":null,"status_page":null,"smithery":null,"categories":["testing"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-24","install_tag":null}}