diff --git a/README.md b/README.md index 26fe589f..ae3807e0 100644 --- a/README.md +++ b/README.md @@ -144,10 +144,50 @@ Enable CSS modules or set options for `postcss-modules`. ### autoModules -Type: `boolean`
+Type: `boolean` `function` `RegExp`
Default: `true` -Automatically enable CSS modules for `.module.css` `.module.sss` `.module.scss` `.module.sass` `.module.styl` `.module.stylus` `.module.less` files. +Allows auto enable CSS modules based on filename. + +Possible values: + +* `true` - enable CSS modules for `.module.css` `.module.sss` `.module.scss` `.module.sass` `.module.styl` `.module.stylus` `.module.less` files. +* `false` - disables CSS Modules. +* `RegExp` - enable CSS modules for all files matching /RegExp/i.test(filename) regexp. +* `function` - enable CSS Modules for files based on the filename satisfying your filter function check. + +#### `boolean` + +Possible values: + +* `true` - enable CSS modules for `.module.css` `.module.sss` `.module.scss` `.module.sass` `.module.styl` `.module.stylus` `.module.less` files. +* `false` - disables CSS Modules. + +```js +postcss({ + autoModules: true, +}) +``` + +#### `RegExp` + +Enable CSS modules for all files matching /RegExp/i.test(filename) regexp. + +```js +postcss({ + autoModules: /\.custom-module\.\w+$/i, +}) +``` + +#### `function` + +Enable CSS modules for files based on the filename satisfying your filter function check. + +```js +postcss({ + autoModules: (file) => file.endsWith(".custom-module.css"), +}) +``` ### namedExports diff --git a/package.json b/package.json index 5cb52270..d0b6285b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rollup-plugin-postcss", - "version": "3.0.0", + "version": "3.0.1", "description": "Seamless integration between Rollup and PostCSS", "main": "dist/index.js", "files": [ diff --git a/src/postcss-loader.js b/src/postcss-loader.js index bbac026c..2492fca8 100644 --- a/src/postcss-loader.js +++ b/src/postcss-loader.js @@ -52,6 +52,26 @@ function isModuleFile(file) { return /\.module\.[a-z]{2,6}$/.test(file) } +function isAutoModule(autoModules, file) { + if (autoModules === false) { + return false + } + + if (autoModules === true || autoModules === undefined) { + return isModuleFile(file) + } + + if (typeof autoModules === 'function') { + return autoModules(file) + } + + if (autoModules instanceof RegExp) { + return autoModules.test(file) + } + + return false +} + /* eslint import/no-anonymous-default-export: [2, {"allowObject": true}] */ export default { name: 'postcss', @@ -72,9 +92,8 @@ export default { const shouldInject = options.inject const modulesExported = {} - const autoModules = options.autoModules !== false && options.onlyModules !== true - const isAutoModule = autoModules && isModuleFile(this.id) - const supportModules = autoModules ? isAutoModule : options.modules + const onlyModules = options.onlyModules !== true + const supportModules = onlyModules ? isAutoModule(options.autoModules, this.id) : options.modules if (supportModules) { plugins.unshift( require('postcss-modules')({ diff --git a/test/__snapshots__/index.test.js.snap b/test/__snapshots__/index.test.js.snap index 8d90d994..87d2a932 100644 --- a/test/__snapshots__/index.test.js.snap +++ b/test/__snapshots__/index.test.js.snap @@ -712,6 +712,54 @@ console.log( " `; +exports[`modules custom-auto-modules: js code 1`] = ` +"'use strict'; + +function styleInject(css, ref) { + if ( ref === void 0 ) ref = {}; + var insertAt = ref.insertAt; + + if (!css || typeof document === 'undefined') { return; } + + var head = document.head || document.getElementsByTagName('head')[0]; + var style = document.createElement('style'); + style.type = 'text/css'; + + if (insertAt === 'top') { + if (head.firstChild) { + head.insertBefore(style, head.firstChild); + } else { + head.appendChild(style); + } + } else { + head.appendChild(style); + } + + if (style.styleSheet) { + style.styleSheet.cssText = css; + } else { + style.appendChild(document.createTextNode(css)); + } +} + +var css_248z$2 = \\".a-test_foo {\\\\n color: red;\\\\n}\\\\n\\"; +var a = {\\"foo\\":\\"a-test_foo\\"}; +styleInject(css_248z$2); + +var css_248z$1 = \\".b {\\\\n color: red; }\\\\n\\"; +styleInject(css_248z$1); + +var css_248z = \\".c {\\\\n color: red;\\\\n}\\\\n\\"; +styleInject(css_248z); + +console.log( + a, + css_248z$1, + css_248z +); +" +`; + exports[`modules extract: css code 1`] = ` ".style_foo { color: red; @@ -796,11 +844,10 @@ function styleInject(css, ref) { } } -var css_248z = \\".style_foo {\\\\n color: red;\\\\n}\\\\n\\"; -var style = {\\"foo\\":\\"style_foo\\"}; +var css_248z = \\".foo {\\\\n color: red;\\\\n}\\\\n\\"; styleInject(css_248z); -console.log(style.foo); +console.log(css_248z.foo); " `; diff --git a/test/fixtures/custom-auto-modules/a.test.css b/test/fixtures/custom-auto-modules/a.test.css new file mode 100644 index 00000000..a15c877a --- /dev/null +++ b/test/fixtures/custom-auto-modules/a.test.css @@ -0,0 +1,3 @@ +.foo { + color: red; +} diff --git a/test/fixtures/custom-auto-modules/b.test.scss b/test/fixtures/custom-auto-modules/b.test.scss new file mode 100644 index 00000000..b28d1ab0 --- /dev/null +++ b/test/fixtures/custom-auto-modules/b.test.scss @@ -0,0 +1,3 @@ +.b { + color: red; +} diff --git a/test/fixtures/custom-auto-modules/c.test.less b/test/fixtures/custom-auto-modules/c.test.less new file mode 100644 index 00000000..7dacc6a4 --- /dev/null +++ b/test/fixtures/custom-auto-modules/c.test.less @@ -0,0 +1,3 @@ +.c { + color: red; +} diff --git a/test/fixtures/custom-auto-modules/index.js b/test/fixtures/custom-auto-modules/index.js new file mode 100644 index 00000000..fdcce2dc --- /dev/null +++ b/test/fixtures/custom-auto-modules/index.js @@ -0,0 +1,9 @@ +import a from './a.test.css' +import b from './b.test.scss' +import c from './c.test.less' + +console.log( + a, + b, + c +) diff --git a/test/index.test.js b/test/index.test.js index 0ee03c9a..9af7f5fc 100644 --- a/test/index.test.js +++ b/test/index.test.js @@ -259,6 +259,19 @@ snapshotMany('modules', [ { title: 'auto-modules', input: 'auto-modules/index.js' + }, + { + title: 'custom-auto-modules', + input: 'custom-auto-modules/index.js', + options: { + autoModules: filename => { + if (/\.test\.[cs|le]s+/.test(filename)) { + return true + } + + return false + } + } } ]) diff --git a/types/index.d.ts b/types/index.d.ts index 88f41c34..42b37aaf 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -20,7 +20,7 @@ export type PostCSSPluginConf = { modules?: boolean | Record; extensions?: string[]; plugins?: any[]; - autoModules?: boolean; + autoModules?: boolean | RegExp | ((file: string) => boolean); namedExports?: boolean | ((id: string) => string); minimize?: boolean | any; parser?: string | FunctionType;