Repository: tailwindlabs/tailwindcss
Pull request #2148 (2020-08-07 22:43:32)

Allow for deeply nested color objects
This PR enables the usage of deeply nested color objects, by making the `flattenColorPalette` function recursive.

Currently, the `flattenColorPalette` function can flatten a palette with a total of one nested object. Which means that if we want the following output:

```css
.text-success { color: #285B45 }
.text-button-primary { color: #FFFFFF }
.text-button-primary-hover { color: #FFFFFF }
.text-button-primary-press { color: #FFFFFF }
.text-button-primary-muted { color: #FFFFFF }
```

We need to use the following color object:

```js
{
  success: '#285B45',
  'button-primary': {
    DEFAULT: '#FFFFFF',
    hover: '#FFFFFF',
    press: '#FFFFFF',
    muted: '#FFFFFF',
  },
}
```

Instead of the more intuitive and practical following one:

```js
{
  success: '#285B45',
  button: {
    primary: {
      DEFAULT: '#FFFFFF',
      hover: '#FFFFFF',
      press: '#FFFFFF',
      muted: '#FFFFFF',
    },
  },
}
```

Currently, that last color object would generate the following invalid CSS:

```css
.text-success {
  color: #285B45
}

.text-button-primary color {
  DEFAULT: #FFFFFF;
  hover: #FFFFFF;
  press: #FFFFFF;
  muted: #FFFFFF
}
```

With this pull request, it would generate the expected CSS.

---

~~**Note**: this is actually out of scope, but this is the second time I try to contribute to Tailwind and I'm on a Windows machine. On Windows, line endings are a mess, so I added the `endOfLine: auto` rule to `eslint`, and I also created a `.prettierrc` file with the same rules (that would override any default IDE configuration).~~

~~Normally, that wouldn't change anything for you. If you don't actually want that, I can remove them from the PR, or create a separated one.~~

adamwathan: Hey, think I'm good to merge this but don't really want to maintain two copies of our Prettier rules. Can we remove all that stuff from this PR and resolve any conflicts? Thanks!
innocenzi: It's done, @adamwathan. 👍 

Patch:
diff --git a/src/util/flattenColorPalette.js b/src/util/flattenColorPalette.js
index f40d09ec..1a94e180 100644
--- a/src/util/flattenColorPalette.js
+++ b/src/util/flattenColorPalette.js
@@ -7,7 +7,7 @@ export default function flattenColorPalette(colors) {
         return [[name, color]]
       }
 
-      return _.map(color, (value, key) => {
+      return _.map(flattenColorPalette(color), (value, key) => {
         const suffix = key === 'DEFAULT' ? '' : `-${key}`
         return [`${name}${suffix}`, value]
       })


Test patch:
diff --git a/__tests__/flattenColorPalette.test.js b/__tests__/flattenColorPalette.test.js
index 456488a6..384c2f67 100644
--- a/__tests__/flattenColorPalette.test.js
+++ b/__tests__/flattenColorPalette.test.js
@@ -43,3 +43,35 @@ test('it flattens nested color objects', () => {
     'blue-3': 'rgb(0,0,100)',
   })
 })
+
+test('it flattens deeply nested color objects', () => {
+  expect(
+    flattenColorPalette({
+      primary: 'purple',
+      secondary: {
+        DEFAULT: 'blue',
+        hover: 'cyan',
+        focus: 'red',
+      },
+      button: {
+        primary: {
+          DEFAULT: 'magenta',
+          hover: 'green',
+          focus: {
+            DEFAULT: 'yellow',
+            variant: 'orange',
+          },
+        },
+      },
+    })
+  ).toEqual({
+    primary: 'purple',
+    secondary: 'blue',
+    'secondary-hover': 'cyan',
+    'secondary-focus': 'red',
+    'button-primary': 'magenta',
+    'button-primary-hover': 'green',
+    'button-primary-focus': 'yellow',
+    'button-primary-focus-variant': 'orange',
+  })
+})