mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
ceae1dbdfb
When CSS exists between two tailwind directives, then the CSS will be
wrapped in an `@layer` to ensure it all ends up in the correct location
in the final CSS file.
However, if the only thing between two tailwind directives is a comment,
then the comment will also be wrapped in an `@layer` directive.
E.g.:
```css
@tailwind base;
/* This is a comment */
@tailwind components;
/* This is another comment */
@tailwind utilities;
```
Results in:
```css
@import "tailwindcss";
@layer base {
/* This is a comment */
}
@layer components {
/* This is another comment */
}
```
In this case, the layers don't matter, so this can be simplified to:
```css
@import "tailwindcss";
/* This is a comment */
/* This is another comment */
```
104 lines
1.7 KiB
TypeScript
104 lines
1.7 KiB
TypeScript
import dedent from 'dedent'
|
|
import postcss from 'postcss'
|
|
import { expect, it } from 'vitest'
|
|
import { formatNodes } from './format-nodes'
|
|
import { migrateMissingLayers } from './migrate-missing-layers'
|
|
|
|
const css = dedent
|
|
|
|
function migrate(input: string) {
|
|
return postcss()
|
|
.use(migrateMissingLayers())
|
|
.use(formatNodes())
|
|
.process(input, { from: expect.getState().testPath })
|
|
.then((result) => result.css)
|
|
}
|
|
|
|
it('should not migrate already migrated `@import` at-rules', async () => {
|
|
expect(
|
|
await migrate(css`
|
|
@import 'tailwindcss';
|
|
`),
|
|
).toMatchInlineSnapshot(`"@import 'tailwindcss';"`)
|
|
})
|
|
|
|
it('should not wrap comments in a layer, if they are the only nodes', async () => {
|
|
expect(
|
|
await migrate(css`
|
|
@tailwind base;
|
|
|
|
/* BASE */
|
|
|
|
@tailwind components;
|
|
|
|
/* COMPONENTS */
|
|
|
|
@tailwind utilities;
|
|
|
|
/** UTILITIES */
|
|
/** - Another comment */
|
|
`),
|
|
).toMatchInlineSnapshot(`
|
|
"@tailwind base;
|
|
|
|
/* BASE */
|
|
|
|
@tailwind components;
|
|
|
|
/* COMPONENTS */
|
|
|
|
@tailwind utilities;
|
|
|
|
/** UTILITIES */
|
|
/** - Another comment */"
|
|
`)
|
|
})
|
|
|
|
it('should migrate rules between tailwind directives', async () => {
|
|
expect(
|
|
await migrate(css`
|
|
@tailwind base;
|
|
|
|
.base {
|
|
}
|
|
|
|
@tailwind components;
|
|
|
|
.component-a {
|
|
}
|
|
.component-b {
|
|
}
|
|
|
|
@tailwind utilities;
|
|
|
|
.utility-a {
|
|
}
|
|
.utility-b {
|
|
}
|
|
`),
|
|
).toMatchInlineSnapshot(`
|
|
"@tailwind base;
|
|
|
|
@layer base {
|
|
.base {
|
|
}
|
|
}
|
|
|
|
@tailwind components;
|
|
|
|
@layer components {
|
|
.component-a {
|
|
}
|
|
.component-b {
|
|
}
|
|
}
|
|
|
|
@tailwind utilities;
|
|
|
|
.utility-a {
|
|
}
|
|
.utility-b {
|
|
}"
|
|
`)
|
|
})
|