mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
a06245b3fe
When we implemented the CSS import resolution system, we found out a detail about CSS imports in that files without a relative path prefix would still be relative to the source file. E.g.: ```css @import 'foo.css'; ``` Should first look for the file `foo.css` in the same directory. To make this cost as cheap as possible, we limited this by a heuristics to only apply the auto-relative imports for files with a file extension. Naturally, while testing v4 on more templates, we found that it's common for people to omit the file extension when loading css file. The above could also be written as such: ```css @import 'foo'; ``` To improve this, we have two options: - We either remove the heuristics, making every `@import` more expensive because we have to check for relative files. - We upgrade our codemods to rewrite `@import` statements to be explicitly relative. Because we really care about performance, we opted to go with the latter option. This PR adds the codemod and removes the heuristics so we resolve CSS files similar to how you would resolve JS files. --------- Co-authored-by: Robin Malfait <malfait.robin@gmail.com> Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
103 lines
3.7 KiB
TypeScript
103 lines
3.7 KiB
TypeScript
import { __unstable__loadDesignSystem } from '@tailwindcss/node'
|
|
import dedent from 'dedent'
|
|
import postcss from 'postcss'
|
|
import { expect, it } from 'vitest'
|
|
import type { UserConfig } from '../../../tailwindcss/src/compat/config/types'
|
|
import { migrateImport } from './migrate-import'
|
|
|
|
const css = dedent
|
|
|
|
async function migrate(input: string, userConfig: UserConfig = {}) {
|
|
return postcss()
|
|
.use(
|
|
migrateImport({
|
|
designSystem: await __unstable__loadDesignSystem(`@import 'tailwindcss';`, {
|
|
base: __dirname,
|
|
}),
|
|
userConfig,
|
|
}),
|
|
)
|
|
.process(input, { from: expect.getState().testPath })
|
|
.then((result) => result.css)
|
|
}
|
|
|
|
it('prints relative file imports as relative paths', async () => {
|
|
expect(
|
|
await migrate(css`
|
|
@import 'fixtures/test';
|
|
@import 'fixtures/test.css';
|
|
@import './fixtures/test.css';
|
|
@import './fixtures/test';
|
|
|
|
@import 'fixtures/test' screen;
|
|
@import 'fixtures/test.css' screen;
|
|
@import './fixtures/test.css' screen;
|
|
@import './fixtures/test' screen;
|
|
|
|
@import 'fixtures/test' supports(display: grid);
|
|
@import 'fixtures/test.css' supports(display: grid);
|
|
@import './fixtures/test.css' supports(display: grid);
|
|
@import './fixtures/test' supports(display: grid);
|
|
|
|
@import 'fixtures/test' layer(utilities);
|
|
@import 'fixtures/test.css' layer(utilities);
|
|
@import './fixtures/test.css' layer(utilities);
|
|
@import './fixtures/test' layer(utilities);
|
|
|
|
@import 'fixtures/test' theme(inline);
|
|
@import 'fixtures/test.css' theme(inline);
|
|
@import './fixtures/test.css' theme(inline);
|
|
@import './fixtures/test' theme(inline);
|
|
|
|
@import 'fixtures/test' layer(utilities) supports(display: grid) screen and (min-width: 600px);
|
|
@import 'fixtures/test.css' layer(utilities) supports(display: grid) screen and
|
|
(min-width: 600px);
|
|
@import './fixtures/test.css' layer(utilities) supports(display: grid) screen and
|
|
(min-width: 600px);
|
|
@import './fixtures/test' layer(utilities) supports(display: grid) screen and
|
|
(min-width: 600px);
|
|
|
|
@import 'tailwindcss';
|
|
@import 'tailwindcss/theme.css';
|
|
@import 'tailwindcss/theme';
|
|
`),
|
|
).toMatchInlineSnapshot(`
|
|
"@import './fixtures/test.css';
|
|
@import './fixtures/test.css';
|
|
@import './fixtures/test.css';
|
|
@import './fixtures/test.css';
|
|
|
|
@import './fixtures/test.css' screen;
|
|
@import './fixtures/test.css' screen;
|
|
@import './fixtures/test.css' screen;
|
|
@import './fixtures/test.css' screen;
|
|
|
|
@import './fixtures/test.css' supports(display: grid);
|
|
@import './fixtures/test.css' supports(display: grid);
|
|
@import './fixtures/test.css' supports(display: grid);
|
|
@import './fixtures/test.css' supports(display: grid);
|
|
|
|
@import './fixtures/test.css' layer(utilities);
|
|
@import './fixtures/test.css' layer(utilities);
|
|
@import './fixtures/test.css' layer(utilities);
|
|
@import './fixtures/test.css' layer(utilities);
|
|
|
|
@import './fixtures/test.css' theme(inline);
|
|
@import './fixtures/test.css' theme(inline);
|
|
@import './fixtures/test.css' theme(inline);
|
|
@import './fixtures/test.css' theme(inline);
|
|
|
|
@import './fixtures/test.css' layer(utilities) supports(display: grid) screen and (min-width: 600px);
|
|
@import './fixtures/test.css' layer(utilities) supports(display: grid) screen and
|
|
(min-width: 600px);
|
|
@import './fixtures/test.css' layer(utilities) supports(display: grid) screen and
|
|
(min-width: 600px);
|
|
@import './fixtures/test.css' layer(utilities) supports(display: grid) screen and
|
|
(min-width: 600px);
|
|
|
|
@import 'tailwindcss';
|
|
@import 'tailwindcss/theme.css';
|
|
@import 'tailwindcss/theme';"
|
|
`)
|
|
})
|