Skip to content

Commit e512187

Browse files
mathieusouflismathieusouflis
committed
fix(version14_ui): wire component styles.css, add missing ark-ui dep
Scaffolded projects installed @version14/ui and typechecked fine, but nothing ever imported the package's precompiled CSS, so every component rendered unstyled. Now injected directly by version14_ui into the app's real entry point (src/main.tsx or src/app/layout.tsx), independent of which styling engine is chosen, since panda_css previously only wired fonts.css and only when Panda was picked. Also adds the missing @ark-ui/react dependency (required by every component, previously relying on implicit peer auto-install), bumps @version14/ui to 0.8.0 (which fixes the published package itself missing dist/styles.css) and @pandacss/dev to ^1.11.4, replaces the inert V14Example.tsx placeholder with a real Button import, and adds test-flow fixtures for Next.js and non-Panda styling — the combination that exposed this bug was never covered before.
1 parent c937f74 commit e512187

10 files changed

Lines changed: 183 additions & 15 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,35 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77

88
---
99

10+
## 0.8.1
11+
12+
### Fixed
13+
- `version14_ui` never wired up `@version14/ui/styles.css` — the component
14+
library installed and typechecked fine, but nothing imported its
15+
precompiled CSS, so every scaffolded component rendered unstyled
16+
regardless of which styling engine (Tailwind, CSS Modules, Panda, or none)
17+
was picked. The import is now injected directly into the app's real entry
18+
point (`src/main.tsx` for `react_app`, `src/app/layout.tsx` for
19+
`nextjs_base`) by `version14_ui` itself, so it no longer depends on
20+
`panda_css` having run.
21+
- `version14_ui` never added `@ark-ui/react` as a dependency even though
22+
every `@version14/ui` component wraps an Ark UI primitive at runtime and
23+
in its type declarations — added explicitly, matching the `ark_ui`
24+
generator's own convention.
25+
- Bumped the `@version14/ui` pin to `0.8.0`, which fixes the published
26+
package itself missing `dist/styles.css` from its npm tarball (present in
27+
`0.7.2` and earlier), and `@pandacss/dev` to `^1.11.4` to match its new
28+
peer range.
29+
- `V14Example.tsx` now actually renders `Button` imported from
30+
`@version14/ui/button` instead of static placeholder text, demonstrating
31+
the library's per-component subpath imports.
32+
- Added two `tools/test-flow` fixtures covering `version14_ui` on Next.js
33+
and on a non-Panda styling engine — the styles-import bug was invisible to
34+
the previous test coverage, which only ever combined `version14_ui` with
35+
`panda-css` on React+Vite.
36+
37+
---
38+
1039
## 0.6.0
1140

1241
### Added

