diff options
| author | Chris Swithinbank | 2024-04-09 13:15:15 +0200 |
|---|---|---|
| committer | GitHub | 2024-04-09 13:15:15 +0200 |
| commit | 1aae51ac512df8de088c7529236e196be42077e8 (patch) | |
| tree | 742276d951e2e0b60869a61d26d06624320cf19f | |
| parent | f171ac4d6396eb2538598d85957670df50938b6a (diff) | |
| download | IT.starlight-1aae51ac512df8de088c7529236e196be42077e8.tar.gz IT.starlight-1aae51ac512df8de088c7529236e196be42077e8.tar.bz2 IT.starlight-1aae51ac512df8de088c7529236e196be42077e8.zip | |
Add warning to Tailwind plugin if `colors.white` is not a string (#1726)
| -rw-r--r-- | .changeset/strange-tips-work.md | 5 | ||||
| -rw-r--r-- | packages/tailwind/index.ts | 14 |
2 files changed, 17 insertions, 2 deletions
diff --git a/.changeset/strange-tips-work.md b/.changeset/strange-tips-work.md new file mode 100644 index 00000000..f7d629e1 --- /dev/null +++ b/.changeset/strange-tips-work.md @@ -0,0 +1,5 @@ +--- +'@astrojs/starlight-tailwind': patch +--- + +Adds warning log if a user tries to set `colors.white` in their Tailwind theme config with an object instead of a string. diff --git a/packages/tailwind/index.ts b/packages/tailwind/index.ts index 52b4e4c4..fc11b9eb 100644 --- a/packages/tailwind/index.ts +++ b/packages/tailwind/index.ts @@ -49,6 +49,16 @@ const StarlightTailwindPlugin = () => ? theme(`colors.accent.${shade}`, theme(`colors.accent.900`, fallback)) : theme(`colors.accent.${shade}`, fallback); + let white: string = theme('colors.white'); + if (typeof white !== 'string') { + console.warn( + `Expected \`colors.white\` in Tailwind theme to be a string, received ${typeof white}.\n` + + `Try setting a single value, for example \`white: '#fafaf9'\` or \`white: colors.stone[50]\`.` + ); + // Ensure a usable value for white if the user-configured one is wrong. + white = '#fff'; + } + addBase({ // Restore crucial styles from Tailwind Preflight: https://tailwindcss.com/docs/preflight // Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) @@ -65,7 +75,7 @@ const StarlightTailwindPlugin = () => '--sl-font': theme('fontFamily.sans'), '--sl-font-mono': theme('fontFamily.mono'), // Dark mode Starlight theme variables. - '--sl-color-white': theme('colors.white'), + '--sl-color-white': white, '--sl-color-gray-1': theme('colors.gray.200'), '--sl-color-gray-2': theme('colors.gray.300'), '--sl-color-gray-3': theme('colors.gray.400'), @@ -86,7 +96,7 @@ const StarlightTailwindPlugin = () => '--sl-color-gray-5': theme('colors.gray.300'), '--sl-color-gray-6': theme('colors.gray.200'), '--sl-color-gray-7': theme('colors.gray.100'), - '--sl-color-black': theme('colors.white'), + '--sl-color-black': white, '--sl-color-accent-low': themeAccent(200, '#c7d2fe'), '--sl-color-accent': themeAccent(600, '#4f46e5'), '--sl-color-accent-high': themeAccent(900, '#312e81'), |