Fix IntelliSense class suggestions (#15857)
This PR fixes a few problems with IntelliSense: - Default installs suggest font weight utilities twice - When setting `--font-weight-*: initial;` the default weights are still suggested - Setting `--spacing-*: initial;` still shows suggestions for utilities using the spacing scale assuming it's multiplier-based. Removing the `--spacing: …` key should make them entirely theme driven instead. - The default container query variants like `@sm`, `@md`, etc… aren't suggested. Only the `@min-sm` and `@max-sm` style ones are. Fixes https://github.com/tailwindlabs/tailwindcss-intellisense/issues/1133 Fixes https://github.com/tailwindlabs/tailwindcss-intellisense/issues/1136 Fixes #15811 --------- Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
This commit is contained in:
Jordan Pittman
GitHub
parent
28008f1571
commit
1eb2980678
6 changed files with 1377 additions and 1340 deletions
|
|
@ -17,6 +17,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|||
- Ensure CSS variable shorthand uses valid CSS variables ([#15738](https://github.com/tailwindlabs/tailwindcss/pull/15738))
|
||||
- Ensure font-size utilities with `none` modifier have a line-height set e.g.: `text-sm/none` ([#15921](https://github.com/tailwindlabs/tailwindcss/pull/15921))
|
||||
- Ensure font-size utilities with unknown modifier don't generate CSS ([#15921](https://github.com/tailwindlabs/tailwindcss/pull/15921))
|
||||
- Don’t suggest font weight utilities more than once ([#15857](https://github.com/tailwindlabs/tailwindcss/pull/15857))
|
||||
- Suggest container query variants ([#15857](https://github.com/tailwindlabs/tailwindcss/pull/15857))
|
||||
- Disable bare value suggestions when not using the `--spacing` variable ([#15857](https://github.com/tailwindlabs/tailwindcss/pull/15857))
|
||||
- Ensure suggested classes are properly sorted ([#15857](https://github.com/tailwindlabs/tailwindcss/pull/15857))
|
||||
- _Upgrade_: Ensure JavaScript config files on different drives are correctly migrated ([#15927](https://github.com/tailwindlabs/tailwindcss/pull/15927))
|
||||
|
||||
## [4.0.0] - 2025-01-21
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -2,12 +2,13 @@ import { expect, test } from 'vitest'
|
|||
import { __unstable__loadDesignSystem } from '.'
|
||||
import { buildDesignSystem } from './design-system'
|
||||
import plugin from './plugin'
|
||||
import { Theme } from './theme'
|
||||
import { Theme, ThemeOptions } from './theme'
|
||||
|
||||
const css = String.raw
|
||||
|
||||
function loadDesignSystem() {
|
||||
let theme = new Theme()
|
||||
theme.add('--spacing', '0.25rem')
|
||||
theme.add('--colors-red-500', 'red')
|
||||
theme.add('--colors-blue-500', 'blue')
|
||||
theme.add('--breakpoint-sm', '640px')
|
||||
|
|
@ -21,6 +22,9 @@ function loadDesignSystem() {
|
|||
theme.add('--opacity-background', '0.3')
|
||||
theme.add('--drop-shadow-sm', '0 1px 1px rgb(0 0 0 / 0.05)')
|
||||
theme.add('--inset-shadow-sm', 'inset 0 1px 1px rgb(0 0 0 / 0.05)')
|
||||
theme.add('--font-weight-bold', '700')
|
||||
theme.add('--container-md', '768px')
|
||||
theme.add('--container-lg', '1024px')
|
||||
return buildDesignSystem(theme)
|
||||
}
|
||||
|
||||
|
|
@ -35,6 +39,25 @@ test('getClassList', () => {
|
|||
expect(classNames).toMatchSnapshot()
|
||||
})
|
||||
|
||||
test('Spacing utilities do not suggest bare values when not using the multiplier-based spacing scale', () => {
|
||||
let design = loadDesignSystem()
|
||||
|
||||
// Remove spacing scale
|
||||
design.theme.clearNamespace('--spacing', ThemeOptions.NONE)
|
||||
|
||||
let classList = design.getClassList()
|
||||
let classNames = classList.flatMap(([name, meta]) => [
|
||||
name,
|
||||
...meta.modifiers.map((m) => `${name}/${m}`),
|
||||
])
|
||||
|
||||
expect(classNames).not.toContain('p-0')
|
||||
expect(classNames).not.toContain('p-1')
|
||||
expect(classNames).not.toContain('p-2')
|
||||
expect(classNames).not.toContain('p-3')
|
||||
expect(classNames).not.toContain('p-4')
|
||||
})
|
||||
|
||||
test('Theme values with underscores are converted back to decimal points', () => {
|
||||
let design = loadDesignSystem()
|
||||
let classes = design.getClassList()
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { styleRule, walkDepth } from './ast'
|
||||
import { applyVariant } from './compile'
|
||||
import type { DesignSystem } from './design-system'
|
||||
import { compare } from './utils/compare'
|
||||
|
||||
interface ClassMetadata {
|
||||
modifiers: string[]
|
||||
|
|
@ -33,7 +34,7 @@ export function getClassList(design: DesignSystem): ClassEntry[] {
|
|||
}
|
||||
}
|
||||
|
||||
list.sort((a, b) => (a[0] === b[0] ? 0 : a[0] < b[0] ? -1 : 1))
|
||||
list.sort((a, b) => compare(a[0], b[0]))
|
||||
|
||||
return list
|
||||
}
|
||||
|
|
@ -57,11 +58,12 @@ export function getVariants(design: DesignSystem) {
|
|||
for (let [root, variant] of design.variants.entries()) {
|
||||
if (variant.kind === 'arbitrary') continue
|
||||
|
||||
let hasDash = root !== '@'
|
||||
let values = design.variants.getCompletions(root)
|
||||
|
||||
function selectors({ value, modifier }: SelectorOptions = {}) {
|
||||
let name = root
|
||||
if (value) name += `-${value}`
|
||||
if (value) name += hasDash ? `-${value}` : value
|
||||
if (modifier) name += `/${modifier}`
|
||||
|
||||
let variant = design.parseVariant(name)
|
||||
|
|
@ -128,7 +130,7 @@ export function getVariants(design: DesignSystem) {
|
|||
name: root,
|
||||
values,
|
||||
isArbitrary: false,
|
||||
hasDash: true,
|
||||
hasDash,
|
||||
selectors,
|
||||
})
|
||||
break
|
||||
|
|
@ -138,7 +140,7 @@ export function getVariants(design: DesignSystem) {
|
|||
name: root,
|
||||
values,
|
||||
isArbitrary: true,
|
||||
hasDash: true,
|
||||
hasDash,
|
||||
selectors,
|
||||
})
|
||||
break
|
||||
|
|
@ -148,7 +150,7 @@ export function getVariants(design: DesignSystem) {
|
|||
name: root,
|
||||
values,
|
||||
isArbitrary: true,
|
||||
hasDash: true,
|
||||
hasDash,
|
||||
selectors,
|
||||
})
|
||||
break
|
||||
|
|
|
|||
|
|
@ -427,42 +427,44 @@ export function createUtilities(theme: Theme) {
|
|||
|
||||
suggest(name, () => [
|
||||
{
|
||||
values: [
|
||||
'0',
|
||||
'0.5',
|
||||
'1',
|
||||
'1.5',
|
||||
'2',
|
||||
'2.5',
|
||||
'3',
|
||||
'3.5',
|
||||
'4',
|
||||
'5',
|
||||
'6',
|
||||
'7',
|
||||
'8',
|
||||
'9',
|
||||
'10',
|
||||
'11',
|
||||
'12',
|
||||
'14',
|
||||
'16',
|
||||
'20',
|
||||
'24',
|
||||
'28',
|
||||
'32',
|
||||
'36',
|
||||
'40',
|
||||
'44',
|
||||
'48',
|
||||
'52',
|
||||
'56',
|
||||
'60',
|
||||
'64',
|
||||
'72',
|
||||
'80',
|
||||
'96',
|
||||
],
|
||||
values: theme.get(['--spacing'])
|
||||
? [
|
||||
'0',
|
||||
'0.5',
|
||||
'1',
|
||||
'1.5',
|
||||
'2',
|
||||
'2.5',
|
||||
'3',
|
||||
'3.5',
|
||||
'4',
|
||||
'5',
|
||||
'6',
|
||||
'7',
|
||||
'8',
|
||||
'9',
|
||||
'10',
|
||||
'11',
|
||||
'12',
|
||||
'14',
|
||||
'16',
|
||||
'20',
|
||||
'24',
|
||||
'28',
|
||||
'32',
|
||||
'36',
|
||||
'40',
|
||||
'44',
|
||||
'48',
|
||||
'52',
|
||||
'56',
|
||||
'60',
|
||||
'64',
|
||||
'72',
|
||||
'80',
|
||||
'96',
|
||||
]
|
||||
: [],
|
||||
supportsNegative,
|
||||
valueThemeKeys: themeKeys,
|
||||
},
|
||||
|
|
@ -2934,17 +2936,7 @@ export function createUtilities(theme: Theme) {
|
|||
valueThemeKeys: ['--font'],
|
||||
},
|
||||
{
|
||||
values: [
|
||||
'thin',
|
||||
'extralight',
|
||||
'light',
|
||||
'normal',
|
||||
'medium',
|
||||
'semibold',
|
||||
'bold',
|
||||
'extrabold',
|
||||
'black',
|
||||
],
|
||||
values: [],
|
||||
valueThemeKeys: ['--font-weight'],
|
||||
},
|
||||
])
|
||||
|
|
|
|||
|
|
@ -1117,6 +1117,11 @@ export function createVariants(theme: Theme): Variants {
|
|||
'@min',
|
||||
() => Array.from(widths.keys()).filter((key) => key !== null) as string[],
|
||||
)
|
||||
|
||||
variants.suggest(
|
||||
'@',
|
||||
() => Array.from(widths.keys()).filter((key) => key !== null) as string[],
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue