@blotch/angular-lynx 22.2.3 → 22.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blotch/angular-lynx",
-  "version": "22.2.3",
+  "version": "22.2.4",
   "description": "Angular renderer for the Lynx cross-platform native UI framework",
   "homepage": "https://github.com/Blotch-Smart-Frames/AngularLynx#readme",
   "bugs": {

package/schematics/add-tailwind/index.js

@@ -1,23 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const schematics_1 = require("@angular-devkit/schematics");
-const dependency_1 = require("@schematics/angular/utility/dependency");
 const workspace_1 = require("@schematics/angular/utility/workspace");
-const versions_1 = require("../ng-add/versions");
+const tailwind_1 = require("../utility/tailwind");
 /**
  * Adds Tailwind CSS to an existing AngularLynx project. This is split out
  * from `ng-add` because users may opt out of Tailwind at scaffold time
  * (`ng add @blotch/angular-lynx --tailwind=false`) but later change their
  * minds — running this schematic later is the supported recovery path.
  *
- * Three steps, each idempotent:
- *   1. **tailwind.config.ts** — written with `@lynx-js/tailwind-preset` as
- *      the only preset. The preset narrows Tailwind's class output to the
- *      subset Lynx's CSS engine can parse (no logical properties, no
- *      `:has()` selectors, no advanced color functions).
- *   2. **styles.css/scss** — replaced with the Tailwind base + utilities
- *      layer directives (no components layer; see ng-add for why).
- *   3. **package.json deps** — adds tailwindcss + the Lynx preset.
+ * It sets up the Tailwind version the project already depends on, else
+ * Tailwind 4, or the one `--tailwind-version` asks for:
+ *
+ * - **Tailwind 4**, as Angular CLI's own Tailwind schematic does: the
+ *   stylesheet imports Tailwind (without its Preflight reset), and
+ *   `.postcssrc.json` runs `@tailwindcss/postcss`. The build plugin rewrites
+ *   the CSS it writes into CSS Lynx reads.
+ * - **Tailwind 3**, with `@lynx-js/tailwind-preset`, which narrows Tailwind's
+ *   output to the CSS Lynx reads: `tailwind.config.ts` and the `@tailwind`
+ *   directives.
+ *
+ * Each step is idempotent.
  */
 exports.default = (options) => async (tree) => {
     const workspace = await (0, workspace_1.getWorkspace)(tree);
@@ -33,68 +36,5 @@ exports.default = (options) => async (tree) => {
     }
     const sourceRoot = (project.sourceRoot ?? `${project.root}/src`);
     const projectRoot = project.root;
-    return (0, schematics_1.chain)([
-        addTailwindConfig(projectRoot),
-        updateStylesCss(sourceRoot),
-        addTailwindDependencies(),
-    ]);
-};
-const addTailwindConfig = (projectRoot) => {
-    return (tree) => {
-        const configPath = `${projectRoot ? projectRoot + '/' : ''}tailwind.config.ts`;
-        // The build runs Tailwind with this `content`, so it has to take in both
-        // inline templates (.ts) and the .html templates `ng generate component`
-        // writes by default, as in Angular's own Tailwind setup.
-        const content = `import type { Config } from 'tailwindcss';
-import preset from '@lynx-js/tailwind-preset';
-
-const config: Config = {
-  content: ['./src/**/*.{html,ts}'],
-  presets: [preset],
-};
-
-export default config;
-`;
-        if (tree.exists(configPath)) {
-            tree.overwrite(configPath, content);
-        }
-        else {
-            tree.create(configPath, content);
-        }
-    };
-};
-const updateStylesCss = (sourceRoot) => {
-    return (tree) => {
-        const cssPath = `${sourceRoot}/styles.css`;
-        const scssPath = `${sourceRoot}/styles.scss`;
-        // Prefer styles.scss if it exists (the user picked SCSS at `ng new` time)
-        // — overwriting it with .css content would break their other imports.
-        const targetPath = tree.exists(scssPath) ? scssPath : cssPath;
-        // Only @tailwind base + utilities — no @tailwind components. Lynx's CSS
-        // engine doesn't parse many component-layer reset rules (focus-visible
-        // pseudo-class, form input pseudo-classes), which would produce
-        // diagnostic noise at build time. The base layer ships with the Lynx
-        // preset's own compatibility-safe normalize rules.
-        const content = `@tailwind base;
-@tailwind utilities;
-`;
-        if (tree.exists(targetPath)) {
-            tree.overwrite(targetPath, content);
-        }
-        else {
-            tree.create(cssPath, content);
-        }
-    };
-};
-const addTailwindDependencies = () => {
-    return (0, schematics_1.chain)([
-        (0, dependency_1.addDependency)('tailwindcss', versions_1.VERSIONS.tailwindcss, {
-            type: dependency_1.DependencyType.Dev,
-            install: dependency_1.InstallBehavior.Auto,
-        }),
-        (0, dependency_1.addDependency)('@lynx-js/tailwind-preset', versions_1.VERSIONS.tailwindPreset, {
-            type: dependency_1.DependencyType.Dev,
-            install: dependency_1.InstallBehavior.Auto,
-        }),
-    ]);
+    return (0, tailwind_1.setUpTailwind)({ projectName, projectRoot, sourceRoot }, (0, tailwind_1.tailwindVersionFor)(tree, options.tailwindVersion));
 };

package/schematics/add-tailwind/schema.json

@@ -4,7 +4,7 @@
   "title": "AngularLynx add-tailwind schematic",
   "type": "object",
   "additionalProperties": false,
-  "description": "Adds Tailwind CSS with @lynx-js/tailwind-preset to an existing AngularLynx project.",
+  "description": "Adds Tailwind CSS to an existing AngularLynx project: Tailwind 4 by default, or Tailwind 3 with @lynx-js/tailwind-preset.",
   "properties": {
     "project": {
       "type": "string",
@@ -12,6 +12,11 @@
       "$default": {
         "$source": "projectName"
       }
+    },
+    "tailwindVersion": {
+      "type": ["string", "number"],
+      "enum": ["4", "3", 4, 3],
+      "description": "The Tailwind CSS major version to set up: 4 (with @tailwindcss/postcss), or 3 (with @lynx-js/tailwind-preset). Defaults to the version the project already depends on, else 4."
     }
   },
   "required": []

package/schematics/collection.json

@@ -6,7 +6,7 @@
       "schema": "./ng-add/schema.json"
     },
     "add-tailwind": {
-      "description": "Adds Tailwind CSS with @lynx-js/tailwind-preset to an existing project",
+      "description": "Adds Tailwind CSS to an existing project: Tailwind 4, or Tailwind 3 with @lynx-js/tailwind-preset",
       "factory": "./add-tailwind/index",
       "schema": "./add-tailwind/schema.json"
     },

