Skip to content

Commit 7b79b18

Browse files
SutuSebastianSutuSebastian
authored
1559: Can't resolve 'tailwindcss/version.js' (#1566)
* refactor: remove `patch` command from CLI and related setup processes - Add `version` field to configuration schema and documentation, specifying the Tailwind CSS version to use (default: 4) * chore: update Flowbite React config to include Tailwind CSS version - more robust .json import * chore: improve JSDoc * chore: fix tests - add `ThemeConfig` in apps/[storybook, web] - enforce schema `version` to [3,4] * feat(cli): add syncTailwindVersion utility and integrate into build and dev commands * feat(docs): add dark mode option to configuration examples in customization documentation * fix(Datepicker): switch hardcoded color `cyan` -> `primary` * fix(modal): update button color from `failure` to `red` * regen lock file * up bun version * regen lock file * feat(install): enhance package installation logic to upgrade to latest version if below 0.11.x * refactor(cli): replace getPackageJson with getModulePackageJson * chore(install): remove redundant comment * chore: improve DX and cleanup: - repair `.flowbite-react/config.json` config file on save/read - check if `flowbite-react` is installed when `npx flowbite-react@latest init` - bump the version to latest if below `0.11.x` - remove redundant `{ flag: "w" }` in `fs.writeFile` * refactor(cli): auto generate the `ThemeInit` component in `.flwobite-react/init.tsx` - improve `flowbite-react dev` performance by running once then listening for changes - check and regen `.gitignore` file if content integrity is not according to latest changes - expose `flowbite-react/store` import paths * fix: typecheck * fix: typecheck $2 - do not ignore `.flowbite-react/init.tsx` file * format code * refactor(cli): update `setup-init` parsing: - remove typescript related content and make it portable (jsx/tsx) - adjust init file path handling to support both .tsx and .jsx extensions - compare AST nodes for content changes * fix lint * feat(cli): add warning for custom config values in setupConfig function - notify users to include <ThemeInit /> at the root level if custom dark, prefix, or version values are detected in the configuration file * add changeset * update dark mode and prefix documentation: - replace ThemeConfig with ThemeInit component for syncing runtime with custom configuration - clarify steps for disabling dark mode and using custom prefixes * update changelog * feat(theme): add Tailwind CSS version support in theme mode handling and fix dark theme toggle class in Tailwind CSS v4 - Introduced `version` parameter to `buildClassList` and `ThemeModeScript` for Tailwind CSS versioning. - Updated dark mode class handling based on the specified version in `setModeInDOM` and related functions. - Adjusted tests to verify prefix behavior according to the Tailwind CSS version. * fix(config): update schema path and export config in `.flowbite-react/init.(jsx|tsx)` * update changelog * fix(getThemeModeScript): wrap classsName in proper string tags * test(theme): add tests for `getThemeModeScript` function * expose all `/store` import paths
1 parent 134b3eb commit 7b79b18

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+832
-490
lines changed

‎.changeset/tricky-planes-shake.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
"flowbite-react": minor
3+
---
4+
5+
# Breaking changes
6+
7+
- removed `flowbite-react patch` CLI command
8+
9+
## Changes
10+
11+
- `flowbite-react/.gitignore`, `flowbite-react/config.json` self manages, regenerates and repairs
12+
- new generated file `init.(jsx|tsx)` in `.flowbite-react/` directory that syncs up values from `config.json` that also are needed in React app runtime (similar to how a React context works)
13+
- synced on CLI commands: `init`, `build`, `dev`, `register`
14+
- If you have custom configuration in `.flowbite-react/config.json` (different `dark`/`prefix`/`version` values), you must render `<ThemeInit />` at the root level of your app to sync runtime with node config values
15+
- notify users to include `<ThemeInit />` at the root level if custom `dark`, `prefix`, or `version` values are detected in the configuration file
16+
- expose `flowbite-react/store` import path
17+
- check if `flowbite-react` is installed when `npx flowbite-react@latest init`
18+
- bump the version to latest if below `0.11.x`
19+
- remove redundant `{ flag: "w" }` in `fs.writeFile`
20+
- update `dark-mode.md` and `prefix.md` documentation to reflect the `<ThemeInit />` changes
21+
- add Tailwind CSS version support in theme mode handling and fix dark theme toggle class in Tailwind CSS v4
22+
23+
## Migration Guide
24+
25+
1. Remove `flowbite-react patch` from your `package.json`
26+
27+
```diff
28+
{
29+
"scripts": {
30+
- "postinstall": "flowbite-react patch"
31+
}
32+
}
33+
```
34+
35+
2. Add `<ThemeInit />` (import from `.flowbite-react/init.(jsx|tsx)`) at the root level of your app if you have custom configuration in `.flowbite-react/config.json` (different `dark`/`prefix`/`version` values).

