diff --git a/README.md b/README.md index 1e873da..8021008 100644 --- a/README.md +++ b/README.md @@ -108,6 +108,19 @@ module.exports = { This will load all files with `.mod.css` as CSS modules and load all other files as regular CSS. Notice that the function will only be called for whichever regex you provided in the `transform` option of the Jest config. +Also supports `generateScopedName` property to customize the generated class names. Helpful when using Jest Snapshots and not wanting unnecessary noise from hash generated classnames. + +```js +// jesttransformcss.config.js + +module.exports = { + modules: true, + generateScopedName: "[path]_[name]_[local]" + // Default value is: '[path][local]-[hash:base64:10]' +}; +``` +Link to all available [placeholder tokens](https://github.com/webpack/loader-utils#interpolatename) \*Note not all placeholders are working and must be tested. + ## Further setup There are many ways to set up styles in a project (CSS modules, global styles, external global styles, local global styles, CSS in JS, LESS, SASS just to name a few). How to continue from here depends on your project. diff --git a/index.js b/index.js index 9599b3f..327fa8c 100644 --- a/index.js +++ b/index.js @@ -65,8 +65,8 @@ module.exports = { require("${postcssRunner}")( ${JSON.stringify({ src, - filename - // config, + filename, + transformConfig: transformConfig.config // options })} ) diff --git a/postcss-runner.js b/postcss-runner.js index 621924a..85e4b20 100644 --- a/postcss-runner.js +++ b/postcss-runner.js @@ -4,7 +4,7 @@ const cssModules = require("postcss-modules"); // This script is essentially a PostCSS Runner // https://github.com/postcss/postcss/blob/master/docs/guidelines/runner.md#postcss-runner-guidelines -module.exports = ({ src, filename }) => { +module.exports = ({ src, filename, transformConfig }) => { const ctx = { // Not sure whether the map is useful or not. // Disabled for now. We can always enable it once it becomes clear. @@ -34,11 +34,12 @@ module.exports = ({ src, filename }) => { .then(({ plugins, options }) => { return postcss([ cssModules({ - // Should we read generateScopedName from options? - // Does anybody care about the actual names? This is test-only anyways? - // Should be easy to add in case anybody needs it, just pass it through - // from jest.config.js (we have "config" & "options" in css.js) - generateScopedName: "[path][local]-[hash:base64:10]", + // Add 'generateScopedName' property to 'jesttransformcss.config.js' for custom name generation. + // List of available placeholder tokens: https://github.com/webpack/loader-utils#interpolatename + // *Note some placeholder tokens appear to not be working + generateScopedName: + transformConfig && transformConfig.generateScopedName || + "[path][local]-[hash:base64:10]", getJSON: (cssFileName, exportedTokens, outputFileName) => { tokens = exportedTokens; }