feat: use pluginData.originalPath to help loading the CSS module

This commit is contained in:
Marton Lederer 2021-02-20 16:13:14 +01:00
parent 9fd7b77547
commit 957b8a0d17
No known key found for this signature in database
GPG Key ID: 9B7FD44832ADFE95

View File

@ -27,11 +27,6 @@ interface CSSModule {
}; };
} }
interface ModulePath {
originalPath: string;
temporaryPath: string;
}
const postCSSPlugin = ({ const postCSSPlugin = ({
plugins = [], plugins = [],
modules = true, modules = true,
@ -41,19 +36,14 @@ const postCSSPlugin = ({
setup(build) { setup(build) {
// get a temporary path where we can save compiled CSS // get a temporary path where we can save compiled CSS
const tmpDirPath = tmp.dirSync().name, const tmpDirPath = tmp.dirSync().name,
modulesMap: CSSModule[] = [], modulesMap: CSSModule[] = [];
pathMap: ModulePath[] = [];
const modulesPlugin = postcssModules({ const modulesPlugin = postcssModules({
generateScopedName: "[name]__[local]___[hash:base64:5]", generateScopedName: "[name]__[local]___[hash:base64:5]",
...(typeof modules !== "boolean" ? modules : {}), ...(typeof modules !== "boolean" ? modules : {}),
getJSON(filepath, json, outpath) { getJSON(filepath, json, outpath) {
const tmpFilePath = pathMap.find(
({ originalPath }) => originalPath === filepath
).temporaryPath;
modulesMap.push({ modulesMap.push({
path: tmpFilePath, path: filepath,
map: json map: json
}); });
@ -84,12 +74,6 @@ const postCSSPlugin = ({
await ensureDir(tmpDir); 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); const fileContent = await readFile(sourceFullPath);
let css = sourceExt === ".css" ? fileContent : ""; let css = sourceExt === ".css" ? fileContent : "";
@ -121,7 +105,10 @@ const postCSSPlugin = ({
return { return {
namespace: isModule ? "postcss-module" : "file", namespace: isModule ? "postcss-module" : "file",
path: tmpFilePath path: tmpFilePath,
pluginData: {
originalPath: sourceFullPath
}
}; };
} }
); );
@ -130,7 +117,9 @@ const postCSSPlugin = ({
build.onLoad( build.onLoad(
{ filter: /.*/, namespace: "postcss-module" }, { filter: /.*/, namespace: "postcss-module" },
async (args) => { async (args) => {
const mod = modulesMap.find(({ path }) => path === args.path), const mod = modulesMap.find(
({ path }) => path === args?.pluginData?.originalPath
),
resolveDir = path.dirname(args.path); resolveDir = path.dirname(args.path);
return { return {