From 6978d59b64bafa68cf1d852844bbbf8e5521201c Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 9 Dec 2024 10:05:02 -0500 Subject: [PATCH] Update theme entry suggestions for the v4 beta (#1105) We forgot to update these. --- .../src/completionProvider.ts | 101 +++++++++++------- .../src/util/v4/design-system.ts | 11 +- packages/vscode-tailwindcss/CHANGELOG.md | 2 +- 3 files changed, 72 insertions(+), 42 deletions(-) diff --git a/packages/tailwindcss-language-service/src/completionProvider.ts b/packages/tailwindcss-language-service/src/completionProvider.ts index 157c4610..458c2c90 100644 --- a/packages/tailwindcss-language-service/src/completionProvider.ts +++ b/packages/tailwindcss-language-service/src/completionProvider.ts @@ -40,6 +40,7 @@ import { customClassesIn } from './util/classes' import { IS_SCRIPT_SOURCE, IS_TEMPLATE_SOURCE } from './metadata/extensions' import * as postcss from 'postcss' import { findFileDirective } from './completions/file-paths' +import type { ThemeEntry } from './util/v4' let isUtil = (className) => Array.isArray(className.__info) @@ -789,6 +790,8 @@ function provideThemeVariableCompletions( position: Position, _context?: CompletionContext, ): CompletionList { + if (!state.v4) return null + // Make sure we're in a CSS "context' if (!isCssContext(state, document, position)) return null let text = getTextWithoutComments(document, 'css', { @@ -804,52 +807,74 @@ function provideThemeVariableCompletions( if (themeBlock === -1) return null if (braceLevel(text.slice(themeBlock)) !== 1) return null - function themeVar(label: string) { - return { - label, - kind: CompletionItemKind.Variable, - // insertTextFormat: InsertTextFormat.Snippet, - // textEditText: `${label}-[\${1}]`, - } + let entries: ThemeEntry[] = [ + // 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: 'namespace', name: '--spacing' }, + { kind: 'namespace', name: '--width' }, + { kind: 'namespace', name: '--font-family' }, + { kind: 'namespace', name: '--font-size' }, + { kind: 'namespace', name: '--letter-spacing' }, + { kind: 'namespace', name: '--line-height' }, + { kind: 'namespace', name: '--transition-timing-function' }, + ] + + if (semver.gte(state.version, '4.0.0-beta.1')) { + entries = [ + { 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' }, + ] } - function themeNamespace(label: string) { - return { - label: `${label}-`, + let items: CompletionItem[] = [] + + for (let entry of entries) { + items.push({ + label: entry.kind === 'namespace' ? `${entry.name}-` : entry.name, kind: CompletionItemKind.Variable, - // insertTextFormat: InsertTextFormat.Snippet, - // textEditText: `${label}-[\${1}]`, - } + }) } return withDefaults( { isIncomplete: false, - items: [ - themeVar('--default-transition-duration'), - themeVar('--default-transition-timing-function'), - themeVar('--default-font-family'), - themeVar('--default-font-feature-settings'), - themeVar('--default-font-variation-settings'), - themeVar('--default-mono-font-family'), - themeVar('--default-mono-font-feature-settings'), - themeVar('--default-mono-font-variation-settings'), - themeNamespace('--breakpoint'), - themeNamespace('--color'), - themeNamespace('--animate'), - themeNamespace('--blur'), - themeNamespace('--radius'), - themeNamespace('--shadow'), - themeNamespace('--inset-shadow'), - themeNamespace('--drop-shadow'), - themeNamespace('--spacing'), - themeNamespace('--width'), - themeNamespace('--font-family'), - themeNamespace('--font-size'), - themeNamespace('--letter-spacing'), - themeNamespace('--line-height'), - themeNamespace('--transition-timing-function'), - ], + items, }, { data: { diff --git a/packages/tailwindcss-language-service/src/util/v4/design-system.ts b/packages/tailwindcss-language-service/src/util/v4/design-system.ts index ee9396a8..0cb08c0a 100644 --- a/packages/tailwindcss-language-service/src/util/v4/design-system.ts +++ b/packages/tailwindcss-language-service/src/util/v4/design-system.ts @@ -24,6 +24,11 @@ export interface VariantEntry { export type VariantFn = (rule: Rule, variant: NamedVariant) => null | void +export interface ThemeEntry { + kind: 'namespace' | 'variable' + name: string +} + export interface DesignSystem { theme: Theme variants: Map @@ -32,12 +37,12 @@ export interface DesignSystem { getClassOrder(classes: string[]): [string, bigint | null][] getClassList(): ClassEntry[] getVariants(): VariantEntry[] + + // Optional because it did not exist in earlier v4 alpha versions + resolveThemeValue?(path: string): string | undefined } export interface DesignSystem { compile(classes: string[]): postcss.Root[] toCss(nodes: postcss.Root | postcss.Node[]): string - - // Optional because it did not exist in earlier v4 alpha versions - resolveThemeValue?(path: string): string | undefined } diff --git a/packages/vscode-tailwindcss/CHANGELOG.md b/packages/vscode-tailwindcss/CHANGELOG.md index cd4e18ff..74c2781c 100644 --- a/packages/vscode-tailwindcss/CHANGELOG.md +++ b/packages/vscode-tailwindcss/CHANGELOG.md @@ -2,7 +2,7 @@ ## Prerelease -- Nothing yet +- Update theme entry suggestions ([#1105](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1105)) ## 0.12.15