💄 Improve color labels with strings instead of shades (#7)

* ✅ Add test for `theme.json` color labels

Author: Log1x

src/index.ts

@@ -821,17 +821,32 @@ export function wordpressThemeJson(config: ThemeJsonConfig = {}): VitePlugin {
                           ...extractVariables(patterns.COLOR, themeContent)
                               .filter(([name]) => !name.endsWith('-*'))
                               .map(([name, value]) => {
-                                  const [colorName, shade] = name.split('-');
+                                  const parts = name.split('-');
+                                  const colorName = parts[0];
+                                  const shade =
+                                      parts.length > 1
+                                          ? parts.slice(1).join(' ')
+                                          : undefined;
                                   const capitalizedColor =
                                       colorName.charAt(0).toUpperCase() +
                                       colorName.slice(1);
-                                  const displayName =
-                                      shade && !Number.isNaN(Number(shade))
-                                          ? config.shadeLabels &&
-                                            shade in config.shadeLabels
-                                              ? `${config.shadeLabels[shade]} ${capitalizedColor}`
-                                              : `${capitalizedColor} (${shade})`
-                                          : capitalizedColor;
+                                  const displayName = shade
+                                      ? config.shadeLabels &&
+                                        shade in config.shadeLabels
+                                          ? `${config.shadeLabels[shade]} ${capitalizedColor}`
+                                          : Number.isNaN(Number(shade))
+                                          ? `${capitalizedColor} (${shade
+                                                .split(' ')
+                                                .map(
+                                                    (word) =>
+                                                        word
+                                                            .charAt(0)
+                                                            .toUpperCase() +
+                                                        word.slice(1)
+                                                )
+                                                .join(' ')})`
+                                          : `${capitalizedColor} (${shade})`
+                                      : capitalizedColor;
 
                                   return {
                                       name: displayName,
@@ -844,17 +859,32 @@ export function wordpressThemeJson(config: ThemeJsonConfig = {}): VitePlugin {
                               ? flattenColors(
                                     resolvedTailwindConfig.theme.colors
                                 ).map(([name, value]) => {
-                                    const [colorName, shade] = name.split('-');
+                                    const parts = name.split('-');
+                                    const colorName = parts[0];
+                                    const shade =
+                                        parts.length > 1
+                                            ? parts.slice(1).join(' ')
+                                            : undefined;
                                     const capitalizedColor =
                                         colorName.charAt(0).toUpperCase() +
                                         colorName.slice(1);
-                                    const displayName =
-                                        shade && !Number.isNaN(Number(shade))
-                                            ? config.shadeLabels &&
-                                              shade in config.shadeLabels
-                                                ? `${config.shadeLabels[shade]} ${capitalizedColor}`
-                                                : `${capitalizedColor} (${shade})`
-                                            : capitalizedColor;
+                                    const displayName = shade
+                                        ? config.shadeLabels &&
+                                          shade in config.shadeLabels
+                                            ? `${config.shadeLabels[shade]} ${capitalizedColor}`
+                                            : Number.isNaN(Number(shade))
+                                            ? `${capitalizedColor} (${shade
+                                                  .split(' ')
+                                                  .map(
+                                                      (word) =>
+                                                          word
+                                                              .charAt(0)
+                                                              .toUpperCase() +
+                                                          word.slice(1)
+                                                  )
+                                                  .join(' ')})`
+                                            : `${capitalizedColor} (${shade})`
+                                        : capitalizedColor;
 
                                     return {
                                         name: displayName,

tests/index.test.ts

@@ -580,6 +580,51 @@ describe('wordpressThemeJson', () => {
         });
     });
 
+    it('should handle multi-hyphen color names', () => {
+        const plugin = wordpressThemeJson({
+            tailwindConfig: mockTailwindConfigPath,
+        });
+
+        const cssContent = `
+      @theme {
+        --color-fancy-test-example: #123456;
+        --color-button-hover-state: #234567;
+        --color-social-twitter-blue: #1DA1F2;
+        --color-primary: #000000;
+      }
+    `;
+
+        (plugin.transform as any)(cssContent, 'app.css');
+        const emitFile = vi.fn();
+        (plugin.generateBundle as any).call({ emitFile });
+
+        const themeJson = JSON.parse(emitFile.mock.calls[0][0].source);
+
+        expect(themeJson.settings.color.palette).toContainEqual({
+            name: 'Fancy (Test Example)',
+            slug: 'fancy-test-example',
+            color: '#123456',
+        });
+
+        expect(themeJson.settings.color.palette).toContainEqual({
+            name: 'Button (Hover State)',
+            slug: 'button-hover-state',
+            color: '#234567',
+        });
+
+        expect(themeJson.settings.color.palette).toContainEqual({
+            name: 'Social (Twitter Blue)',
+            slug: 'social-twitter-blue',
+            color: '#1DA1F2',
+        });
+
+        expect(themeJson.settings.color.palette).toContainEqual({
+            name: 'Primary',
+            slug: 'primary',
+            color: '#000000',
+        });
+    });
+
     it('should preserve existing theme.json settings', () => {
         const existingThemeJson = {
             settings: {