Skip to content

Commit

Permalink
Update theme entry suggestions for the v4 beta (#1105)
Browse files Browse the repository at this point in the history 
We forgot to update these.
  • Loading branch information
@thecrypticace
thecrypticace authored Dec 9, 2024
1 parent 805dfe1 commit 6978d59
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 42 deletions.
101 changes: 63 additions & 38 deletions packages/tailwindcss-language-service/src/completionProvider.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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', {
Expand All @@ -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: {
Expand Down
11 changes: 8 additions & 3 deletions packages/tailwindcss-language-service/src/util/v4/design-system.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<string, VariantFn>
Expand All @@ -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
}
2 changes: 1 addition & 1 deletion packages/vscode-tailwindcss/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## Prerelease

- Nothing yet
- Update theme entry suggestions ([#1105](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1105))

## 0.12.15

Expand Down

0 comments on commit 6978d59

Please sign in to comment.