Skip to content
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

Upgrade to Tailwind CSS 4 and Vitest 3 #348

Merged
merged 7 commits into from
Jan 24, 2025
Merged

Upgrade to Tailwind CSS 4 and Vitest 3 #348

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f28e6d3
chore: update dependencies to the latest version, only minor version
ixartz Jan 24, 2025
3e904f5
feat: upgrade to Vitest 3
ixartz Jan 24, 2025
a4cc8f8
chore: update dotenv-cli to version 8
ixartz Jan 24, 2025
dd0431d
chore: update package-lock.json file after updating dotenv-cli
ixartz Jan 24, 2025
5ac5331
feat: update to Tailwind CSS v4
ixartz Jan 24, 2025
0a621ab
revert: add back eslint-plugin-jsx-a11y in eslint config
ixartz Jan 24, 2025
70f5a87
fix: apply css classes after upgrading to tailwind css 4
ixartz Jan 24, 2025
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
3 changes: 1 addition & 2 deletions eslint.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import nextPlugin from '@next/eslint-plugin-next';
import jestDom from 'eslint-plugin-jest-dom';
import jsxA11y from 'eslint-plugin-jsx-a11y';
import playwright from 'eslint-plugin-playwright';
import tailwind from 'eslint-plugin-tailwindcss';
import testingLibrary from 'eslint-plugin-testing-library';

