From e63c79bc9f69c29e9116a1b0c86744723c68ffe7 Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Mon, 29 Apr 2024 14:21:35 +0530 Subject: [PATCH] [nextjs][bug] Transform !important css to an intermediate representantion Webpack/Nextjs was interpreting !important as a loader pipe resulting in an error. --- packages/pigment-css-nextjs-plugin/src/virtual-css-loader.js | 2 +- packages/pigment-css-unplugin/src/index.ts | 2 +- packages/pigment-css-unplugin/tsconfig.json | 1 + 3 files changed, 3 insertions(+), 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 index 7ef1b6d7..a2b5df04 100644 --- 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 index 94eb26dd..fe1d88b6 100644 --- a/packages/pigment-css-unplugin/src/index.ts +++ b/packages/pigment-css-unplugin/src/index.ts @@ -287,7 +287,7 @@ export const plugin = createUnplugin((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 index 324a814c..b11b8a61 100644 --- 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"],