‎.github/actions/setup/action.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ runs:
77
- name: Setup Bun
88
uses: oven-sh/setup-bun@v2
99
with:
10-
bun-version: 1.2.2
10+
bun-version: 1.2.18
1111

1212
- name: Setup Node
1313
uses: actions/setup-node@v4

‎apps/storybook/.flowbite-react/config.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
{
2-
"$schema": "../../../node_modules/flowbite-react/schema.json",
2+
"$schema": "https://unpkg.com/flowbite-react/schema.json",
33
"components": [],
44
"dark": true,
55
"path": "src/components",
66
"prefix": "",
77
"rsc": true,
8-
"tsx": true
8+
"tsx": true,
9+
"version": 3
910
}

‎apps/storybook/.flowbite-react/init.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/* eslint-disable */
2+
// @ts-nocheck
3+
// biome-ignore-all lint: auto-generated file
4+
5+
// This file is auto-generated by the flowbite-react CLI.
6+
// Do not edit this file directly.
7+
// Instead, edit the .flowbite-react/config.json file.
8+
9+
import { StoreInit } from "flowbite-react/store/init";
10+
import React from "react";
11+
12+
export const config = {
13+
dark: true,
14+
prefix: "",
15+
version: 3,
16+
};
17+
18+
export function ThemeInit() {
19+
return <StoreInit {...config} />;
20+
}
21+
22+
ThemeInit.displayName = "ThemeInit";

‎apps/storybook/.storybook/preview.ts renamed to ‎apps/storybook/.storybook/preview.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { withThemeByClassName } from "@storybook/addon-themes";
2-
import type { Preview } from "@storybook/react";
2+
import type { Decorator, Preview } from "@storybook/react";
3+
import React from "react";
4+
import { ThemeInit } from "../.flowbite-react/init";
35

46
import "./style.css";
57

@@ -17,7 +19,13 @@ const preview: Preview = {
1719
},
1820
};
1921

