-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Add simple JS config migration #14639
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.
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
Merged
Changes from all commits
Commits
Show all changes
16 commits
Select commit
Hold shift + click to select a range
cb2e7e7
Add simple JS config migration
philipp-spiess 463d3b8
Section the CSS theme value so that it's nicer to read
philipp-spiess e6acf4a
Add darkMode migration
philipp-spiess 4acd803
Append the generated CSS at the right place
philipp-spiess f377dab
Properly migrate borderRadius to --radius
philipp-spiess a2d8bcb
Add changelog
philipp-spiess 15a785a
Fix unit tests
philipp-spiess 45f7aff
Remove unnecesary async part
philipp-spiess bcba32d
Apply suggestions from code review
philipp-spiess c074f3b
Merge all keys correctly
philipp-spiess 5e26bc8
Fix line breaks by keeping everything a string until it's necessary t…
philipp-spiess 1cc9e6d
Add test to ensure values are correctly merged
philipp-spiess 8d86de6
Upgrade all snapshots
philipp-spiess 7490e11
Don't inject a config into the same stylesheet multiple times
philipp-spiess 1d04ce1
Revert test changes
philipp-spiess d86af92
Add example for not migarting complex configs
philipp-spiess File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
philipp-spiess marked this conversation as resolved.
Show resolved
Hide resolved
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,152 @@ | ||
| import { expect } from 'vitest' | ||
| import { css, json, test, ts } from '../utils' | ||
|
|
||
| test( | ||
| `upgrades a simple JS config file to CSS`, | ||
| { | ||
| fs: { | ||
| 'package.json': json` | ||
| { | ||
| "dependencies": { | ||
| "@tailwindcss/upgrade": "workspace:^" | ||
| } | ||
| } | ||
| `, | ||
| 'tailwind.config.ts': ts` | ||
| import { type Config } from 'tailwindcss' | ||
| import defaultTheme from 'tailwindcss/defaultTheme' | ||
|
|
||
| module.exports = { | ||
| darkMode: 'selector', | ||
| content: ['./src/**/*.{html,js}', './my-app/**/*.{html,js}'], | ||
| theme: { | ||
| boxShadow: { | ||
| sm: '0 2px 6px rgb(15 23 42 / 0.08)', | ||
| }, | ||
| colors: { | ||
| red: { | ||
| 400: '#f87171', | ||
| 500: 'red', | ||
| }, | ||
| }, | ||
| fontSize: { | ||
| xs: ['0.75rem', { lineHeight: '1rem' }], | ||
| sm: ['0.875rem', { lineHeight: '1.5rem' }], | ||
| base: ['1rem', { lineHeight: '2rem' }], | ||
| }, | ||
| extend: { | ||
| colors: { | ||
| red: { | ||
| 500: '#ef4444', | ||
| 600: '#dc2626', | ||
| }, | ||
| }, | ||
| fontFamily: { | ||
| sans: 'Inter, system-ui, sans-serif', | ||
| display: ['Cabinet Grotesk', ...defaultTheme.fontFamily.sans], | ||
| }, | ||
| borderRadius: { | ||
| '4xl': '2rem', | ||
| }, | ||
| }, | ||
| }, | ||
| plugins: [], | ||
| } satisfies Config | ||
| `, | ||
| 'src/input.css': css` | ||
| @tailwind base; | ||
| @tailwind components; | ||
| @tailwind utilities; | ||
| `, | ||
| }, | ||
| }, | ||
| async ({ exec, fs }) => { | ||
| await exec('npx @tailwindcss/upgrade') | ||
|
|
||
| expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(` | ||
| " | ||
| --- src/input.css --- | ||
| @import 'tailwindcss'; | ||
|
|
||
| @source './**/*.{html,js}'; | ||
| @source '../my-app/**/*.{html,js}'; | ||
|
|
||
| @variant dark (&:where(.dark, .dark *)); | ||
|
|
||
| @theme { | ||
| --box-shadow-*: initial; | ||
| --box-shadow-sm: 0 2px 6px rgb(15 23 42 / 0.08); | ||
|
|
||
| --color-*: initial; | ||
| --color-red-400: #f87171; | ||
| --color-red-500: #ef4444; | ||
| --color-red-600: #dc2626; | ||
|
|
||
| --font-size-*: initial; | ||
| --font-size-xs: 0.75rem; | ||
| --font-size-xs--line-height: 1rem; | ||
| --font-size-sm: 0.875rem; | ||
| --font-size-sm--line-height: 1.5rem; | ||
| --font-size-base: 1rem; | ||
| --font-size-base--line-height: 2rem; | ||
|
|
||
| --font-family-sans: Inter, system-ui, sans-serif; | ||
| --font-family-display: Cabinet Grotesk, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; | ||
|
|
||
| --radius-4xl: 2rem; | ||
| } | ||
| " | ||
| `) | ||
|
|
||
| expect((await fs.dumpFiles('tailwind.config.ts')).trim()).toBe('') | ||
| }, | ||
| ) | ||
philipp-spiess marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| test( | ||
| `does not upgrade a complex JS config file to CSS`, | ||
| { | ||
| fs: { | ||
| 'package.json': json` | ||
| { | ||
| "dependencies": { | ||
| "@tailwindcss/upgrade": "workspace:^" | ||
| } | ||
| } | ||
| `, | ||
| 'tailwind.config.ts': ts` | ||
| import { type Config } from 'tailwindcss' | ||
|
|
||
| export default { | ||
| plugins: [function complexConfig() {}], | ||
| } satisfies Config | ||
| `, | ||
| 'src/input.css': css` | ||
| @tailwind base; | ||
| @tailwind components; | ||
| @tailwind utilities; | ||
| `, | ||
| }, | ||
| }, | ||
| async ({ exec, fs }) => { | ||
| await exec('npx @tailwindcss/upgrade') | ||
|
|
||
| expect(await fs.dumpFiles('src/**/*.css')).toMatchInlineSnapshot(` | ||
| " | ||
| --- src/input.css --- | ||
| @import 'tailwindcss'; | ||
| @config '../tailwind.config.ts'; | ||
| " | ||
| `) | ||
|
|
||
| expect(await fs.dumpFiles('tailwind.config.ts')).toMatchInlineSnapshot(` | ||
| " | ||
| --- tailwind.config.ts --- | ||
| import { type Config } from 'tailwindcss' | ||
|
|
||
| export default { | ||
| plugins: [function complexConfig() {}], | ||
| } satisfies Config | ||
| " | ||
| `) | ||
| }, | ||
| ) | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.