🩹 fix(patch): tailwindcss theme mutations (#1740)

Prevents mutations to tailwind theme when using theme.json generators

- adds unit tests for transformers
- adds integration tests confirming `.text-${key}` css is generated for transformed values
- adds integration tests confirming that `extendOnly` filter limits generated values

refers:

- none

## Type of change

**PATCH: backwards compatible change**



This PR includes breaking changes to the following core packages:

- none

This PR includes breaking changes to the follow extensions:

- none

## Dependencies

### Adds

- none

### Removes

- none

examples/sage/bud.config.mjs

@@ -8,7 +8,8 @@ export default async app => {
     .watch(['resources/views/*.blade.php'])
     .serve(3000)
     .proxy('http://example.test')
-    .wpjson.useTailwindColors()
+    .wpjson.useTailwindColors(true)
     .useTailwindFontFamily()
+    .useTailwindFontSize()
     .enable()
 }

examples/sage/resources/scripts/components/main.js

@@ -8,4 +8,7 @@ export const main = () => {
    */
   document.body.classList.contains('no-js') &&
     document.body.classList.remove('no-js')
+
+  document.body.classList.add(`text-xl`)
+  document.body.classList.add(`text-custom`)
 }

examples/sage/resources/styles/common/global.css

@@ -1,9 +1,9 @@
 body {
-  @apply font-sans;
+  @apply font-sans text-custom;
 }
 
 #root {
-  @apply text-3xl font-medium text-indigo-500;
+  @apply font-medium text-indigo-500 text-xl;
 
   background: url('~@images/image.jpeg');
 }

examples/sage/tailwind.config.js

@@ -1,13 +1,20 @@
 module.exports = {
-  content: ['resources/**/*.{js,html}'],
+  content: ['resources/**/*.{js,css,html}'],
   theme: {
     extend: {
-      colors: ({theme}) => ({
+      colors: {
         gray: '#f7fafc',
-      }),
+        brand: {
+          gray: '#f7fafc',
+        },
+      },
       fontFamily: {
         sans: ['Inter', 'sans-serif'],
       },
+      fontSize: {
+        xl: '1.25rem',
+        custom: '.625rem',
+      },
     },
   },
   plugins: [],

sources/@roots/sage/src/wp-theme-json/extension.ts

@@ -48,6 +48,7 @@ export interface Mutator {
  * @decorator `@options`
  * @decorator `@when`
  * @decorator `@plugin`
+ * @decorator `@expose`
  */
 @label(`@roots/sage/wp-theme-json`)
 @dependsOnOptional([`@roots/bud-tailwindcss`])
@@ -137,7 +138,15 @@ export default class ThemeJson extends Extension<
       typography: {
         ...(this.options.settings?.typography ?? {}),
         fontFamilies: tailwindAdapter.fontFamily.transform(
-          this.app.tailwind.resolveThemeValue(`fontFamily`, extendOnly),
+          Object.assign(
+            {},
+            {
+              ...this.app.tailwind.resolveThemeValue(
+                `fontFamily`,
+                extendOnly,
+              ),
+            },
+          ),
         ),
       },
     })
@@ -152,7 +161,15 @@ export default class ThemeJson extends Extension<
       typography: {
         ...(this.options.settings?.typography ?? {}),
         fontSizes: tailwindAdapter.fontSize.transform(
-          this.app.tailwind.resolveThemeValue(`fontSize`, extendOnly),
+          Object.assign(
+            {},
+            {
+              ...this.app.tailwind.resolveThemeValue(
+                `fontSize`,
+                extendOnly,
+              ),
+            },
+          ),
         ),
       },
     })

sources/@roots/sage/src/wp-theme-json/plugin.ts

