[nextjs][bug] Transform !important css to an intermediate representat…

…ion (#38)
mui · Apr 29, 2024 · bd2be95 · bd2be95
1 parent 0a75015
commit bd2be95
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 2 deletions.
diff --git a/packages/pigment-css-nextjs-plugin/src/virtual-css-loader.js b/packages/pigment-css-nextjs-plugin/src/virtual-css-loader.js
@@ -2,5 +2,5 @@ export const loader = function virtualFileLoader() {
   const callback = this.async();
   const resourceQuery = this.resourceQuery.slice(1);
   const { source } = JSON.parse(decodeURIComponent(resourceQuery));
-  return callback(null, source);
+  return callback(null, source.replaceAll('__IMP__', '!important'));
 };
diff --git a/packages/pigment-css-unplugin/src/index.ts b/packages/pigment-css-unplugin/src/index.ts
@@ -287,7 +287,7 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => {
           const data = `${meta.placeholderCssFile}?${encodeURIComponent(
             JSON.stringify({
               filename: id.split('/').pop(),
-              source: cssText,
+              source: cssText.replaceAll('!important', '__IMP__'),
             }),
           )}`;
           return {

diff --git a/packages/pigment-css-unplugin/tsconfig.json b/packages/pigment-css-unplugin/tsconfig.json
@@ -3,6 +3,7 @@
   "compilerOptions": {
     "resolveJsonModule": true,
     "target": "ES2022",
+    "lib": ["ES2021", "DOM"],
     "paths": {
       "@babel/core": ["./node_modules/@babel/core"],
       "@pigment-css/react": ["./packages/pigment-css-react/src"],