From 23b44544c79e6041eacc951f3d6b0eb9684528a1 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 3 Dec 2024 22:24:06 -0500 Subject: [PATCH 1/2] Add `getThemeEntries` API --- packages/tailwindcss/src/design-system.ts | 13 ++++++++- packages/tailwindcss/src/intellisense.ts | 34 +++++++++++++++++++++++ 2 files changed, 46 insertions(+), 1 deletion(-) diff --git a/packages/tailwindcss/src/design-system.ts b/packages/tailwindcss/src/design-system.ts index 894dba6eaae2..78e1e4398696 100644 --- a/packages/tailwindcss/src/design-system.ts +++ b/packages/tailwindcss/src/design-system.ts @@ -1,7 +1,14 @@ import { toCss } from './ast' import { parseCandidate, parseVariant, type Candidate, type Variant } from './candidate' import { compileAstNodes, compileCandidates } from './compile' -import { getClassList, getVariants, type ClassEntry, type VariantEntry } from './intellisense' +import { + getClassList, + getThemeEntries, + getVariants, + type ClassEntry, + type ThemeEntry, + type VariantEntry, +} from './intellisense' import { getClassOrder } from './sort' import type { Theme, ThemeKey } from './theme' import { Utilities, createUtilities, withAlpha } from './utilities' @@ -31,6 +38,7 @@ export type DesignSystem = { // Used by IntelliSense candidatesToCss(classes: string[]): (string | null)[] + getThemeEntries(): ThemeEntry[] } export function buildDesignSystem(theme: Theme): DesignSystem { @@ -84,6 +92,9 @@ export function buildDesignSystem(theme: Theme): DesignSystem { getVariants() { return getVariants(this) }, + getThemeEntries() { + return getThemeEntries() + }, parseCandidate(candidate: string) { return parsedCandidates.get(candidate) diff --git a/packages/tailwindcss/src/intellisense.ts b/packages/tailwindcss/src/intellisense.ts index 5713afda43cd..bf7a6ab6ccf6 100644 --- a/packages/tailwindcss/src/intellisense.ts +++ b/packages/tailwindcss/src/intellisense.ts @@ -158,3 +158,37 @@ export function getVariants(design: DesignSystem) { return list } + +export interface ThemeEntry { + kind: 'namespace' | 'variable' + name: string +} + +export function getThemeEntries(): ThemeEntry[] { + return [ + // Polyfill data for older versions of the design system + { kind: 'variable', name: '--default-transition-duration' }, + { kind: 'variable', name: '--default-transition-timing-function' }, + { kind: 'variable', name: '--default-font-family' }, + { kind: 'variable', name: '--default-font-feature-settings' }, + { kind: 'variable', name: '--default-font-variation-settings' }, + { kind: 'variable', name: '--default-mono-font-family' }, + { kind: 'variable', name: '--default-mono-font-feature-settings' }, + { kind: 'variable', name: '--default-mono-font-variation-settings' }, + { kind: 'namespace', name: '--breakpoint' }, + { kind: 'namespace', name: '--color' }, + { kind: 'namespace', name: '--animate' }, + { kind: 'namespace', name: '--blur' }, + { kind: 'namespace', name: '--radius' }, + { kind: 'namespace', name: '--shadow' }, + { kind: 'namespace', name: '--inset-shadow' }, + { kind: 'namespace', name: '--drop-shadow' }, + { kind: 'variable', name: '--spacing' }, + { kind: 'namespace', name: '--container' }, + { kind: 'namespace', name: '--font' }, + { kind: 'namespace', name: '--font-size' }, + { kind: 'namespace', name: '--tracking' }, + { kind: 'namespace', name: '--leading' }, + { kind: 'namespace', name: '--ease' }, + ] +} From 91756b7ab1caf019d8406408f94ba4a4225caa41 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 3 Dec 2024 22:28:57 -0500 Subject: [PATCH 2/2] Add test --- packages/tailwindcss/src/intellisense.test.ts | 112 ++++++++++++++++++ 1 file changed, 112 insertions(+) diff --git a/packages/tailwindcss/src/intellisense.test.ts b/packages/tailwindcss/src/intellisense.test.ts index 7c7caef6abd7..585d4ea58982 100644 --- a/packages/tailwindcss/src/intellisense.test.ts +++ b/packages/tailwindcss/src/intellisense.test.ts @@ -431,3 +431,115 @@ test('Custom at-rule variants do not show up as a value under `group`', async () expect(not.values).toContain('variant-3') expect(not.values).toContain('variant-4') }) + +test('Can get a list of suggestable theme variables and namespaces', async () => { + let input = css` + @import 'tailwindcss/utilities'; + ` + + let design = await __unstable__loadDesignSystem(input, { + loadStylesheet: async (_, base) => ({ + base, + content: '@tailwind utilities;', + }), + }) + + let entries = design.getThemeEntries() + + expect(entries).toMatchInlineSnapshot(` + [ + { + "kind": "variable", + "name": "--default-transition-duration", + }, + { + "kind": "variable", + "name": "--default-transition-timing-function", + }, + { + "kind": "variable", + "name": "--default-font-family", + }, + { + "kind": "variable", + "name": "--default-font-feature-settings", + }, + { + "kind": "variable", + "name": "--default-font-variation-settings", + }, + { + "kind": "variable", + "name": "--default-mono-font-family", + }, + { + "kind": "variable", + "name": "--default-mono-font-feature-settings", + }, + { + "kind": "variable", + "name": "--default-mono-font-variation-settings", + }, + { + "kind": "namespace", + "name": "--breakpoint", + }, + { + "kind": "namespace", + "name": "--color", + }, + { + "kind": "namespace", + "name": "--animate", + }, + { + "kind": "namespace", + "name": "--blur", + }, + { + "kind": "namespace", + "name": "--radius", + }, + { + "kind": "namespace", + "name": "--shadow", + }, + { + "kind": "namespace", + "name": "--inset-shadow", + }, + { + "kind": "namespace", + "name": "--drop-shadow", + }, + { + "kind": "variable", + "name": "--spacing", + }, + { + "kind": "namespace", + "name": "--container", + }, + { + "kind": "namespace", + "name": "--font", + }, + { + "kind": "namespace", + "name": "--font-size", + }, + { + "kind": "namespace", + "name": "--tracking", + }, + { + "kind": "namespace", + "name": "--leading", + }, + { + "kind": "namespace", + "name": "--ease", + }, + ] + `) +})