From 805e39c5d7963dd5f52c76ad7eecc97149ffcb83 Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Tue, 10 Sep 2024 16:11:18 +0200
Subject: [PATCH] fix

---
 packages/pigment-css-unplugin/src/index.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/pigment-css-unplugin/src/index.ts b/packages/pigment-css-unplugin/src/index.ts
index 16c6b399..075d5940 100644
--- a/packages/pigment-css-unplugin/src/index.ts
+++ b/packages/pigment-css-unplugin/src/index.ts
@@ -26,7 +26,6 @@ import {
 } from '@pigment-css/react/utils';
 import type { ResolvePluginInstance } from 'webpack';
 import { styledEngineMockup } from '@pigment-css/react/internal';
-
 import { handleUrlReplacement, type AsyncResolver } from './utils';
 
 type NextMeta = {
@@ -287,10 +286,14 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => {
 
         const slug = slugify(cssText);
 
+        // Valid names must start with a underscore or letter.
+        const layerName = `_${slug}`;
+
+        // TODO: Do this in a way that keeps the source map correct
         cssText = `
-          @layer _${slug} {
+          @layer pigment.${layerName} {
             ${cssText}
-          } 
+          }
         `;
 
         if (isNext && !outputCss) {