create-fluixi 0.1.0-alpha.10 → 0.1.0-alpha.11

package/dist/index.js

@@ -145,20 +145,31 @@ function addDeps(pkg, section, deps) {
     pkg[section] = Object.fromEntries(Object.entries({ ...(pkg[section] ?? {}), ...deps }).sort(([a], [b]) => a.localeCompare(b)));
 }
 /**
- * The stylesheet the app imports, assembled from what was chosen.
+ * The app's own stylesheet, in the shape the chosen css engine expects.
  *
- * Tokens first: the kit's components read those custom properties, so a framework layer
- * loaded before them would be overridden by nothing and a component would render unstyled.
+ * The component tokens are not here: they are a stylesheet the package ships and the
+ * entry imports directly, so this file only holds what the engine has to read, the dark
+ * variant, where to scan, and the theme the app defines.
  */
 function styleSheet(ui, css) {
-    const lines = [];
-    if (ui === 'fluixi-ui')
-        lines.push(`@import '@fluixi-ui/tokens/css';`);
-    if (css === 'tailwind')
-        lines.push(`@import 'tailwindcss';`);
-    if (css === 'fluixi-css')
-        lines.push(`@import '@fluixi-css/core';`);
-    return lines.join('\n') + '\n';
+    // Dark from the attribute @fluixi/core's createTheme sets, not the OS preference, so
+    // a theme toggle in the app actually drives it.
+    const darkVariant = `@custom-variant dark (&:where([data-theme='dark'], [data-theme='dark'] *));`;
+    // Where to look for utility classes. Relative to this file.
+    const sources = `@source '.';\n@source '../index.html';`;
+    const theme = `@theme {\n  /* Design tokens. A --color-* scale here drives the whole app. */\n}`;
+    if (css === 'fluixi-css') {
+        // No import: the vite plugin injects the engine, and `emitUiTokens` bridges the
+        // scales below onto the `--flx-ui-*` properties the components read, so importing
+        // the token sheet as well would only restate what the bridge already emits.
+        return [darkVariant, '', sources, '', theme, ''].join('\n');
+    }
+    if (css === 'tailwind') {
+        return [`@import 'tailwindcss';`, '', darkVariant, '', theme, ''].join('\n');
+    }
+    // No css engine: the component tokens are imported from the entry like any other
+    // stylesheet, so there is nothing for this file to hold.
+    return '';
 }
 /** Where the component resolver is configured, which differs by mode. */
 const configFor = (mode) => mode === 'ssr' ? 'fluixi.config.ts' : 'vite.config.ts';
@@ -199,15 +210,27 @@ function addVitePlugin(target, mode, importLine, call) {
             : src.replace('plugins: [', `plugins: [\n    ${call},`);
     writeFileSync(file, src);
 }
-/** Import the stylesheet from whichever file boots the client. */
-function importStyles(target, mode, format) {
+/**
+ * Import the stylesheets from whichever file boots the client.
+ *
+ * The component tokens come first and from the entry rather than from `styles.css`:
+ * they are a stylesheet the package ships, not something the app's css engine should be
+ * asked to resolve, and the components below need them defined before their own rules
+ * land. `emitUiTokens` does not replace this, that bridge covers a subset.
+ */
+function importStyles(target, mode, ui) {
     const base = mode === 'ssr' ? 'entry-client' : 'main';
     const file = ['tsx', 'ts']
         .map((ext) => join(target, 'src', `${base}.${ext}`))
         .find((p) => existsSync(p));
     if (!file)
         return;
-    writeFileSync(file, `import './styles.css';\n` + readFileSync(file, 'utf8'));
+    const head = [
+        ...(ui === 'fluixi-ui' ? [`import '@fluixi-ui/tokens/tokens.css';`] : []),
+        `import './styles.css';`,
+        '',
+    ].join('\n');
+    writeFileSync(file, head + readFileSync(file, 'utf8'));
 }
 async function main() {
     const args = argv.slice(2);
@@ -289,8 +312,11 @@ async function main() {
         writeFileSync(join(target, 'fluixi.css.config.js'), `const config = {\n  purge: true,\n  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],\n  mode: { dark: '[data-theme="dark"]' },\n  theme: { extend: {} },\n};\n\nexport default config;\n`);
     }
     if (ui === 'fluixi-ui' || css !== 'none') {
-        writeFileSync(join(target, 'src', 'styles.css'), styleSheet(ui, css));
-        importStyles(target, mode, format);
+        const sheet = styleSheet(ui, css);
+        // An empty sheet still gets written: it is where an app puts its own css, and the
+        // entry already imports it.
+        writeFileSync(join(target, 'src', 'styles.css'), sheet);
+        importStyles(target, mode, ui);
     }
     writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
     // Outro + next steps. The leading gutter only makes sense after the intro/prompts.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-fluixi",
-  "version": "0.1.0-alpha.10",
+  "version": "0.1.0-alpha.11",
   "license": "MIT",
   "author": "Ibrahima Touré",
   "description": "Scaffold a new Fluixi app — `npm create fluixi <dir>`.",