fix: use DeclarationExit

ambar · Apr 22, 2024 · 1ddaf2d · 1ddaf2d
1 parent 3345255
commit 1ddaf2d
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 50 deletions.
diff --git a/README.md b/README.md
@@ -34,7 +34,6 @@ a {
   --v1868641404: var(--flag-light, rgba(238, 238, 238, 0.1)) var(--flag-dark, rgba(17, 17, 17, 0.1));
   color: rgba(238, 238, 238, 0.1); /* fallback */
   color: var(--v1868641404); /* expand for color scheme */
-  color: oklch(from #f00 l c h / 0.1);
 }
 
 @supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) {

diff --git a/src/index.ts b/src/index.ts
@@ -44,7 +44,7 @@ const themeColors: PluginCreator<Options> = (options) => {
   let injected: Rule[] = []
   return {
     postcssPlugin: 'postcss-theme-colors',
-    Declaration(decl) {
+    DeclarationExit(decl) {
       const value = decl.value
       if (!reRelativeColor.test(value) && !reMixColor.test(value)) {
         return

diff --git a/test/index-with-shouldInjectFlags.spec.ts b/test/index-with-shouldInjectFlags.spec.ts
@@ -40,7 +40,6 @@ test('use with color group', async () => {
     }
     a {
       --v1868641404: var(--flag-light, rgba(238, 238, 238, 0.1)) var(--flag-dark, rgba(17, 17, 17, 0.1));
-      color: rgba(238, 238, 238, 0.1)  ;
       color: var(--v1868641404);
     }
     @supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) {
@@ -51,7 +50,7 @@ test('use with color group', async () => {
   `)
 })
 
-test('use with color group and ', async () => {
+test('use with color group and :where', async () => {
   const input = dedent`a {
     color: oklch(from var(--G01) l c h / .1);
   }`
@@ -70,7 +69,6 @@ test('use with color group and ', async () => {
     }
     a {
       --v1868641404: var(--flag-light, rgba(238, 238, 238, 0.1)) var(--flag-dark, rgba(17, 17, 17, 0.1));
-      color: rgba(238, 238, 238, 0.1)  ;
       color: var(--v1868641404);
     }
     @supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) {

diff --git a/test/index-with-vars.spec.ts b/test/index-with-vars.spec.ts
@@ -31,36 +31,31 @@ const process = async (css: string, options?: Omit<Options, 'colors'> | null) =>
 
 test('use with relative color syntax', async () => {
   const input = dedent`a {
-    color: oklch(from var(--G01) l c h / .1);
+    color: oklch(from var(--G01) l c h / 1);
     border: 1px solid oklch(from var(--G01) .8 c h);
     box-shadow: 0 0 0 2px var(--G01), 0 0 0 4px oklch(from var(--G01) l c h / .1);
   }`
   const result = await process(input)
   expect(result.css).toMatchInlineSnapshot(`
     "a {
-        --v1868641404: var(--flag-light, rgba(238, 238, 238, 0.1)) var(--flag-dark, rgba(17, 17, 17, 0.1));
-        color: rgba(238, 238, 238, 0.1)  ;
-        color: var(--v1868641404);
-        color: oklch(from #f00   l c h / .1);
-        --v3579442204: var(--flag-light, 1px solid rgb(190, 190, 190)) var(--flag-dark, 1px solid rgb(190, 190, 190));
-        border: var(--v3579442204);
-        --v1397801114: var(--flag-light, 0 0 0 2px #eee, 0 0 0 4px rgba(238, 238, 238, 0.1)) var(--flag-dark, 0 0 0 2px #111, 0 0 0 4px rgba(17, 17, 17, 0.1));
-        box-shadow: var(--v1397801114);
-        box-shadow: 0 0 0 2px #f00  , 0 0 0 4px oklch(from #f00   l c h / .1);
-      }
-
-    @media (color-gamut: rec2020) {
-    a {
-        border: 1px solid oklch(from #f00   .8 c h);
-      }
+      color: rgb(255, 0, 0);
+      --v3440539214: var(--flag-light, rgb(238, 238, 238)) var(--flag-dark, rgb(17, 17, 17));
+      color: var(--v3440539214);
+      border: 1px solid rgb(255, 157, 141);
+      border: 1px solid color(display-p3 1 0.59851 0.52345);
+      --v3579442204: var(--flag-light, 1px solid rgb(190, 190, 190)) var(--flag-dark, 1px solid rgb(190, 190, 190));
+      border: var(--v3579442204);
+      box-shadow: 0 0 0 2px #f00  , 0 0 0 4px rgba(255, 0, 0, 0.1);
+      --v1397801114: var(--flag-light, 0 0 0 2px #eee, 0 0 0 4px rgba(238, 238, 238, 0.1)) var(--flag-dark, 0 0 0 2px #111, 0 0 0 4px rgba(17, 17, 17, 0.1));
+      box-shadow: var(--v1397801114);
     }
 
     @supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) {
     a {
-        color: oklch(from var(--G01) l c h / .1);
-        border: 1px solid oklch(from var(--G01) .8 c h);
-        box-shadow: 0 0 0 2px var(--G01), 0 0 0 4px oklch(from var(--G01) l c h / .1);
-      }
+      color: oklch(from var(--G01) l c h / 1);
+      border: 1px solid oklch(from var(--G01) .8 c h);
+      box-shadow: 0 0 0 2px var(--G01), 0 0 0 4px oklch(from var(--G01) l c h / .1);
+    }
     }"
   `)
 })
@@ -73,10 +68,9 @@ test('use with color-mix()', async () => {
   const result = await process(input)
   expect(result.css).toMatchInlineSnapshot(`
     "a {
+      color: rgba(255, 0, 0, 0.8);
       --v546761730: var(--flag-light, rgba(238, 238, 238, 0.8)) var(--flag-dark, rgba(17, 17, 17, 0.8));
-      color: rgba(238, 238, 238, 0.8)  ;
       color: var(--v546761730);
-      color: color-mix(in srgb, #f00  , transparent 20%);
     }
 
     @supports (color: color-mix(in lch, red, blue)) {
@@ -105,10 +99,9 @@ test('process G03', async () => {
   }`
   expect((await process(input)).css).toMatchInlineSnapshot(`
     "a {
+      color: rgba(255, 0, 0, 0.1);
       --v3856771006: var(--flag-light, rgba(255, 0, 0, 0.1)) var(--flag-dark, rgba(0, 0, 255, 0.1));
-      color: rgba(255, 0, 0, 0.1)  ;
       color: var(--v3856771006);
-      color: oklch(from red l c h / .1);
     }
 
     @supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) {
@@ -132,17 +125,12 @@ test('with gamut', async () => {
   }`
   expect((await process(input)).css).toMatchInlineSnapshot(`
     "a {
+      background: rgb(196, 0, 0);
+      background: color(display-p3 0.72286 0 0);
       --v3397449538: var(--flag-light, rgb(177, 177, 177)) var(--flag-dark, rgb(9, 9, 9));
-      background: rgb(177, 177, 177)  ;
       background: var(--v3397449538);
     }
 
-    @media (color-gamut: rec2020) {
-    a {
-      background: oklch(from #f00   calc(l * .8) c h);
-    }
-    }
-
     @supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) {
     a {
       background: oklch(from var(--G01) calc(l * .8) c h);

diff --git a/test/index.spec.ts b/test/index.spec.ts
@@ -37,21 +37,20 @@ test('use with relative color syntax', async () => {
   const result = await process(input)
   expect(result.css).toMatchInlineSnapshot(`
     "a {
-        --v1868641404: var(--flag-light, rgba(238, 238, 238, 0.1)) var(--flag-dark, rgba(17, 17, 17, 0.1));
-        color: rgba(238, 238, 238, 0.1)  ;
-        color: var(--v1868641404);
-        --v3579442204: var(--flag-light, 1px solid rgb(190, 190, 190)) var(--flag-dark, 1px solid rgb(190, 190, 190));
-        border: var(--v3579442204);
-        --v1397801114: var(--flag-light, 0 0 0 2px #eee, 0 0 0 4px rgba(238, 238, 238, 0.1)) var(--flag-dark, 0 0 0 2px #111, 0 0 0 4px rgba(17, 17, 17, 0.1));
-        box-shadow: var(--v1397801114);
-      }
+      --v1868641404: var(--flag-light, rgba(238, 238, 238, 0.1)) var(--flag-dark, rgba(17, 17, 17, 0.1));
+      color: var(--v1868641404);
+      --v3579442204: var(--flag-light, 1px solid rgb(190, 190, 190)) var(--flag-dark, 1px solid rgb(190, 190, 190));
+      border: var(--v3579442204);
+      --v1397801114: var(--flag-light, 0 0 0 2px #eee, 0 0 0 4px rgba(238, 238, 238, 0.1)) var(--flag-dark, 0 0 0 2px #111, 0 0 0 4px rgba(17, 17, 17, 0.1));
+      box-shadow: var(--v1397801114);
+    }
 
     @supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) {
     a {
-        color: oklch(from var(--G01) l c h / .1);
-        border: 1px solid oklch(from var(--G01) .8 c h);
-        box-shadow: 0 0 0 2px var(--G01), 0 0 0 4px oklch(from var(--G01) l c h / .1);
-      }
+      color: oklch(from var(--G01) l c h / .1);
+      border: 1px solid oklch(from var(--G01) .8 c h);
+      box-shadow: 0 0 0 2px var(--G01), 0 0 0 4px oklch(from var(--G01) l c h / .1);
+    }
     }"
   `)
 })
@@ -66,7 +65,6 @@ test('use with color-mix()', async () => {
   expect(result.css).toMatchInlineSnapshot(`
     "a {
       --v546761730: var(--flag-light, rgba(238, 238, 238, 0.8)) var(--flag-dark, rgba(17, 17, 17, 0.8));
-      color: rgba(238, 238, 238, 0.8)  ;
       color: var(--v546761730);
     }
 
@@ -147,7 +145,6 @@ test('flags option', async () => {
   expect(result.css).toMatchInlineSnapshot(`
     "a {
       --v3204038125: var(--isLight, rgba(255, 0, 0, 0.1)) var(--isDark, rgba(0, 0, 255, 0.1));
-      color: rgba(255, 0, 0, 0.1) rgba(0, 0, 255, 0.1);
       color: var(--v3204038125);
     }