Skip to content

Prep for new Oxide API in v4.1 #1284

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Mar 27, 2025
Merged

Prep for new Oxide API in v4.1 #1284

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
374440e
Refactor
thecrypticace Mar 25, 2025
8886a12
Prep for new Oxide API
thecrypticace Mar 24, 2025
7b89ced
Rewrite some tests using the new setup
thecrypticace Mar 27, 2025
c4bb443
Fix issue where Oxide package detection goes up one directory too far
thecrypticace Mar 27, 2025
1c93433
Remove a few test fixtures
thecrypticace Mar 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 70 additions & 17 deletions packages/tailwindcss-language-server/src/oxide.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@ declare namespace OxideV2 {
}
}

// This covers the Oxide API from v4.0.0-alpha.20+
declare namespace OxideV3 {
// This covers the Oxide API from v4.0.0-alpha.30+
declare namespace OxideV3And4 {
interface GlobEntry {
base: string
pattern: string
Expand All @@ -58,10 +58,37 @@ declare namespace OxideV3 {
}
}

// This covers the Oxide API from v4.1.0+
declare namespace OxideV5 {
interface GlobEntry {
base: string
pattern: string
}

interface SourceEntry {
base: string
pattern: string
negated: boolean
}

interface ScannerOptions {
sources: Array<SourceEntry>
}

interface ScannerConstructor {
new (options: ScannerOptions): Scanner
}

interface Scanner {
get files(): Array<string>
get globs(): Array<GlobEntry>
}
}

interface Oxide {
scanDir?(options: OxideV1.ScanOptions): OxideV1.ScanResult
scanDir?(options: OxideV2.ScanOptions): OxideV2.ScanResult
Scanner?: OxideV3.ScannerConstructor
Scanner?: OxideV3And4.ScannerConstructor | OxideV5.ScannerConstructor
}

async function loadOxideAtPath(id: string): Promise<Oxide | null> {
Expand All @@ -78,11 +105,17 @@ interface GlobEntry {
pattern: string
}

interface SourceEntry {
base: string
pattern: string
negated: boolean
}

interface ScanOptions {
oxidePath: string
oxideVersion: string
basePath: string
sources: Array<GlobEntry>
sources: Array<SourceEntry>
}

interface ScanResult {
Expand Down Expand Up @@ -118,38 +151,58 @@ export async function scan(options: ScanOptions): Promise<ScanResult | null> {
}

// V2
if (lte(options.oxideVersion, '4.0.0-alpha.19')) {
else if (lte(options.oxideVersion, '4.0.0-alpha.19')) {
let result = oxide.scanDir({
base: options.basePath,
sources: options.sources,
sources: options.sources.map((g) => ({ base: g.base, pattern: g.pattern })),
})

return {
files: result.files,
globs: result.globs,
globs: result.globs.map((g) => ({ base: g.base, pattern: g.pattern })),
}
}

// V3
if (lte(options.oxideVersion, '4.0.0-alpha.30')) {
let scanner = new oxide.Scanner({
else if (lte(options.oxideVersion, '4.0.0-alpha.30')) {
let scanner = new (oxide.Scanner as OxideV3And4.ScannerConstructor)({
detectSources: { base: options.basePath },
sources: options.sources,
sources: options.sources.map((g) => ({ base: g.base, pattern: g.pattern })),
})

return {
files: scanner.files,
globs: scanner.globs,
globs: scanner.globs.map((g) => ({ base: g.base, pattern: g.pattern })),
}
}

// V4
let scanner = new oxide.Scanner({
sources: [{ base: options.basePath, pattern: '**/*' }, ...options.sources],
})
else if (lte(options.oxideVersion, '4.0.9999')) {
let scanner = new (oxide.Scanner as OxideV3And4.ScannerConstructor)({
sources: [
{ base: options.basePath, pattern: '**/*' },
...options.sources.map((g) => ({ base: g.base, pattern: g.pattern })),
],
})

return {
files: scanner.files,
globs: scanner.globs,
return {
files: scanner.files,
globs: scanner.globs.map((g) => ({ base: g.base, pattern: g.pattern })),
}
}

// V5
else {
let scanner = new (oxide.Scanner as OxideV5.ScannerConstructor)({
sources: [
{ base: options.basePath, pattern: '**/*', negated: false },
...options.sources.map((g) => ({ base: g.base, pattern: g.pattern, negated: g.negated })),
],
})

return {
files: scanner.files,
globs: scanner.globs.map((g) => ({ base: g.base, pattern: g.pattern })),
}
}
}
167 changes: 119 additions & 48 deletions packages/tailwindcss-language-server/src/project-locator.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { ProjectLocator } from './project-locator'
import { URL, fileURLToPath } from 'url'
import { Settings } from '@tailwindcss/language-service/src/util/state'
import { createResolver } from './resolver'
import { css, defineTest, js, json, scss, Storage, TestUtils } from './testing'
import { css, defineTest, html, js, json, scss, Storage, symlinkTo, TestUtils } from './testing'
import { normalizePath } from './utils'

let settings: Settings = {
Expand Down Expand Up @@ -141,58 +141,129 @@ testFixture('v4/workspaces', [
},
])

testFixture('v4/auto-content', [
//
{
config: 'src/app.css',
content: [
'{URL}/*',
'{URL}/package.json',
'{URL}/src/index.html',
'{URL}/src/components/example.html',
'{URL}/src/**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}',
],
testLocator({
name: 'automatic content detection with Oxide',
fs: {
'package.json': json`
{
"dependencies": {
"tailwindcss": "^4.0.15",
"@tailwindcss/oxide": "^4.0.15"
}
}
`,
'src/index.html': html`<div class="flex">Test</div>`,
'src/app.css': css`
@import 'tailwindcss';
`,
'src/components/example.html': html`<div class="underline">Test</div>`,
},
])
expected: [
{
config: '/src/app.css',
content: [
'/*',
'/package.json',
'/src/**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}',
'/src/components/example.html',
'/src/index.html',
],
},
],
})

testFixture('v4/auto-content-split', [
{
config: 'src/app.css',
content: [
'{URL}/*',
'{URL}/package.json',
'{URL}/src/index.html',
'{URL}/src/components/example.html',
'{URL}/src/**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}',
],
testLocator({
name: 'automatic content detection with Oxide using split config',
fs: {
'package.json': json`
{
"dependencies": {
"tailwindcss": "^4.0.15",
"@tailwindcss/oxide": "^4.0.15"
}
}
`,
'src/index.html': html`<div class="flex">Test</div>`,
'src/app.css': css`
@import 'tailwindcss/preflight' layer(base);
@import 'tailwindcss/theme' layer(theme);
@import 'tailwindcss/utilities' layer(utilities);
`,
'src/components/example.html': html`<div class="underline">Test</div>`,
},
])
expected: [
{
config: '/src/app.css',
content: [
'/*',
'/package.json',
'/src/**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}',
'/src/components/example.html',
'/src/index.html',
],
},
],
})

testFixture('v4/custom-source', [
//
{
config: 'admin/app.css',
content: [
'{URL}/*',
'{URL}/admin/foo.bin',
'{URL}/admin/{**/*.bin,**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}}',
'{URL}/package.json',
'{URL}/shared.html',
'{URL}/web/**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}',
],
},
{
config: 'web/app.css',
content: [
'{URL}/*',
'{URL}/admin/**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}',
'{URL}/package.json',
'{URL}/shared.html',
'{URL}/web/bar.bin',
'{URL}/web/{**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue},*.bin}',
],
testLocator({
name: 'automatic content detection with custom sources',
fs: {
'package.json': json`
{
"dependencies": {
"tailwindcss": "^4.0.15",
"@tailwindcss/oxide": "^4.0.15"
}
}
`,
'admin/app.css': css`
@import './tw.css';
@import './ui.css';
`,
'admin/tw.css': css`
@import 'tailwindcss';
@source './**/*.bin';
`,
'admin/ui.css': css`
@theme {
--color-potato: #907a70;
}
`,
'admin/foo.bin': html`<p class="underline">Admin</p>`,

'web/app.css': css`
@import 'tailwindcss';
@source './*.bin';
`,
'web/bar.bin': html`<p class="underline">Web</p>`,

'shared.html': html`<p>I belong to no one!</p>`,
},
])
expected: [
{
config: '/admin/app.css',
content: [
'/*',
'/admin/foo.bin',
'/admin/{**/*.bin,**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}}',
'/package.json',
'/shared.html',
'/web/**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}',
],
},
{
config: '/web/app.css',
content: [
'/*',
'/admin/**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue}',
'/package.json',
'/shared.html',
'/web/bar.bin',
'/web/{**/*.{aspx,astro,cjs,cts,eex,erb,gjs,gts,haml,handlebars,hbs,heex,html,jade,js,jsx,liquid,md,mdx,mjs,mts,mustache,njk,nunjucks,php,pug,py,razor,rb,rhtml,rs,slim,svelte,tpl,ts,tsx,twig,vue},*.bin}',
],
},
],
})

testFixture('v4/missing-files', [
//
Expand Down
7 changes: 2 additions & 5 deletions packages/tailwindcss-language-server/src/project-locator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -627,12 +627,9 @@ async function* detectContentFiles(
resolver: Resolver,
): AsyncIterable<string> {
try {
let oxidePath = await resolver.resolveJsId('@tailwindcss/oxide', path.dirname(base))
let oxidePath = await resolver.resolveJsId('@tailwindcss/oxide', base)
oxidePath = pathToFileURL(oxidePath).href
let oxidePackageJsonPath = await resolver.resolveJsId(
'@tailwindcss/oxide/package.json',
path.dirname(base),
)
let oxidePackageJsonPath = await resolver.resolveJsId('@tailwindcss/oxide/package.json', base)
let oxidePackageJson = JSON.parse(await fs.readFile(oxidePackageJsonPath, 'utf8'))

let result = await oxide.scan({
Expand Down
Loading