package/schematics/ng-add/index.js

@@ -5,6 +5,7 @@ const dependency_1 = require("@schematics/angular/utility/dependency");
 const json_file_1 = require("@schematics/angular/utility/json-file");
 const workspace_1 = require("@schematics/angular/utility/workspace");
 const dev_logs_gitignore_1 = require("../utility/dev-logs-gitignore");
+const tailwind_1 = require("../utility/tailwind");
 const extract_i18n_target_1 = require("../utility/extract-i18n-target");
 const versions_1 = require("./versions");
 /**
@@ -14,8 +15,8 @@ const versions_1 = require("./versions");
  * `ng test` and `ng extract-i18n` at the AngularLynx builders and
  * `ng generate` at its schematics, git-ignores the `.dev-logs` file that
  * `ng serve` writes `LynxLogger`'s output to, and optionally sets up Tailwind
- * with the Lynx preset. Everything else stays as `ng new` left it: the app
- * needs no build config besides angular.json.
+ * CSS (4, or 3 with the Lynx preset). Everything else stays as `ng new` left
+ * it: the app needs no build config besides angular.json.
  * This is a one-shot destructive transform — the old browser-Angular files
  * are deleted because they reference DOM APIs and HTML elements that don't
  * exist on the Lynx runtime.
@@ -57,7 +58,7 @@ exports.default = (options) => async (tree) => {
     ];
     // `"false"` is how `ng add ... --tailwind=false` arrives (see schema.ts).
     if (options.tailwind !== false && options.tailwind !== 'false') {
-        rules.push(addTailwindConfig(projectRoot), updateStylesCss(sourceRoot), addTailwindDependencies());
+        rules.push((0, tailwind_1.setUpTailwind)({ projectName, projectRoot, sourceRoot }, (0, tailwind_1.tailwindVersionFor)(tree, options.tailwindVersion)));
     }
     return (0, schematics_1.chain)(rules);
 };
@@ -423,58 +424,3 @@ const addCoreDependencies = () => {
         }),
     ]);
 };
-const addTailwindConfig = (projectRoot) => {
-    return (tree) => {
-        const configPath = `${projectRoot ? projectRoot + '/' : ''}tailwind.config.ts`;
-        const content = `import type { Config } from 'tailwindcss';
-import preset from '@lynx-js/tailwind-preset';
-
-const config: Config = {
-  content: ['./src/**/*.{html,ts}'],
-  presets: [preset],
-};
-
-export default config;
-`;
-        if (tree.exists(configPath)) {
-            tree.overwrite(configPath, content);
-        }
-        else {
-            tree.create(configPath, content);
-        }
-    };
-};
-const updateStylesCss = (sourceRoot) => {
-    return (tree) => {
-        const cssPath = `${sourceRoot}/styles.css`;
-        const scssPath = `${sourceRoot}/styles.scss`;
-        const targetPath = tree.exists(scssPath) ? scssPath : cssPath;
-        // Only @tailwind base + utilities — no @tailwind components. Lynx doesn't
-        // support all of Tailwind's component-layer reset rules (e.g. button
-        // resets that reference focus-visible, form input pseudo-classes), and
-        // bundling them in would generate CSS the runtime can't parse, producing
-        // diagnostic noise. The base layer ships with @lynx-js/tailwind-preset's
-        // own Lynx-compatible normalize rules.
-        const content = `@tailwind base;
-@tailwind utilities;
-`;
-        if (tree.exists(targetPath)) {
-            tree.overwrite(targetPath, content);
-        }
-        else {
-            tree.create(cssPath, content);
-        }
-    };
-};
-const addTailwindDependencies = () => {
-    return (0, schematics_1.chain)([
-        (0, dependency_1.addDependency)('tailwindcss', versions_1.VERSIONS.tailwindcss, {
-            type: dependency_1.DependencyType.Dev,
-            install: dependency_1.InstallBehavior.Auto,
-        }),
-        (0, dependency_1.addDependency)('@lynx-js/tailwind-preset', versions_1.VERSIONS.tailwindPreset, {
-            type: dependency_1.DependencyType.Dev,
-            install: dependency_1.InstallBehavior.Auto,
-        }),
-    ]);
-};

package/schematics/ng-add/schema.json

@@ -16,12 +16,17 @@
     "tailwind": {
       "type": ["boolean", "string"],
       "pattern": "^(true|false)$",
-      "description": "Whether to add Tailwind CSS with @lynx-js/tailwind-preset.",
+      "description": "Whether to add Tailwind CSS.",
       "default": true,
       "x-prompt": {
-        "message": "Would you like to add Tailwind CSS with Lynx preset?",
+        "message": "Would you like to add Tailwind CSS?",
         "type": "confirmation"
       }
+    },
+    "tailwindVersion": {
+      "type": ["string", "number"],
+      "enum": ["4", "3", 4, 3],
+      "description": "The Tailwind CSS major version to set up: 4 (with @tailwindcss/postcss), or 3 (with @lynx-js/tailwind-preset). Defaults to the version the project already depends on, else 4."
     }
   },
   "required": []

package/schematics/ng-add/versions.js

@@ -19,11 +19,17 @@ exports.VERSIONS = {
      */
     lynxTypes: '^4.3.0',
     /**
-     * tailwindcss — utility-first CSS framework (optional, controlled by the `tailwind` schema option)
+     * tailwindcss and @tailwindcss/postcss, for Tailwind CSS 4: the default when
+     * the `tailwind` schema option is on. The build plugin rewrites what it
+     * writes into CSS Lynx reads.
+     */
+    tailwindcss4: '^4.3.3',
+    /**
+     * tailwindcss, for Tailwind CSS 3 (`--tailwind-version=3`)
      */
     tailwindcss: '^3.4.19',
     /**
-     * @lynx-js/tailwind-preset — Lynx-specific Tailwind preset with native design tokens
+     * @lynx-js/tailwind-preset — Lynx's preset for Tailwind CSS 3
      */
     tailwindPreset: '^0.6.0',
     /**

package/schematics/utility/tailwind.js

@@ -0,0 +1,167 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TAILWIND_4_STYLESHEET = exports.setUpTailwind = exports.tailwindVersionFor = exports.installedTailwindVersion = void 0;
+const schematics_1 = require("@angular-devkit/schematics");
+const dependency_1 = require("@schematics/angular/utility/dependency");
+const json_file_1 = require("@schematics/angular/utility/json-file");
+const workspace_1 = require("@schematics/angular/utility/workspace");
+const versions_1 = require("../ng-add/versions");
+/**
+ * The Tailwind CSS major version the project already depends on, if any. A
+ * range such as `^4.1.0` gives 4; `@tailwindcss/postcss`, Tailwind 4's
+ * PostCSS plugin, means 4 too.
+ */
+const installedTailwindVersion = (tree) => {
+    if (!tree.exists('package.json')) {
+        return undefined;
+    }
+    const { dependencies = {}, devDependencies = {} } = tree.readJson('package.json');
+    const all = { ...dependencies, ...devDependencies };
+    if (all['@tailwindcss/postcss']) {
+        return '4';
+    }
+    const major = /\d+/.exec(all['tailwindcss'] ?? '')?.[0];
+    return major === '3' || major === '4' ? major : undefined;
+};
+exports.installedTailwindVersion = installedTailwindVersion;
+/**
+ * The version to set up: the one asked for, else the one the project already
+ * has, else 4. An app that `ng new --style=tailwind` made, or one that is
+ * already on Tailwind 3, keeps its version, so running `ng add` again never
+ * moves it to another.
+ */
+const tailwindVersionFor = (tree, requested) => requested === undefined
+    ? ((0, exports.installedTailwindVersion)(tree) ?? '4')
+    : String(requested);
+exports.tailwindVersionFor = tailwindVersionFor;
+/**
+ * Sets Tailwind CSS up in a project: Tailwind 4 as Angular CLI sets it up
+ * (`ng new --style=tailwind`), or Tailwind 3 with Lynx's preset.
+ */
+const setUpTailwind = (target, version) => (version === '3' ? setUpTailwind3(target) : setUpTailwind4(target));
+exports.setUpTailwind = setUpTailwind;
+const prefixed = (projectRoot, file) => projectRoot ? `${projectRoot}/${file}` : file;
+/**
+ * Tailwind 4, without its Preflight reset, whose rules are for HTML elements
+ * (`h1`, `button`, `img`) that a Lynx app doesn't have: Lynx drops most of
+ * them, and the web preview would apply them, so the two would differ.
+ * Tailwind documents this way of leaving Preflight out.
+ */
+exports.TAILWIND_4_STYLESHEET = `@layer theme, base, components, utilities;
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/utilities.css' layer(utilities);
+`;
+/** The PostCSS config files Angular CLI reads, and its Tailwind schematic writes. */
+const POSTCSS_CONFIG_FILES = ['.postcssrc.json', 'postcss.config.json'];
+const setUpTailwind4 = ({ projectName, projectRoot, sourceRoot, }) => {
+    const installed = (tree) => (0, exports.installedTailwindVersion)(tree) === '4';
+    return (0, schematics_1.chain)([
+        writeTailwind4Stylesheet(projectName, sourceRoot),
+        addTailwindPostcssPlugin(projectRoot),
+        (tree) => (0, schematics_1.chain)(['tailwindcss', '@tailwindcss/postcss'].map((name) => (0, dependency_1.addDependency)(name, versions_1.VERSIONS.tailwindcss4, {
+            type: dependency_1.DependencyType.Dev,
+            install: dependency_1.InstallBehavior.Auto,
+            // Keep the version of a project that already has Tailwind 4, as
+            // Angular CLI does; replace a Tailwind 3 one.
+            existing: installed(tree)
+                ? dependency_1.ExistingBehavior.Skip
+                : dependency_1.ExistingBehavior.Replace,
+        }))),
+        (tree, context) => {
+            const config = ['ts', 'js', 'mjs', 'cjs']
+                .map((extension) => prefixed(projectRoot, `tailwind.config.${extension}`))
+                .find((file) => tree.exists(file));
+            if (config) {
+                context.logger.warn(`Tailwind CSS 4 doesn't read ${config}. Move its theme into @theme in the stylesheet, load its plugins with @plugin, and delete it.`);
+            }
+        },
+    ]);
+};
+/**
+ * Writes the Tailwind 4 stylesheet: over `styles.css`, or, in a project
+ * styled with Sass (which would read Tailwind's `@import`s as its own), to a
+ * `tailwind.css` added to the build's styles, as Angular CLI does.
+ */
+const writeTailwind4Stylesheet = (projectName, sourceRoot) => (tree) => {
+    const cssPath = `${sourceRoot}/styles.css`;
+    if (tree.exists(cssPath) || !tree.exists(`${sourceRoot}/styles.scss`)) {
+        writeFile(tree, cssPath, exports.TAILWIND_4_STYLESHEET);
+        return;
+    }
+    const tailwindPath = `${sourceRoot}/tailwind.css`;
+    writeFile(tree, tailwindPath, exports.TAILWIND_4_STYLESHEET);
+    return (0, workspace_1.updateWorkspace)((workspace) => {
+        const build = workspace.projects.get(projectName)?.targets.get('build');
+        if (!build) {
+            return;
+        }
+        const options = (build.options ??= {});
+        const styles = options['styles'] ?? [];
+        if (!styles.includes(tailwindPath)) {
+            options['styles'] = [tailwindPath, ...styles];
+        }
+    });
+};
+/**
+ * Lists `@tailwindcss/postcss` in the project's PostCSS config, which the
+ * build reads, creating `.postcssrc.json` if there's none, as Angular CLI's
+ * Tailwind schematic does.
+ */
+const addTailwindPostcssPlugin = (projectRoot) => (tree) => {
+    const existing = [...new Set(['', projectRoot])]
+        .flatMap((root) => POSTCSS_CONFIG_FILES.map((file) => prefixed(root, file)))
+        .find((file) => tree.exists(file));
+    if (!existing) {
+        tree.create(prefixed(projectRoot, '.postcssrc.json'), `${JSON.stringify({ plugins: { '@tailwindcss/postcss': {} } }, null, 2)}\n`);
+        return;
+    }
+    const config = new json_file_1.JSONFile(tree, existing);
+    if (config.get(['plugins', '@tailwindcss/postcss']) === undefined) {
+        config.modify(['plugins', '@tailwindcss/postcss'], {});
+    }
+};
+const setUpTailwind3 = ({ projectRoot, sourceRoot }) => (0, schematics_1.chain)([
+    (tree) => {
+        // The build runs Tailwind with this `content`, so it has to take in
+        // both inline templates (.ts) and the .html templates `ng generate
+        // component` writes by default, as in Angular's own Tailwind setup.
+        writeFile(tree, prefixed(projectRoot, 'tailwind.config.ts'), `import type { Config } from 'tailwindcss';
+import preset from '@lynx-js/tailwind-preset';
+
+const config: Config = {
+  content: ['./src/**/*.{html,ts}'],
+  presets: [preset],
+};
+
+export default config;
+`);
+        // Prefer styles.scss if it exists (the user picked SCSS at `ng new`
+        // time): overwriting it with .css content would break their other
+        // imports.
+        //
+        // Only @tailwind base + utilities, no @tailwind components. Lynx doesn't
+        // support all of Tailwind's component-layer reset rules (button resets
+        // that reference focus-visible, form input pseudo-classes), and bundling
+        // them in would generate CSS the runtime can't parse, producing
+        // diagnostic noise. The base layer ships with @lynx-js/tailwind-preset's
+        // own Lynx-compatible normalize rules.
+        const scssPath = `${sourceRoot}/styles.scss`;
+        writeFile(tree, tree.exists(scssPath) ? scssPath : `${sourceRoot}/styles.css`, '@tailwind base;\n@tailwind utilities;\n');
+    },
+    (0, dependency_1.addDependency)('tailwindcss', versions_1.VERSIONS.tailwindcss, {
+        type: dependency_1.DependencyType.Dev,
+        install: dependency_1.InstallBehavior.Auto,
+    }),
+    (0, dependency_1.addDependency)('@lynx-js/tailwind-preset', versions_1.VERSIONS.tailwindPreset, {
+        type: dependency_1.DependencyType.Dev,
+        install: dependency_1.InstallBehavior.Auto,
+    }),
+]);
+const writeFile = (tree, path, content) => {
+    if (tree.exists(path)) {
+        tree.overwrite(path, content);
+    }
+    else {
+        tree.create(path, content);
+    }
+};