Support for referencing nested theme keys

adamwathan · adamwathan · commit 3bccabbfbc56 · 2020-08-22T21:34:46.000-04:00
diff --git a/__tests__/fixtures/purge-example-dynamic.html b/__tests__/fixtures/purge-example-dynamic.html
@@ -5,7 +5,7 @@
   </head>
   <body id="tailwind">
     <main>
-      <div class="bg-{colors} {screens}:flex bg-red-500 md:bg-blue-300 w-1/2"></div>
+      <div class="bg-red-{colors.red} {screens}:flex bg-red-500 md:bg-blue-300 w-1/2"></div>
     </main>
   </body>
 </html>
diff --git a/__tests__/purgeUnusedStyles.test.js b/__tests__/purgeUnusedStyles.test.js
@@ -367,24 +367,6 @@ test('dynamic classes can be used safely using class hints', () => {
       expect(result.css).toContain('.bg-red-700')
       expect(result.css).toContain('.bg-red-800')
       expect(result.css).toContain('.bg-red-900')
-      expect(result.css).toContain('.bg-blue-100')
-      expect(result.css).toContain('.bg-blue-200')
-      expect(result.css).toContain('.bg-blue-300')
-      expect(result.css).toContain('.bg-blue-400')
-      expect(result.css).toContain('.bg-blue-500')
-      expect(result.css).toContain('.bg-blue-600')
-      expect(result.css).toContain('.bg-blue-700')
-      expect(result.css).toContain('.bg-blue-800')
-      expect(result.css).toContain('.bg-blue-900')
-      expect(result.css).toContain('.bg-yellow-100')
-      expect(result.css).toContain('.bg-yellow-200')
-      expect(result.css).toContain('.bg-yellow-300')
-      expect(result.css).toContain('.bg-yellow-400')
-      expect(result.css).toContain('.bg-yellow-500')
-      expect(result.css).toContain('.bg-yellow-600')
-      expect(result.css).toContain('.bg-yellow-700')
-      expect(result.css).toContain('.bg-yellow-800')
-      expect(result.css).toContain('.bg-yellow-900')
 
       expect(result.css).toContain('.flex')
       expect(result.css).toContain('.sm\\:flex')
diff --git a/src/lib/purgeUnusedStyles.js b/src/lib/purgeUnusedStyles.js
@@ -2,7 +2,6 @@ import _ from 'lodash'
 import postcss from 'postcss'
 import purgecss from '@fullhuman/postcss-purgecss'
 import log from '../util/log'
-import flattenColorPalette from '../util/flattenColorPalette'
 
 function removeTailwindMarkers(css) {
   css.walkAtRules('tailwind', rule => rule.remove())
@@ -99,7 +98,9 @@ export default function purgeUnusedUtilities(config, configChanged) {
             })
           }
 
-          const dynamicMatches = flattenThemeKeys(config.theme[themeKey])
+          const dynamicMatches = flattenThemeKeys(
+            _.get(config, ['theme', ...themeKey.split('.')], [])
+          )
             .map(key => {
               return className.replace(`{${themeKey}}`, key)
             })
