feat: use pluginData.originalPath to help loading the CSS module
This commit is contained in:
parent
9fd7b77547
commit
957b8a0d17
29
src/index.ts
29
src/index.ts
@ -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 {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user