diff --git a/integrations/upgrade/index.test.ts b/integrations/upgrade/index.test.ts index 5b29f30f7..a833754e5 100644 --- a/integrations/upgrade/index.test.ts +++ b/integrations/upgrade/index.test.ts @@ -292,18 +292,17 @@ test( }, }, async ({ fs, exec }) => { - await exec('npx @tailwindcss/upgrade') + await exec('npx @tailwindcss/upgrade --force') await fs.expectFileToContain( 'src/index.css', css` @import 'tailwindcss'; - @import './utilities.css' layer(utilities); - @import './utilities.twupgrade.css'; + @import './utilities.css'; `, ) - await fs.expectFileNotToContain( + await fs.expectFileToContain( 'src/utilities.css', css` @utility no-scrollbar { @@ -315,19 +314,6 @@ test( } `, ) - - await fs.expectFileNotToContain( - 'src/utilities.twupgrade.css', - css` - @utility no-scrollbar { - &::-webkit-scrollbar { - display: none; - } - -ms-overflow-style: none; - scrollbar-width: none; - } - `, - ) }, ) @@ -412,42 +398,73 @@ test( expect(await fs.read('src/index.css')).toMatchInlineSnapshot(` "@import 'tailwindcss/utilities' layer(utilities); @import './a.css' layer(utilities); - @import './a.utilities.css'; - @import './b.css';" + @import "./a.utilities.css"; + @import './b.css' layer(components); + @import "./b.utilities.css"; + @import './c.css' layer(utilities); + @import "./c.utilities.css";" `) expect(await fs.read('src/a.css')).toMatchInlineSnapshot(`"@import './utilities.css'"`) + expect(await fs.read('src/a.utilities.css')).toMatchInlineSnapshot(` + "@import "./utilities.utilities.css"; + @utility foo-from-a { + color: red; + }" + `) + expect(await fs.read('src/utilities.css')).toMatchInlineSnapshot(` "#foo { --keep: me; }" `) - expect(await fs.read('src/a.utilities.css')).toMatchInlineSnapshot(` - " - @utility foo-from-import { + expect(await fs.read('src/utilities.utilities.css')).toMatchInlineSnapshot(` + "@utility foo-from-import { color: blue; - } - - @utility foo-from-a { - color: red; }" `) - expect(await fs.read('src/b.css')).toMatchInlineSnapshot(` - "@utility bar-from-import { - color: blue; - } + expect(await fs.read('src/b.css')).toMatchInlineSnapshot(`""`) + expect(await fs.read('src/b.utilities.css')).toMatchInlineSnapshot(` + "@import "./components.css"; @utility bar-from-b { color: red; }" `) - expect(await fs.read('src/c.css')).toMatchInlineSnapshot() - expect(await fs.read('src/c-2.css')).toMatchInlineSnapshot() - expect(await fs.read('src/c.utilities.css')).toMatchInlineSnapshot() - // await exec('npx @tailwindcss/cli -i src/index.css -o out.css') + expect(await fs.read('src/c.css')).toMatchInlineSnapshot(` + "@import './c-2.css' layer(utilities); + .baz-from-c { + color: green; + }" + `) + expect(await fs.read('src/c.utilities.css')).toMatchInlineSnapshot( + `"@import "./c-2.utilities.css""`, + ) - // expect(await fs.read('out.css')).toMatchInlineSnapshot() + expect(await fs.read('src/c-2.css')).toMatchInlineSnapshot(` + "@import './c-3.css'; + #baz { + --keep: me; + }" + `) + expect(await fs.read('src/c-2.utilities.css')).toMatchInlineSnapshot(` + "@import "./c-3.utilities.css"; + @utility baz-from-import { + color: yellow; + }" + `) + + expect(await fs.read('src/c-3.css')).toMatchInlineSnapshot(` + "#baz { + --keep: me; + }" + `) + expect(await fs.read('src/c-3.utilities.css')).toMatchInlineSnapshot(` + "@utility baz-from-import { + color: yellow; + }" + `) }, ) @@ -510,42 +527,48 @@ test( expect(await fs.read('src/index.css')).toMatchInlineSnapshot(` "@import 'tailwindcss/utilities' layer(utilities); @import './a.1.css' layer(utilities); - @import './a.1.utilities.css';" + @import "./a.1.utilities.css";" `) expect(await fs.read('src/a.1.css')).toMatchInlineSnapshot(` "@import './a.2.css'; + #from-a-1 { --keep: me; }" `) expect(await fs.read('src/a.1.utilities.css')).toMatchInlineSnapshot(` - " - - @utility from-a-3 { - color: blue; - } - @utility from-a-2 { - color: green; - } + "@import "./a.2.utilities.css"; @utility from-a-1 { color: red; }" `) expect(await fs.read('src/a.2.css')).toMatchInlineSnapshot(` "@import './a.3.css'; + #from-a-2 { --keep: me; }" `) + expect(await fs.read('src/a.2.utilities.css')).toMatchInlineSnapshot(` + "@import "./a.3.utilities.css"; + @utility from-a-2 { + color: green; + }" + `) expect(await fs.read('src/a.3.css')).toMatchInlineSnapshot(` "#from-a-3 { --keep: me; }" `) + expect(await fs.read('src/a.3.utilities.css')).toMatchInlineSnapshot(` + "@utility from-a-3 { + color: blue; + }" + `) }, ) -test.debug( +test( 'deeply nested imports', { fs: { @@ -614,45 +637,58 @@ test.debug( expect(await fs.read('src/index.css')).toMatchInlineSnapshot(` "@import 'tailwindcss/utilities' layer(utilities); - @import './a.1.css' layer(utilities);" + @import './a.1.css' layer(utilities); + @import "./a.1.utilities.css";" `) expect(await fs.read('src/a.1.css')).toMatchInlineSnapshot(` "@import './a.2.css' layer(utilities); - @import "./a.2.utilities.css"; + #from-a-1 { --keep: me; } + .from-a-1 { color: red; }" `) + expect(await fs.read('src/a.1.utilities.css')).toMatchInlineSnapshot( + `"@import "./a.2.utilities.css""`, + ) expect(await fs.read('src/a.2.css')).toMatchInlineSnapshot(` "@import './a.3.css'; + #from-a-2 { --keep: me; }" `) expect(await fs.read('src/a.2.utilities.css')).toMatchInlineSnapshot(` - "@utility from-a-4 { - color: blue; - } - @utility from-a-3 { - color: blue; - } + "@import "./a.3.utilities.css"; @utility from-a-2 { color: green; }" `) expect(await fs.read('src/a.3.css')).toMatchInlineSnapshot(` "@import './a.4.css'; + #from-a-3 { --keep: me; }" `) + expect(await fs.read('src/a.3.utilities.css')).toMatchInlineSnapshot(` + "@import "./a.4.utilities.css"; + @utility from-a-3 { + color: blue; + }" + `) expect(await fs.read('src/a.4.css')).toMatchInlineSnapshot(` "#from-a-4 { --keep: me; }" `) + expect(await fs.read('src/a.4.utilities.css')).toMatchInlineSnapshot(` + "@utility from-a-4 { + color: blue; + }" + `) }, )