make module file configurable #14
This commit is contained in:
parent
32d928a79e
commit
ef4951c7be
11
README.md
11
README.md
@ -69,6 +69,17 @@ postCssPlugin.default({
|
||||
});
|
||||
```
|
||||
|
||||
As per standard any file having `module` before the extension (ie `somefile.module.css`) will be treated as a module.
|
||||
The option `fileIsModule` allows to override this behavior.
|
||||
|
||||
```js
|
||||
postCssPlugin.default({
|
||||
// pass a custom `fileIsModule` option to tell whether a file should be treated as a module
|
||||
// in this example we want everything to be a module except file finishing with `global.css`
|
||||
fileIsModule: (filepath) => !filepath.endsWith(".global.css")
|
||||
});
|
||||
```
|
||||
|
||||
### Preprocessors
|
||||
|
||||
To use preprocessors (`sass`, `scss`, `stylus`, `less`), just add the desired preprocessor as a `devDependency`:
|
||||
|
||||
11
src/index.ts
11
src/index.ts
@ -31,6 +31,7 @@ interface PostCSSPluginOptions {
|
||||
lessOptions?: Less.Options;
|
||||
stylusOptions?: StylusRenderOptions;
|
||||
writeToFile?: boolean;
|
||||
fileIsModule?: (filename: string) => boolean;
|
||||
}
|
||||
|
||||
interface CSSModule {
|
||||
@ -47,7 +48,8 @@ export const defaultOptions: PostCSSPluginOptions = {
|
||||
sassOptions: {},
|
||||
lessOptions: {},
|
||||
stylusOptions: {},
|
||||
writeToFile: true
|
||||
writeToFile: true,
|
||||
fileIsModule: null
|
||||
};
|
||||
|
||||
const postCSSPlugin = ({
|
||||
@ -57,7 +59,8 @@ const postCSSPlugin = ({
|
||||
sassOptions,
|
||||
lessOptions,
|
||||
stylusOptions,
|
||||
writeToFile
|
||||
writeToFile,
|
||||
fileIsModule
|
||||
}: PostCSSPluginOptions = defaultOptions): Plugin => ({
|
||||
name: "postcss2",
|
||||
setup(build) {
|
||||
@ -101,7 +104,9 @@ const postCSSPlugin = ({
|
||||
|
||||
const sourceExt = path.extname(sourceFullPath);
|
||||
const sourceBaseName = path.basename(sourceFullPath, sourceExt);
|
||||
const isModule = sourceBaseName.match(/\.module$/);
|
||||
const isModule = fileIsModule
|
||||
? fileIsModule(sourceFullPath)
|
||||
: sourceBaseName.match(/\.module$/);
|
||||
const sourceDir = path.dirname(sourceFullPath);
|
||||
|
||||
let tmpFilePath: string;
|
||||
|
||||
@ -111,6 +111,33 @@ describe("PostCSS esbuild tests", () => {
|
||||
})
|
||||
.catch(() => process.exit(1));
|
||||
});
|
||||
|
||||
it("Works with custom module function", (done) => {
|
||||
let testFilename = null;
|
||||
build({
|
||||
entryPoints: ["tests/basic.ts"],
|
||||
bundle: true,
|
||||
outdir: "dist",
|
||||
plugins: [
|
||||
postCSS.default({
|
||||
plugins: [autoprefixer, postCssImport],
|
||||
modules: true,
|
||||
fileIsModule: (filename) => {
|
||||
testFilename = filename;
|
||||
return false;
|
||||
}
|
||||
})
|
||||
]
|
||||
})
|
||||
.then(() => {
|
||||
// ensure the proper filename was passed
|
||||
assert.match(testFilename, /styles\/basic\.css/);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
process.exit(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function test(entryPoint) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user