Skip to content

Commit

Permalink
Vite: Use Vite resolvers for CSS and JS files
Browse files Browse the repository at this point in the history
  • Loading branch information
@philipp-spiess
philipp-spiess committed Nov 26, 2024
1 parent cb518f4 commit 9860535
Show file tree
Hide file tree
Showing 4 changed files with 397 additions and 18 deletions.
143 changes: 143 additions & 0 deletions integrations/vite/resolvers.test.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
import { describe, expect } from 'vitest'
import { candidate, css, fetchStyles, html, js, retryAssertion, test, ts, txt } from '../utils'

for (let transformer of ['postcss', 'lightningcss']) {
describe(transformer, () => {
test(
`resolves aliases in production build`,
{
fs: {
'package.json': txt`
{
"type": "module",
"dependencies": {
"@tailwindcss/vite": "workspace:^",
"tailwindcss": "workspace:^"
},
"devDependencies": {
${transformer === 'lightningcss' ? `"lightningcss": "^1.26.0",` : ''}
"vite": "^5.3.5"
}
}
`,
'vite.config.ts': ts`
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'
import { fileURLToPath } from 'node:url'
export default defineConfig({
css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"},
build: { cssMinify: false },
plugins: [tailwindcss()],
resolve: {
alias: {
'#css-alias': fileURLToPath(new URL('./src/alias.css', import.meta.url)),
'#js-alias': fileURLToPath(new URL('./src/plugin.js', import.meta.url)),
},
},
})
`,
'index.html': html`
<head>
<link rel="stylesheet" href="./src/index.css" />
</head>
<body>
<div class="underline custom-underline">Hello, world!</div>
</body>
`,
'src/index.css': css`
@import '#css-alias';
@plugin '#js-alias';
`,
'src/alias.css': css`
@import 'tailwindcss/theme' theme(reference);
@import 'tailwindcss/utilities';
`,
'src/plugin.js': js`
export default function ({ addUtilities }) {
addUtilities({ '.custom-underline': { 'border-bottom': '1px solid green' } })
}
`,
},
},
async ({ fs, exec }) => {
await exec('pnpm vite build')

let files = await fs.glob('dist/**/*.css')
expect(files).toHaveLength(1)
let [filename] = files[0]

await fs.expectFileToContain(filename, [candidate`underline`, candidate`custom-underline`])
},
)

test(
`resolves aliases in dev mode`,
{
fs: {
'package.json': txt`
{
"type": "module",
"dependencies": {
"@tailwindcss/vite": "workspace:^",
"tailwindcss": "workspace:^"
},
"devDependencies": {
${transformer === 'lightningcss' ? `"lightningcss": "^1.26.0",` : ''}
"vite": "^5.3.5"
}
}
`,
'vite.config.ts': ts`
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'
import { fileURLToPath } from 'node:url'
export default defineConfig({
css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"},
build: { cssMinify: false },
plugins: [tailwindcss()],
resolve: {
alias: {
'#css-alias': fileURLToPath(new URL('./src/alias.css', import.meta.url)),
'#js-alias': fileURLToPath(new URL('./src/plugin.js', import.meta.url)),
},
},
})
`,
'index.html': html`
<head>
<link rel="stylesheet" href="./src/index.css" />
</head>
<body>
<div class="underline custom-underline">Hello, world!</div>
</body>
`,
'src/index.css': css`
@import '#css-alias';
@plugin '#js-alias';
`,
'src/alias.css': css`
@import 'tailwindcss/theme' theme(reference);
@import 'tailwindcss/utilities';
`,
'src/plugin.js': js`
export default function ({ addUtilities }) {
addUtilities({ '.custom-underline': { 'border-bottom': '1px solid green' } })
}
`,
},
},
async ({ root, spawn, getFreePort, fs }) => {
let port = await getFreePort()
await spawn(`pnpm vite dev --port ${port}`)

await retryAssertion(async () => {
let styles = await fetchStyles(port, '/index.html')
expect(styles).toContain(candidate`underline`)
expect(styles).toContain(candidate`custom-underline`)
})
},
)
})
}
53 changes: 44 additions & 9 deletions packages/@tailwindcss-node/src/compile.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,25 +11,33 @@ import {
import { getModuleDependencies } from './get-module-dependencies'
import { rewriteUrls } from './urls'

export type Resolver = (id: string, base: string) => Promise<string | false | undefined>

export async function compile(
css: string,
{
base,
onDependency,
shouldRewriteUrls,

customCssResolver,
customJsResolver,
}: {
base: string
onDependency: (path: string) => void
shouldRewriteUrls?: boolean

customCssResolver?: Resolver
customJsResolver?: Resolver
},
) {
let compiler = await _compile(css, {
base,
async loadModule(id, base) {
return loadModule(id, base, onDependency)
return loadModule(id, base, onDependency, customJsResolver)
},
async loadStylesheet(id, base) {
let sheet = await loadStylesheet(id, base, onDependency)
let sheet = await loadStylesheet(id, base, onDependency, customCssResolver)

if (shouldRewriteUrls) {
sheet.content = await rewriteUrls({
Expand Down Expand Up @@ -80,9 +88,14 @@ export async function __unstable__loadDesignSystem(css: string, { base }: { base
})
}

export async function loadModule(id: string, base: string, onDependency: (path: string) => void) {
export async function loadModule(
id: string,
base: string,
onDependency: (path: string) => void,
customJsResolver?: Resolver,
) {
if (id[0] !== '.') {
let resolvedPath = await resolveJsId(id, base)
let resolvedPath = await resolveJsId(id, base, customJsResolver)
if (!resolvedPath) {
throw new Error(`Could not resolve '${id}' from '${base}'`)
}
Expand All @@ -94,7 +107,7 @@ export async function loadModule(id: string, base: string, onDependency: (path:
}
}

let resolvedPath = await resolveJsId(id, base)
let resolvedPath = await resolveJsId(id, base, customJsResolver)
if (!resolvedPath) {
throw new Error(`Could not resolve '${id}' from '${base}'`)
}
Expand All @@ -113,8 +126,13 @@ export async function loadModule(id: string, base: string, onDependency: (path:
}
}

async function loadStylesheet(id: string, base: string, onDependency: (path: string) => void) {
let resolvedPath = await resolveCssId(id, base)
async function loadStylesheet(
id: string,
base: string,
onDependency: (path: string) => void,
cssResolver?: Resolver,
) {
let resolvedPath = await resolveCssId(id, base, cssResolver)
if (!resolvedPath) throw new Error(`Could not resolve '${id}' from '${base}'`)

onDependency(resolvedPath)
Expand Down Expand Up @@ -163,14 +181,22 @@ const cssResolver = EnhancedResolve.ResolverFactory.createResolver({
mainFields: ['style'],
conditionNames: ['style'],
})
async function resolveCssId(id: string, base: string): Promise<string | false | undefined> {
async function resolveCssId(
id: string,
base: string,
customCssResolver?: Resolver,
): Promise<string | false | undefined> {
if (typeof globalThis.__tw_resolve === 'function') {
let resolved = globalThis.__tw_resolve(id, base)
if (resolved) {
return Promise.resolve(resolved)
}
}

if (customCssResolver) {
return customCssResolver(id, base)
}

return runResolver(cssResolver, id, base)
}

Expand All @@ -188,13 +214,22 @@ const cjsResolver = EnhancedResolve.ResolverFactory.createResolver({
conditionNames: ['node', 'require'],
})

function resolveJsId(id: string, base: string): Promise<string | false | undefined> {
function resolveJsId(
id: string,
base: string,
customJsResolver?: Resolver,
): Promise<string | false | undefined> {
if (typeof globalThis.__tw_resolve === 'function') {
let resolved = globalThis.__tw_resolve(id, base)
if (resolved) {
return Promise.resolve(resolved)
}
}

if (customJsResolver) {
return customJsResolver(id, base)
}

return runResolver(esmResolver, id, base).catch(() => runResolver(cjsResolver, id, base))
}

Expand Down
34 changes: 31 additions & 3 deletions packages/@tailwindcss-vite/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,31 @@ export default function tailwindcss(): Plugin[] {
let moduleGraphCandidates = new DefaultMap<string, Set<string>>(() => new Set<string>())
let moduleGraphScanner = new Scanner({})

let roots: DefaultMap<string, Root> = new DefaultMap(
(id) => new Root(id, () => moduleGraphCandidates, config!.base),
)
let roots: DefaultMap<string, Root> = new DefaultMap((id) => {
let cssResolver = config!.createResolver({
...config!.resolve,
extensions: ['.css'],
mainFields: ['style'],
conditions: ['style', 'development|production'],
tryIndex: false,
preferRelative: true,
})
function customCssResolver(id: string, base: string) {
return cssResolver(id, base, false, isSSR)
}

let jsResolver = config!.createResolver(config!.resolve)
function customJsResolver(id: string, base: string) {
return jsResolver(id, base, true, isSSR)
}
return new Root(
id,
() => moduleGraphCandidates,
config!.base,
customCssResolver,
customJsResolver,
)
})

function scanFile(id: string, content: string, extension: string, isSSR: boolean) {
let updated = false
Expand Down Expand Up @@ -423,6 +445,9 @@ class Root {
private id: string,
private getSharedCandidates: () => Map<string, Set<string>>,
private base: string,

private customCssResolver: (id: string, base: string) => Promise<string | false | undefined>,
private customJsResolver: (id: string, base: string) => Promise<string | false | undefined>,
) {}

// Generate the CSS for the root file. This can return false if the file is
Expand All @@ -448,6 +473,9 @@ class Root {
addWatchFile(path)
this.dependencies.add(path)
},

customCssResolver: this.customCssResolver,
customJsResolver: this.customJsResolver,
})
env.DEBUG && console.timeEnd('[@tailwindcss/vite] Setup compiler')

Expand Down
Loading

0 comments on commit 9860535

Please sign in to comment.