create-forte-ui 1.0.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/overlay.js +3 -1
- package/dist/templates.js +20 -2
- package/package.json +1 -1
package/dist/overlay.js
CHANGED
|
@@ -84,7 +84,9 @@ function applyVite({ name, dir, tailwind, answers }) {
|
|
|
84
84
|
* component by layer order and buttons render as bare text. An inline
|
|
85
85
|
* <style> ahead of every stylesheet is untouchable by that pipeline, and
|
|
86
86
|
* layer order is fixed at first appearance, so nothing later can unpin it.
|
|
87
|
-
* Next.js
|
|
87
|
+
* Next.js emits the statement intact and needs no pin, but has its own race:
|
|
88
|
+
* the layout must import `globals.css` before `@forte-ui/react` — see
|
|
89
|
+
* `nextLayoutTsx`. */
|
|
88
90
|
if (tailwind) {
|
|
89
91
|
const pin = " <!-- Pins the cascade-layer order before any stylesheet loads; the CSS\n" +
|
|
90
92
|
" bundler can reorder @layer statements, and first appearance wins. -->\n" +
|
package/dist/templates.js
CHANGED
|
@@ -138,6 +138,13 @@ export function nextGlobalsCss(a, tailwind) {
|
|
|
138
138
|
}
|
|
139
139
|
return joinBlocks(rootBlock(a, "next-font"), BODY_RULE);
|
|
140
140
|
}
|
|
141
|
+
/* Shipped into the Tailwind layout above its first import: the one line a
|
|
142
|
+
* reader is most likely to reorder while tidying, and the one that breaks the
|
|
143
|
+
* page when they do. */
|
|
144
|
+
const GLOBALS_FIRST_NOTE = `// globals.css first: it pins the cascade-layer order, and the library's own
|
|
145
|
+
// CSS arrives with its JS import. Import the library above it and Tailwind's
|
|
146
|
+
// Preflight wins over every component.
|
|
147
|
+
`;
|
|
141
148
|
export function nextLayoutTsx(name, a, tailwind) {
|
|
142
149
|
const font = nextFontSetup(a);
|
|
143
150
|
/* Without Tailwind, `theme.css` is imported here, above globals — safe
|
|
@@ -167,9 +174,20 @@ export function nextLayoutTsx(name, a, tailwind) {
|
|
|
167
174
|
const libImport = pinned ? "" : `import { ThemeScript, ThemeToggle } from "@forte-ui/react";\n`;
|
|
168
175
|
const head = pinned ? "" : ` <head>\n <ThemeScript />\n </head>\n`;
|
|
169
176
|
const toggleLine = pinned ? "" : ` ${toggle}\n`;
|
|
177
|
+
/* On the Tailwind path `globals.css` is the layout's FIRST import, above
|
|
178
|
+
* `@forte-ui/react`. Next emits CSS in import order, and the library's JS
|
|
179
|
+
* pulls its own `@layer forte.*` blocks in with it — so with the library
|
|
180
|
+
* imported first the compiled stylesheet OPENS with `@layer forte.components
|
|
181
|
+
* { … }`, `forte` is pinned before the bridge's statement ever runs, and the
|
|
182
|
+
* order ends up `forte, theme, base, …`: Preflight beats every component
|
|
183
|
+
* and the starter's Button renders as bare text. Without Tailwind nothing
|
|
184
|
+
* else declares layers and the guide's order (theme.css, then globals) is
|
|
185
|
+
* the right one. */
|
|
186
|
+
const imports = tailwind
|
|
187
|
+
? `${GLOBALS_FIRST_NOTE}import "./globals.css";\n${libImport}${font.importLine ? font.importLine + "\n" : ""}`
|
|
188
|
+
: `${libImport}${font.importLine ? font.importLine + "\n" : ""}${themeImport}import "./globals.css";\n`;
|
|
170
189
|
return `import type { Metadata } from "next";
|
|
171
|
-
${
|
|
172
|
-
|
|
190
|
+
${imports}
|
|
173
191
|
${font.consts ? font.consts + "\n\n" : ""}export const metadata: Metadata = {
|
|
174
192
|
title: "${name}",
|
|
175
193
|
description: "Scaffolded by create-forte-ui",
|
package/package.json
CHANGED