20-
export const decorators = [
22+
export const decorators: Decorator[] = [
23+
(Story) => (
24+
<>
25+
<ThemeInit />
26+
<Story />
27+
</>
28+
),
2129
withThemeByClassName({
2230
themes: {
2331
light: "light",

‎apps/storybook/tsconfig.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,6 @@
2121
"noUnusedParameters": true,
2222
"noFallthroughCasesInSwitch": true
2323
},
24-
"include": ["src"]
24+
"include": ["**/*.ts", "**/*.tsx"],
25+
"exclude": ["node_modules", "storybook-static"]
2526
}

‎apps/web/.flowbite-react/config.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
{
2-
"$schema": "../../../node_modules/flowbite-react/schema.json",
2+
"$schema": "https://unpkg.com/flowbite-react/schema.json",
33
"components": [],
44
"dark": true,
55
"path": "components",
66
"prefix": "",
77
"rsc": true,
8-
"tsx": true
8+
"tsx": true,
9+
"version": 3
910
}

‎apps/web/.flowbite-react/init.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/* eslint-disable */
2+
// @ts-nocheck
3+
// biome-ignore-all lint: auto-generated file
4+
5+
// This file is auto-generated by the flowbite-react CLI.
6+
// Do not edit this file directly.
7+
// Instead, edit the .flowbite-react/config.json file.
8+
9+
import { StoreInit } from "flowbite-react/store/init";
10+
import React from "react";
11+
12+
export const config = {
13+
dark: true,
14+
prefix: "",
15+
version: 3,
16+
};
17+
18+
export function ThemeInit() {
19+
return <StoreInit {...config} />;
20+
}
21+
22+
ThemeInit.displayName = "ThemeInit";

‎apps/web/app/layout.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Inter as InterFont } from "next/font/google";
33
import type { Metadata, Viewport } from "next/types";
44
import type { PropsWithChildren } from "react";
55
import { FathomScript } from "~/components/fathom-script";
6+
import { ThemeInit } from "../.flowbite-react/init";
67

78
import "~/styles/globals.css";
89

@@ -60,6 +61,7 @@ export default function RootLayout({ children }: PropsWithChildren) {
6061
<ThemeModeScript />
6162
</head>
6263
<body className="bg-white text-gray-600 antialiased dark:bg-gray-900 dark:text-gray-400">
64+
<ThemeInit />
6365
{children}
6466
<FathomScript />
6567
</body>

‎apps/web/content/docs/customize/config.mdx

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,8 @@ The configuration file follows this JSON Schema:
4040
},
4141
"prefix": {
4242
"description": "Optional prefix to apply to all Tailwind CSS classes",
43-
"type": "string"
43+
"type": "string",
44+
"default": ""
4445
},
4546
"rsc": {
4647
"description": "Whether to include the 'use client' directive for React Server Components",
@@ -51,9 +52,15 @@ The configuration file follows this JSON Schema:
5152
"description": "Whether to use TypeScript (.tsx) or JavaScript (.jsx) for component creation",
5253
"type": "boolean",
5354
"default": true
55+
},
56+
"version": {
57+
"description": "The version of Tailwind CSS to use",
58+
"type": "number",
59+
"enum": [3, 4],
60+
"default": 4
5461
}
5562
},
56-
"required": ["components", "dark", "path", "prefix", "rsc", "tsx"]
63+
"required": ["components", "dark", "path", "prefix", "rsc", "tsx", "version"]
5764
}
5865
```
5966

@@ -101,6 +108,13 @@ For detailed instructions on configuring and using prefixes, see the [Prefix](/d
101108
- Default: `true`
102109
- Description: Whether to use TypeScript (.tsx) or JavaScript (.jsx) for component creation. When set to `false`, components will be created with .jsx extension.
103110

111+
#### `version`
112+
113+
- Type: `number`
114+
- Options: `3`, `4`
115+
- Default: `4`
116+
- Description: The version of Tailwind CSS to use.
117+
104118
## Automatic Class Generation
105119

106120
The automatic class generation system works in two modes:
@@ -120,10 +134,12 @@ Example config for automatic mode:
120134
{
121135
"$schema": "https://unpkg.com/flowbite-react/schema.json",
122136
"components": [],
137+
"dark": true,
123138
"path": "src/components",
124139
"prefix": "",
125140
"rsc": true,
126-
"tsx": true
141+
"tsx": true,
142+
"version": 4
127143
}
128144
```
129145

@@ -142,10 +158,12 @@ Example config for manual mode:
142158
{
143159
"$schema": "https://unpkg.com/flowbite-react/schema.json",
144160
"components": ["Button", "Card", "Modal"],
161+
"dark": true,
145162
"path": "src/components",
146163
"prefix": "",
147164
"rsc": true,
148-
"tsx": true
165+
"tsx": true,
166+
"version": 4
149167
}
150168
```
151169

0 commit comments

Comments
 (0)