@@ -11,12 +11,17 @@ import type {Compiler, WebpackPluginInstance} from 'webpack'
  */
 export interface Options {
   /**
-   * JSON contents
+   * WordPress `settings`
    *
    * @public
    */
   settings?: Partial<ThemeJSON.GlobalSettingsAndStyles['settings']>
 
+  /**
+   * WordPress `customTemplates`
+   *
+   * @public
+   */
   customTemplates?: ThemeJSON.GlobalSettingsAndStyles['customTemplates']
 
   /**

sources/@roots/sage/src/wp-theme-json/tailwind/fontFamily.test.ts

@@ -0,0 +1,29 @@
+import {describe, expect, it} from '@jest/globals'
+
+import {fontFamily} from './index'
+
+const mockFontFamily: fontFamily.TailwindFontFamily = {
+  sans: [`mOCK-SANS`, `SANS-MOCK`],
+  serif: `mock-serif`,
+}
+
+describe(`themeJson tailwind adapter`, () => {
+  it(`transforms fontFamily`, () => {
+    const mockfontFamilyRef = {...mockFontFamily}
+
+    expect(fontFamily.transform(mockFontFamily)).toStrictEqual([
+      {
+        name: `MOCK-SANS`,
+        slug: `sans`,
+        fontFamily: `mOCK-SANS,SANS-MOCK`,
+      },
+      {
+        name: `Mock-serif`,
+        slug: `serif`,
+        fontFamily: `mock-serif`,
+      },
+    ])
+
+    expect(mockFontFamily).toStrictEqual(mockfontFamilyRef)
+  })
+})

sources/@roots/sage/src/wp-theme-json/tailwind/fontFamily.ts

@@ -1,7 +1,7 @@
 import type {GlobalSettingsAndStyles as WPThemeJson} from '@roots/bud-preset-wordpress/theme'
 
-export interface TailwindFonts {
-  [key: string]: Array<string>
+export interface TailwindFontFamily {
+  [key: string]: Array<string> | string
 }
 export type WordPressFonts =
   WPThemeJson['settings']['typography']['fontFamilies']
@@ -30,10 +30,11 @@ const name: name = label =>
 export interface transformEntry {
   ([slug, value]: [string, string]): WordPressFonts[any]
 }
-export const transformEntry: transformEntry = ([slug, fontFamily]: [
-  string,
-  string,
-]) => ({name: fontFamily.split(`,`).shift(), slug, fontFamily})
+export const transformEntry: transformEntry = ([slug, fontFamily]) => ({
+  name: name(fontFamily.split(`,`).shift()),
+  slug,
+  fontFamily,
+})
 
 /**
  * Transform tailwindcss fonts to wordpress theme.json fonts
@@ -43,9 +44,9 @@ export const transformEntry: transformEntry = ([slug, fontFamily]: [
  * @public
  */
 export interface transform {
-  (fonts: TailwindFonts): WordPressFonts
+  (fonts: TailwindFontFamily): WordPressFonts
 }
-export const transform: transform = (fonts: TailwindFonts) =>
-  Object.entries(fonts ?? {})
+export const transform: transform = fonts =>
+  Object.entries(fonts)
     .map(([k, v]) => [k, Array.isArray(v) ? v.join(`,`) : v])
     .map(transformEntry)

sources/@roots/sage/src/wp-theme-json/tailwind/fontSize.test.ts

@@ -0,0 +1,29 @@
+import {describe, expect, it} from '@jest/globals'
+
+import {fontSize} from './index'
+
+const mockFontSize: fontSize.TailwindSize = {
+  lg: `1.25rem`,
+  xl: [`1.5rem`, `2rem`],
+}
+
+describe(`themeJson tailwind adapter`, () => {
+  it(`transforms fontSize`, () => {
+    const mockfontSizeRef = {...mockFontSize}
+
+    expect(fontSize.transform(mockFontSize)).toStrictEqual([
+      {
+        name: `lg`,
+        slug: `lg`,
+        size: `1.25rem`,
+      },
+      {
+        name: `xl`,
+        slug: `xl`,
+        size: `1.5rem`,
+      },
+    ])
+
+    expect(mockFontSize).toStrictEqual(mockfontSizeRef)
+  })
+})

sources/@roots/sage/src/wp-theme-json/tailwind/fontSize.ts

@@ -26,10 +26,11 @@ export type WordPressSizes =
 export interface transformEntry {
   ([slug, value]: [string, string]): WordPressSizes[any]
 }
-export const transformEntry: transformEntry = ([slug, fontSize]: [
-  string,
-  string,
-]) => ({name: slug, slug, size: fontSize})
+export const transformEntry: transformEntry = ([slug, fontSize]) => ({
+  name: slug,
+  slug,
+  size: fontSize,
+})
 
 /**
  * Transform tailwindcss fonts to wordpress theme.json fonts
@@ -41,10 +42,7 @@ export const transformEntry: transformEntry = ([slug, fontSize]: [
 export interface transform {
   (fonts: TailwindSize): WordPressSizes
 }
-
-export const transform: transform = (
-  fonts: TailwindSize,
-): WordPressSizes =>
-  Object.entries(fonts ?? {})
-    .map(([k, v]) => [k, Array.isArray(v) ? v.shift() : v])
+export const transform: transform = fonts =>
+  Object.entries(fonts)
+    .map(([k, v]) => [k, Array.isArray(v) ? v[0] : v])
     .map(transformEntry)

sources/@roots/sage/src/wp-theme-json/tailwind/palette.test.ts

@@ -0,0 +1,43 @@
+import {describe, expect, it} from '@jest/globals'
+
+import {palette} from './index'
+
+const mockPalette: palette.TailwindColors = {
+  blue: {
+    shade: {
+      hue: {
+        '50': `#add8e6`,
+      },
+    },
+    group: {
+      sky: `#87ceeb`,
+    },
+  },
+  tomato: `#ff4500`,
+}
+
+describe(`themeJson tailwind adapter`, () => {
+  it(`transformsPalette`, () => {
+    const mockPaletteRef = {...mockPalette}
+
+    expect(palette.transform(mockPalette)).toStrictEqual([
+      {
+        name: `Blue Shade Hue 50`,
+        slug: `blue-shade-hue-50`,
+        color: `#add8e6`,
+      },
+      {
+        name: `Blue Group Sky`,
+        slug: `blue-group-sky`,
+        color: `#87ceeb`,
+      },
+      {
+        name: `Tomato`,
+        slug: `tomato`,
+        color: `#ff4500`,
+      },
+    ])
+
+    expect(mockPalette).toEqual(mockPaletteRef)
+  })
+})

sources/@roots/sage/src/wp-theme-json/tailwind/palette.ts

@@ -50,10 +50,7 @@ export interface toWordPressEntries {
     Array<string>,
   ]): WordPressColors
 }
-export const toWordPressEntries: toWordPressEntries = ([entry, path]: [
-  [string, string | TailwindColors],
-  Array<string>,
-]): WordPressColors => {
+export const toWordPressEntries: toWordPressEntries = ([entry, path]) => {
   const [name, value] = entry
 
   if (!isString(value)) {
@@ -77,7 +74,7 @@ export const toWordPressEntries: toWordPressEntries = ([entry, path]: [
 export interface transform {
   (palette: TailwindColors): WordPressColors
 }
-export const transform: transform = (palette: TailwindColors) =>
-  Object.entries(palette ?? {})
+export const transform: transform = palette =>
+  Object.entries(palette)
     .map(i => [i, []])
     .flatMap(toWordPressEntries)

sources/@roots/sage/tsconfig.json

@@ -7,7 +7,7 @@
     "sourceMap": false,
   },
   "include": ["./src"],
-  "exclude": ["./lib", "./node_modules"],
+  "exclude": ["./lib", "./node_modules", "./**/*.test.ts"],
   "references": [
     {"path": "./../bud-framework/tsconfig.json"},
     {"path": "./../bud-api/tsconfig.json"},