diff --git a/src/index.ts b/src/index.ts index e6908a0..d63c5cf 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1,7 @@ import { Plugin } from "esbuild"; import { Plugin as PostCSSPlugin } from "postcss"; import { ensureDir, readFile, writeFile } from "fs-extra"; +import { TextDecoder } from "util"; import { SassException, Result as SassResult, @@ -12,7 +13,6 @@ import postcss from "postcss"; import postcssModules from "postcss-modules"; import less from "less"; import stylus from "stylus"; -import { TextDecoder } from "util"; interface PostCSSPluginOptions { plugins: PostCSSPlugin[]; @@ -27,6 +27,11 @@ interface CSSModule { }; } +interface ModulePath { + originalPath: string; + temporaryPath: string; +} + const postCSSPlugin = ({ plugins = [], modules = true, @@ -36,7 +41,33 @@ const postCSSPlugin = ({ setup(build) { // get a temporary path where we can save compiled CSS const tmpDirPath = tmp.dirSync().name, - modulesMap: CSSModule[] = []; + modulesMap: CSSModule[] = [], + pathMap: ModulePath[] = []; + + // parse css modules with postcss-modules + if (modules !== false) { + plugins.unshift( + postcssModules({ + ...(typeof modules !== "boolean" ? modules : {}), + getJSON(filepath, json, outpath) { + const tmpFilePath = pathMap.find( + ({ originalPath }) => originalPath === filepath + ).temporaryPath; + + modulesMap.push({ + path: tmpFilePath, + map: json + }); + + if ( + typeof modules !== "boolean" && + typeof modules.getJSON === "function" + ) + return modules.getJSON(filepath, json, outpath); + } + }) + ); + } build.onResolve( { filter: /.\.(css|sass|scss|less|styl)$/, namespace: "file" }, @@ -57,30 +88,15 @@ const postCSSPlugin = ({ await ensureDir(tmpDir); + // add to path map so that postcss-modules can parse it after resolved + pathMap.push({ + originalPath: sourceFullPath, + temporaryPath: tmpFilePath + }); + const fileContent = await readFile(sourceFullPath); let css = sourceExt === ".css" ? fileContent : ""; - // parse css modules with postcss-modules - if (modules !== false && isModule) { - plugins.unshift( - postcssModules({ - ...(typeof modules !== "boolean" ? modules : {}), - getJSON(filepath, json, outpath) { - modulesMap.push({ - path: tmpFilePath, - map: json - }); - - if ( - typeof modules !== "boolean" && - typeof modules.getJSON === "function" - ) - return modules.getJSON(filepath, json, outpath); - } - }) - ); - } - // parse files with preprocessors if (sourceExt === ".sass" || sourceExt === ".scss") css = (await renderSass({ file: sourceFullPath })).css.toString(); @@ -119,8 +135,6 @@ const postCSSPlugin = ({ const mod = modulesMap.find(({ path }) => path === args.path), resolveDir = path.dirname(args.path); - console.log(mod); - return { resolveDir, contents: `import "${args.path.replace( diff --git a/test/styles/example.module.css b/test/styles/example.module.css index f900a7b..c513142 100644 --- a/test/styles/example.module.css +++ b/test/styles/example.module.css @@ -1,3 +1,11 @@ .TestModule { align-items: center; } + +.TestModuleAnother { + justify-content: space-between; +} + +.TextModuleLast { + width: 100vw; +} diff --git a/test/styles/example.module.less b/test/styles/example.module.less new file mode 100644 index 0000000..dfdf0f1 --- /dev/null +++ b/test/styles/example.module.less @@ -0,0 +1,5 @@ +@text: left; + +.TestLessModule { + text-align: @text; +} diff --git a/test/tests/modules.ts b/test/tests/modules.ts index dd80d14..5d8d37b 100644 --- a/test/tests/modules.ts +++ b/test/tests/modules.ts @@ -1,4 +1,5 @@ import styles from "../styles/example.module.sass"; import styles2 from "../styles/example.module.css"; +import styles3 from "../styles/example.module.less"; -console.log(styles, styles2); +console.log(styles, styles2, styles3);