Skip to content

Commit

Permalink
chore: support custom autoModules
Browse files Browse the repository at this point in the history
  • Loading branch information
2heal1 committed Jun 6, 2022
1 parent 71593d9 commit ed509d8
Show file tree
Hide file tree
Showing 10 changed files with 147 additions and 10 deletions.
44 changes: 42 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -144,10 +144,50 @@ Enable CSS modules or set options for `postcss-modules`.

### autoModules

Type: `boolean`<br>
Type: `boolean` `function` `RegExp`<br>
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

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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": [
Expand Down
25 changes: 22 additions & 3 deletions src/postcss-loader.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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')({
Expand Down
53 changes: 50 additions & 3 deletions test/__snapshots__/index.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
"
`;

Expand Down
3 changes: 3 additions & 0 deletions test/fixtures/custom-auto-modules/a.test.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.foo {
color: red;
}
3 changes: 3 additions & 0 deletions test/fixtures/custom-auto-modules/b.test.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.b {
color: red;
}
3 changes: 3 additions & 0 deletions test/fixtures/custom-auto-modules/c.test.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.c {
color: red;
}
9 changes: 9 additions & 0 deletions test/fixtures/custom-auto-modules/index.js
Original file line number Diff line number Diff line change
@@ -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
)
13 changes: 13 additions & 0 deletions test/index.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
}
])

Expand Down
2 changes: 1 addition & 1 deletion types/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export type PostCSSPluginConf = {
modules?: boolean | Record<string, any>;
extensions?: string[];
plugins?: any[];
autoModules?: boolean;
autoModules?: boolean | RegExp | ((file: string) => boolean);
namedExports?: boolean | ((id: string) => string);
minimize?: boolean | any;
parser?: string | FunctionType;
Expand Down

0 comments on commit ed509d8

Please sign in to comment.