Skip to content

Detect and migrate static plugin usages #14648

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
philipp-spiess merged 14 commits into from
Oct 14, 2024
Merged

Detect and migrate static plugin usages #14648

Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
be3a52e
Detect static plugins in the JS config and migrate it to CSS
philipp-spiess Oct 11, 2024
dc793f1
Parse all ESM import types
philipp-spiess Oct 11, 2024
c1df729
Add a test case with inline plugins
philipp-spiess Oct 11, 2024
d07eb80
Remove leftover code
philipp-spiess Oct 11, 2024
5f12fa5
Improve test harness
philipp-spiess Oct 11, 2024
28ad885
Add support for reading CJS imports
philipp-spiess Oct 14, 2024
7bfd701
Update CJS tests
philipp-spiess Oct 14, 2024
8ab196e
Update comment
philipp-spiess Oct 14, 2024
c1bcd2c
Support `plugin: [require('my-pluign')]`
philipp-spiess Oct 14, 2024
e2730eb
Fix typo
philipp-spiess Oct 14, 2024
c68258f
Add test for plugins with options
philipp-spiess Oct 14, 2024
03d6f3c
Update tests
philipp-spiess Oct 14, 2024
652dd6a
Link PR to change log entry
philipp-spiess Oct 14, 2024
66417a8
Update snapshots
philipp-spiess Oct 14, 2024
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
Prev Previous commit
Next Next commit
Update tests
  • Loading branch information
@philipp-spiess
philipp-spiess committed Oct 14, 2024
commit 03d6f3cf6abc70f098d93510c85e4f3294ca8734
108 changes: 43 additions & 65 deletions integrations/upgrade/js-config.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,15 @@ test(
'package.json': json`
{
"dependencies": {
"@tailwindcss/typography": "^0.5.15",
"@tailwindcss/upgrade": "workspace:^"
}
}
`,
'tailwind.config.ts': ts`
import { type Config } from 'tailwindcss'
import defaultTheme from 'tailwindcss/defaultTheme'
import typography from '@tailwindcss/typography'
import customPlugin from './custom-plugin'

export default {
module.exports = {
darkMode: 'selector',
content: ['./src/**/*.{html,js}', './my-app/**/*.{html,js}'],
theme: {
Expand Down Expand Up @@ -53,15 +50,9 @@ test(
},
},
},
plugins: [typography, customPlugin],
plugins: [],
} satisfies Config
`,
'custom-plugin.js': ts`
export default function ({ addVariant }) {
addVariant('inverted', '@media (inverted-colors: inverted)')
addVariant('hocus', ['&:focus', '&:hover'])
}
`,
'src/input.css': css`
@tailwind base;
@tailwind components;
Expand All @@ -80,9 +71,6 @@ test(
@source './**/*.{html,js}';
@source '../my-app/**/*.{html,js}';

@plugin '@tailwindcss/typography';
@plugin '../custom-plugin';

@variant dark (&:where(.dark, .dark *));

@theme {
Expand Down Expand Up @@ -115,29 +103,32 @@ test(
)

test(
'does not upgrade JS config files with functions in the theme config',
'upgrades JS config files with plugins',
{
fs: {
'package.json': json`
{
"dependencies": {
"@tailwindcss/typography": "^0.5.15",
"@tailwindcss/upgrade": "workspace:^"
}
}
`,
'tailwind.config.ts': ts`
import { type Config } from 'tailwindcss'
import typography from '@tailwindcss/typography'
import customPlugin from './custom-plugin'

export default {
theme: {
extend: {
colors: ({ colors }) => ({
gray: colors.neutral,
}),
},
},
plugins: [typography, customPlugin],
} satisfies Config
`,
'custom-plugin.js': ts`
export default function ({ addVariant }) {
addVariant('inverted', '@media (inverted-colors: inverted)')
addVariant('hocus', ['&:focus', '&:hover'])
}
`,
'src/input.css': css`
@tailwind base;
@tailwind components;
Expand All @@ -148,7 +139,7 @@ test(
async ({ exec, fs }) => {
await exec('npx @tailwindcss/upgrade')

expect(await fs.dumpFiles('src/**/*.{css,ts}')).toMatchInlineSnapshot(`
expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
"
--- src/input.css ---
@import 'tailwindcss';
Expand All @@ -160,23 +151,19 @@ test(
"
--- tailwind.config.ts ---
import { type Config } from 'tailwindcss'
import typography from '@tailwindcss/typography'
import customPlugin from './custom-plugin'

export default {
theme: {
extend: {
colors: ({ colors }) => ({
gray: colors.neutral,
}),
},
},
plugins: [typography, customPlugin],
} satisfies Config
"
`)
},
)

test(
'does not upgrade JS config files with theme keys contributed to by plugins in the theme config',
'does not upgrade JS config files with functions in the theme config',
{
fs: {
'package.json': json`
Expand All @@ -191,13 +178,10 @@ test(

export default {
theme: {
typography: {
DEFAULT: {
css: {
'--tw-prose-body': 'red',
color: 'var(--tw-prose-body)',
},
},
extend: {
colors: ({ colors }) => ({
gray: colors.neutral,
}),
},
},
} satisfies Config
Expand All @@ -206,14 +190,13 @@ test(
@tailwind base;
@tailwind components;
@tailwind utilities;
@config '../tailwind.config.ts';
`,
},
},
async ({ exec, fs }) => {
await exec('npx @tailwindcss/upgrade')

expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(`
expect(await fs.dumpFiles('src/**/*.{css,ts}')).toMatchInlineSnapshot(`
"
--- src/input.css ---
@import 'tailwindcss';
Expand All @@ -228,13 +211,10 @@ test(

export default {
theme: {
typography: {
DEFAULT: {
css: {
'--tw-prose-body': 'red',
color: 'var(--tw-prose-body)',
},
},
extend: {
colors: ({ colors }) => ({
gray: colors.neutral,
}),
},
},
} satisfies Config
Expand All @@ -244,36 +224,37 @@ test(
)

test(
'does not upgrade JS config files with plugins',
'does not upgrade JS config files with theme keys contributed to by plugins in the theme config',
{
fs: {
'package.json': json`
{
"dependencies": {
"@tailwindcss/typography": "^0.5.15",
"@tailwindcss/upgrade": "workspace:^"
}
}
`,
'tailwind.config.ts': ts`
import { type Config } from 'tailwindcss'
import typography from '@tailwindcss/typography'
import customPlugin from './custom-plugin'

export default {
plugins: [typography, customPlugin],
theme: {
typography: {
DEFAULT: {
css: {
'--tw-prose-body': 'red',
color: 'var(--tw-prose-body)',
},
},
},
},
} satisfies Config
`,
'custom-plugin.js': ts`
export default function ({ addVariant }) {
addVariant('inverted', '@media (inverted-colors: inverted)')
addVariant('hocus', ['&:focus', '&:hover'])
}
`,
'src/input.css': css`
@tailwind base;
@tailwind components;
@tailwind utilities;
@config '../tailwind.config.ts';
`,
},
},
Expand All @@ -290,14 +271,11 @@ test(

expect(await fs.dumpFiles('tailwind.config.ts')).toMatchInlineSnapshot(`
"
--- tailwind.config.ts ---
import { type Config } from 'tailwindcss'
import typography from '@tailwindcss/typography'
import customPlugin from './custom-plugin'
--- src/input.css ---
@import 'tailwindcss';

export default {
plugins: [typography, customPlugin],
} satisfies Config
@plugin '@tailwindcss/typography';
@plugin '../custom-plugin';
"
`)
},
Expand Down