Wrap all CSS with a cascade layer

mui · Sep 10, 2024 · 2707b7d · 2707b7d
1 parent 445c9ce
commit 2707b7d
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/packages/pigment-css-unplugin/src/index.ts b/packages/pigment-css-unplugin/src/index.ts
@@ -284,6 +284,15 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => {
         }
 
         let { cssText } = result;
+
+        const slug = slugify(cssText);
+
+        cssText = `
+          @layer _${slug} {
+            ${cssText}
+          } 
+        `;
+
         if (isNext && !outputCss) {
           return {
             code: result.code,
@@ -324,7 +333,7 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => {
         }
 
         const rootPath = process.cwd();
-        const slug = slugify(cssText);
+
         const cssFilename = path
           .normalize(`${id.replace(/\.[jt]sx?$/, '')}-${slug}.pigment.css`)
           .replace(/\\/g, path.posix.sep);