make module file configurable #14

This commit is contained in:
sghzal 2021-12-27 16:41:54 +01:00
parent 32d928a79e
commit ef4951c7be
3 changed files with 46 additions and 3 deletions

View File

@ -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 ### Preprocessors
To use preprocessors (`sass`, `scss`, `stylus`, `less`), just add the desired preprocessor as a `devDependency`: To use preprocessors (`sass`, `scss`, `stylus`, `less`), just add the desired preprocessor as a `devDependency`:

View File

@ -31,6 +31,7 @@ interface PostCSSPluginOptions {
lessOptions?: Less.Options; lessOptions?: Less.Options;
stylusOptions?: StylusRenderOptions; stylusOptions?: StylusRenderOptions;
writeToFile?: boolean; writeToFile?: boolean;
fileIsModule?: (filename: string) => boolean;
} }
interface CSSModule { interface CSSModule {
@ -47,7 +48,8 @@ export const defaultOptions: PostCSSPluginOptions = {
sassOptions: {}, sassOptions: {},
lessOptions: {}, lessOptions: {},
stylusOptions: {}, stylusOptions: {},
writeToFile: true writeToFile: true,
fileIsModule: null
}; };
const postCSSPlugin = ({ const postCSSPlugin = ({
@ -57,7 +59,8 @@ const postCSSPlugin = ({
sassOptions, sassOptions,
lessOptions, lessOptions,
stylusOptions, stylusOptions,
writeToFile writeToFile,
fileIsModule
}: PostCSSPluginOptions = defaultOptions): Plugin => ({ }: PostCSSPluginOptions = defaultOptions): Plugin => ({
name: "postcss2", name: "postcss2",
setup(build) { setup(build) {
@ -101,7 +104,9 @@ const postCSSPlugin = ({
const sourceExt = path.extname(sourceFullPath); const sourceExt = path.extname(sourceFullPath);
const sourceBaseName = path.basename(sourceFullPath, sourceExt); const sourceBaseName = path.basename(sourceFullPath, sourceExt);
const isModule = sourceBaseName.match(/\.module$/); const isModule = fileIsModule
? fileIsModule(sourceFullPath)
: sourceBaseName.match(/\.module$/);
const sourceDir = path.dirname(sourceFullPath); const sourceDir = path.dirname(sourceFullPath);
let tmpFilePath: string; let tmpFilePath: string;

View File

@ -111,6 +111,33 @@ describe("PostCSS esbuild tests", () => {
}) })
.catch(() => process.exit(1)); .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) { function test(entryPoint) {