export default antfu({
Expand All @@ -25,7 +24,7 @@ export default antfu({
'migrations/**/*',
'next-env.d.ts',
],
}, ...tailwind.configs['flat/recommended'], jsxA11y.flatConfigs.recommended, {
}, jsxA11y.flatConfigs.recommended, {
plugins: {
'@next/next': nextPlugin,
},
Expand Down
5,125 changes: 2,473 additions & 2,652 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

112 changes: 56 additions & 56 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,88 +27,88 @@
"prepare": "husky"
},
"dependencies": {
"@arcjet/next": "^1.0.0-alpha.34",
"@clerk/localizations": "^3.9.0",
"@clerk/nextjs": "^6.9.0",
"@electric-sql/pglite": "^0.2.15",
"@hookform/resolvers": "^3.9.1",
"@arcjet/next": "^1.0.0-beta.1",
"@clerk/localizations": "^3.10.0",
"@clerk/nextjs": "^6.10.2",
"@electric-sql/pglite": "^0.2.16",
"@hookform/resolvers": "^3.10.0",
"@logtail/pino": "^0.5.2",
"@sentry/nextjs": "^8.43.0",
"@spotlightjs/spotlight": "^2.7.0",
"@sentry/nextjs": "^8.51.0",
"@spotlightjs/spotlight": "^2.10.2",
"@t3-oss/env-nextjs": "^0.11.1",
"drizzle-orm": "^0.38.0",
"next": "^15.1.0",
"next-intl": "^3.26.0",
"drizzle-orm": "^0.38.4",
"next": "^15.1.6",
"next-intl": "^3.26.3",
"pg": "^8.13.1",
"pino": "^9.5.0",
"pino": "^9.6.0",
"pino-pretty": "^13.0.0",
"react": "19.0.0",
"react-dom": "19.0.0",
"react-hook-form": "^7.54.0",
"zod": "^3.24.0"
"react-hook-form": "^7.54.2",
"zod": "^3.24.1"
},
"devDependencies": {
"@antfu/eslint-config": "^3.11.2",
"@commitlint/cli": "^19.6.0",
"@antfu/eslint-config": "^3.16.0",
"@commitlint/cli": "^19.6.1",
"@commitlint/config-conventional": "^19.6.0",
"@commitlint/cz-commitlint": "^19.5.0",
"@eslint-react/eslint-plugin": "^1.19.0",
"@faker-js/faker": "^9.3.0",
"@next/bundle-analyzer": "^15.1.0",
"@next/eslint-plugin-next": "^15.1.0",
"@percy/cli": "1.30.4",
"@commitlint/cz-commitlint": "^19.6.1",
"@eslint-react/eslint-plugin": "^1.24.1",
"@faker-js/faker": "^9.4.0",
"@next/bundle-analyzer": "^15.1.6",
"@next/eslint-plugin-next": "^15.1.6",
"@percy/cli": "1.30.6",
"@percy/playwright": "^1.0.7",
"@playwright/test": "^1.49.1",
"@playwright/test": "^1.50.0",
"@semantic-release/changelog": "^6.0.3",
"@semantic-release/git": "^10.0.1",
"@storybook/addon-essentials": "^8.4.7",
"@storybook/addon-interactions": "^8.4.7",
"@storybook/addon-links": "^8.4.7",
"@storybook/addon-onboarding": "^8.4.7",
"@storybook/blocks": "^8.4.7",
"@storybook/nextjs": "^8.4.7",
"@storybook/react": "^8.4.7",
"@storybook/test": "^8.4.7",
"@storybook/test-runner": "^0.20.1",
"@storybook/addon-essentials": "^8.5.1",
"@storybook/addon-interactions": "^8.5.1",
"@storybook/addon-links": "^8.5.1",
"@storybook/addon-onboarding": "^8.5.1",
"@storybook/blocks": "^8.5.1",
"@storybook/nextjs": "^8.5.1",
"@storybook/react": "^8.5.1",
"@storybook/test": "^8.5.1",
"@storybook/test-runner": "^0.21.0",
"@tailwindcss/postcss": "^4.0.0",
"@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.1.0",
"@types/node": "^22.10.1",
"@types/pg": "^8.11.10",
"@types/react": "^19.0.1",
"@testing-library/react": "^16.2.0",
"@types/node": "^22.10.10",
"@types/pg": "^8.11.11",
"@types/react": "^19.0.8",
"@vitejs/plugin-react": "^4.3.4",
"@vitest/coverage-v8": "^2.1.8",
"@vitest/expect": "^2.1.8",
"autoprefixer": "^10.4.20",
"checkly": "^4.15.0",
"@vitest/coverage-v8": "^3.0.4",
"@vitest/expect": "^3.0.4",
"checkly": "^4.18.0",
"commitizen": "^4.3.1",
"cross-env": "^7.0.3",
"cssnano": "^7.0.6",
"dotenv-cli": "^7.4.4",
"drizzle-kit": "^0.30.0",
"eslint": "^9.16.0",
"eslint-plugin-format": "^0.1.3",
"dotenv-cli": "^8.0.0",
"drizzle-kit": "^0.30.2",
"eslint": "^9.18.0",
"eslint-plugin-format": "^1.0.1",
"eslint-plugin-jest-dom": "^5.5.0",
"eslint-plugin-jsx-a11y": "^6.10.2",
"eslint-plugin-playwright": "^2.1.0",
"eslint-plugin-playwright": "^2.2.0",
"eslint-plugin-react-hooks": "^5.1.0",
"eslint-plugin-react-refresh": "^0.4.16",
"eslint-plugin-tailwindcss": "^3.17.5",
"eslint-plugin-react-refresh": "^0.4.18",
"eslint-plugin-tailwindcss": "^3.18.0",
"eslint-plugin-testing-library": "^7.1.1",
"http-server": "^14.1.1",
"husky": "^9.1.7",
"jsdom": "^25.0.1",
"lint-staged": "^15.2.11",
"jsdom": "^26.0.0",
"lint-staged": "^15.4.2",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.49",
"postcss": "^8.5.1",
"postcss-load-config": "^6.0.1",
"rimraf": "^6.0.1",
"semantic-release": "^24.2.0",
"start-server-and-test": "^2.0.8",
"storybook": "^8.4.7",
"tailwindcss": "^3.4.16",
"typescript": "^5.7.2",
"semantic-release": "^24.2.1",
"start-server-and-test": "^2.0.10",
"storybook": "^8.5.1",
"tailwindcss": "^4.0.0",
"typescript": "^5.7.3",
"vite-tsconfig-paths": "^5.1.4",
"vitest": "^2.1.8",
"vitest": "^3.0.4",
"vitest-fail-on-console": "^0.7.1"
},
"config": {
Expand Down
11 changes: 0 additions & 11 deletions postcss.config.js
View file
Open in desktop

This file was deleted.

7 changes: 7 additions & 0 deletions postcss.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
const config = {
plugins: {
'@tailwindcss/postcss': {},
},
};

export default config;
4 changes: 2 additions & 2 deletions src/components/CounterForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export const CounterForm = () => {
<input
id="increment"
type="number"
className="ml-2 w-32 appearance-none rounded border px-2 py-1 text-sm leading-tight text-gray-700 focus:outline-none focus:ring focus:ring-blue-300/50"
className="ml-2 w-32 appearance-none rounded-sm border border-gray-200 px-2 py-1 text-sm leading-tight text-gray-700 focus:outline-hidden focus:ring-3 focus:ring-blue-300/50"
{...form.register('increment')}
/>
</label>
Expand All @@ -51,7 +51,7 @@ export const CounterForm = () => {

<div className="mt-2">
<button
className="rounded bg-blue-500 px-5 py-1 font-bold text-white hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300/50 disabled:pointer-events-none disabled:opacity-50"
className="rounded-sm bg-blue-500 px-5 py-1 font-bold text-white hover:bg-blue-600 focus:outline-hidden focus:ring-3 focus:ring-blue-300/50 disabled:pointer-events-none disabled:opacity-50"
type="submit"
disabled={form.formState.isSubmitting}
>
Expand Down
2 changes: 1 addition & 1 deletion src/components/LocaleSwitcher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const LocaleSwitcher = () => {
<select
defaultValue={locale}
onChange={handleChange}
className="border border-gray-300 font-medium focus:outline-none focus-visible:ring"
className="border border-gray-300 font-medium focus:outline-hidden focus-visible:ring-3"
aria-label="lang-switcher"
>
{routing.locales.map(elt => (
Expand Down
4 changes: 1 addition & 3 deletions src/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'tailwindcss';
9 changes: 0 additions & 9 deletions tailwind.config.ts
View file
Open in desktop

This file was deleted.

Loading