‎docs/contributor/generators/panda_css.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ Sets up Panda CSS v1 with a config file. Registers `panda codegen` as a `prepare
99
| Field | Value |
1010
|-------|-------|
1111
| Name | `panda_css` |
12-
| Version | `0.4.0` |
12+
| Version | `0.4.1` |
1313
| Package | `generators/panda_css` |
1414

1515
---

‎docs/contributor/generators/version14_ui.md‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ Adds `@version14/ui` — the company's WIP component library built with Panda CS
99
| Field | Value |
1010
|-------|-------|
1111
| Name | `version14_ui` |
12-
| Version | `0.2.1` |
12+
| Version | `0.4.0` |
1313
| Package | `generators/version14_ui` |
1414

1515
---
@@ -32,21 +32,26 @@ None.
3232

3333
| Path | Description |
3434
|------|-------------|
35-
| `src/components/V14Example.tsx` | Example component using `@version14/ui` |
35+
| `src/components/V14Example.tsx` | Renders `Button` imported from `@version14/ui/button`, demonstrating the per-component subpath import |
3636

3737
Also merges into:
3838

3939
| Path | Keys added / updated |
4040
|------|---------------------|
41-
| `package.json` | `dependencies`: `@version14/ui@latest` |
41+
| `package.json` | `dependencies`: `@version14/ui@0.8.0`, `@ark-ui/react@^5.37.2` |
42+
43+
`@ark-ui/react` is a required peer of `@version14/ui` (every component wraps an Ark UI primitive), so it's added explicitly here rather than relying on the package manager to auto-install peers.
44+
45+
Also injects `import "@version14/ui/styles.css";` into the app's real entry point — `src/main.tsx` when `react_app` ran, `src/app/layout.tsx` when `nextjs_base` ran. This is done here rather than in `panda_css` because the component stylesheet is required no matter which styling engine (Tailwind, CSS Modules, Panda, or none) the project uses; `panda_css`'s own `injectV14Fonts`/`injectV14Preset` only run when Panda is picked as the styling engine, and only wire the optional font faces and preset, not the component CSS itself.
4246

4347
---
4448

4549
## Validators
4650

4751
| Check | Type | Passes when |
4852
|-------|------|-------------|
49-
| `src/components/V14Example.tsx` | `file_exists` | File is present after generation |
53+
| `dependencies.@version14/ui` | `json_key_exists` | Key is present in `package.json` |
54+
| `dependencies.@ark-ui/react` | `json_key_exists` | Key is present in `package.json` |
5055

5156
---
5257

‎generators/panda_css/generator.go‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ func (g *Generator) Generate(ctx *dotapi.Context) error {
2929
if err := ctx.State.UpdateJSON("package.json", func(d *state.JSONDoc) error {
3030
d.Merge(map[string]interface{}{
3131
"devDependencies": map[string]interface{}{
32-
"@pandacss/dev": "^1.11.1",
32+
"@pandacss/dev": "^1.11.4",
3333
},
3434
})
3535
prepare := "panda codegen"

‎generators/panda_css/manifest.go‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import "github.com/version14/dot/pkg/dotapi"
44

55
var Manifest = dotapi.Manifest{
66
Name: "panda_css",
7-
Version: "0.4.0",
7+
Version: "0.4.1",
88
Description: "Panda CSS v1 with styled-system code generation",
99
DependsOn: []string{"typescript_base"},
1010
ConflictsWith: []string{"tailwind_v4", "shadcn_ui"},

‎generators/version14_ui/files/src/components/V14Example.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1+
// Import "@version14/ui/styles.css" once in your app's entry point — it
2+
// ships the pre-generated component styles and isn't included here.
3+
import { Button } from "@version14/ui/button";
4+
15
export default function V14Example() {
2-
return (
3-
<div>
4-
@version14/ui is installed. Import components from "@version14/ui".
5-
</div>
6-
);
6+
return <Button variant="primary">@version14/ui is installed</Button>;
77
}

‎generators/version14_ui/generator.go‎

Lines changed: 41 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ package version14ui
22

33
import (
44
"embed"
5+
"slices"
6+
"strings"
57

68
"github.com/version14/dot/internal/render"
79
"github.com/version14/dot/internal/state"
@@ -22,13 +24,50 @@ func (g *Generator) Generate(ctx *dotapi.Context) error {
2224
if err := ctx.State.UpdateJSON("package.json", func(d *state.JSONDoc) error {
2325
d.Merge(map[string]interface{}{
2426
"dependencies": map[string]interface{}{
25-
"@version14/ui": "0.7.2",
27+
"@version14/ui": "0.8.0",
28+
"@ark-ui/react": "^5.37.2",
2629
},
2730
})
2831
return nil
2932
}); err != nil {
3033
return err
3134
}
3235

33-
return render.NewLocalFolderRenderer(ctx.State).Render(fs, nil)
36+
if err := render.NewLocalFolderRenderer(ctx.State).Render(fs, nil); err != nil {
37+
return err
38+
}
39+
40+
// Component styles are pre-generated CSS shipped by the package itself —
41+
// required regardless of which styling engine (Tailwind, CSS Modules,
42+
// Panda) the project uses, so this is wired here rather than left to the
43+
// styling generator.
44+
injectStylesImport(ctx.State, ctx.PreviousGens)
45+
46+
return nil
47+
}
48+
49+
func injectStylesImport(s *state.VirtualProjectState, previousGens []string) {
50+
switch {
51+
case slices.Contains(previousGens, "react_app"):
52+
injectImport(s, "src/main.tsx",
53+
`import React from "react";`,
54+
"import React from \"react\";\nimport \"@version14/ui/styles.css\";")
55+
case slices.Contains(previousGens, "nextjs_base"):
56+
injectImport(s, "src/app/layout.tsx",
57+
`import "./globals.css";`,
58+
"import \"./globals.css\";\nimport \"@version14/ui/styles.css\";")
59+
}
60+
}
61+
62+
func injectImport(s *state.VirtualProjectState, path, marker, replacement string) {
63+
f, ok := s.GetFile(path)
64+
if !ok {
65+
return
66+
}
67+
content := string(f.Content)
68+
if strings.Contains(content, "@version14/ui/styles.css") {
69+
return
70+
}
71+
content = strings.Replace(content, marker, replacement, 1)
72+
s.WriteFile(path, []byte(content), state.ContentRaw)
3473
}

‎generators/version14_ui/manifest.go‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import "github.com/version14/dot/pkg/dotapi"
44

55
var Manifest = dotapi.Manifest{
66
Name: "version14_ui",
7-
Version: "0.2.1",
7+
Version: "0.4.0",
88
Description: "@version14/ui component library",
99
DependsOn: []string{"typescript_base"},
1010
ConflictsWith: []string{"shadcn_ui", "ark_ui"},
@@ -22,6 +22,7 @@ var Manifest = dotapi.Manifest{
2222
Name: "version14-ui-files",
2323
Checks: []dotapi.Check{
2424
{Type: dotapi.CheckJSONKeyExists, Path: "package.json", Key: "dependencies.@version14/ui"},
25+
{Type: dotapi.CheckJSONKeyExists, Path: "package.json", Key: "dependencies.@ark-ui/react"},
2526
},
2627
},
2728
},

‎tools/test-flow/testdata/202607011720_frontend_nextjs_version14_panda.json‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"name": "frontend_nextjs_version14_panda",
3+
"flow_id": "frontend",
4+
"answers": {
5+
"project_name": "my-app",
6+
"framework": "next",
7+
"ui-library": "version14",
8+
"frontend-styling": "panda-css",
9+
"frontend-state": "none",
10+
"include-tanstack-query": false,
11+
"frontend-formatter": "biome",
12+
"frontend-linter": "biome",
13+
"include-playwright": false,
14+
"include-storybook": false,
15+
"include-auth": false,
16+
"include-theme": false,
17+
"include-feature-flags": false,
18+
"include-sentry": false,
19+
"include-analytics": false,
20+
"include-seo": false,
21+
"confirm-generate": true
22+
},
23+
"expected_visited": [
24+
"project_name",
25+
"framework",
26+
"ui-library",
27+
"frontend-styling",
28+
"frontend-state",
29+
"include-tanstack-query",
30+
"frontend-formatter",
31+
"frontend-linter",
32+
"check-vitest-available",
33+
"include-playwright",
34+
"include-storybook",
35+
"include-auth",
36+
"include-theme",
37+
"include-feature-flags",
38+
"include-sentry",
39+
"include-analytics",
40+
"include-seo",
41+
"confirm-generate"
42+
],
43+
"skip_post_commands": false,
44+
"skip_test_commands": false
45+
}

‎tools/test-flow/testdata/202607011721_frontend_react_vite_version14_tailwind.json‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{
2+
"name": "frontend_react_vite_version14_tailwind",
3+
"flow_id": "frontend",
4+
"answers": {
5+
"project_name": "my-app",
6+
"framework": "react-vite",
7+
"frontend-router": "none",
8+
"ui-library": "version14",
9+
"frontend-styling": "tailwind",
10+
"frontend-state": "none",
11+
"include-tanstack-query": false,
12+
"frontend-formatter": "biome",
13+
"frontend-linter": "biome",
14+
"include-vitest": true,
15+
"include-playwright": false,
16+
"include-storybook": false,
17+
"include-auth": false,
18+
"include-theme": false,
19+
"include-feature-flags": false,
20+
"include-sentry": false,
21+
"include-analytics": false,
22+
"include-seo": false,
23+
"confirm-generate": true
24+
},
25+
"expected_visited": [
26+
"project_name",
27+
"framework",
28+
"frontend-router",
29+
"ui-library",
30+
"frontend-styling",
31+
"frontend-state",
32+
"include-tanstack-query",
33+
"frontend-formatter",
34+
"frontend-linter",
35+
"check-vitest-available",
36+
"include-vitest",
37+
"include-playwright",
38+
"include-storybook",
39+
"include-auth",
40+
"include-theme",
41+
"include-feature-flags",
42+
"include-sentry",
43+
"include-analytics",
44+
"include-seo",
45+
"confirm-generate"
46+
],
47+
"skip_post_commands": false,
48+
"skip_test_commands": false
49+
}

0 commit comments

Comments
 (0)