@esuiss/ui 0.2.0 → 0.3.0

package/README.md

@@ -9,4 +9,4 @@ npx @esuiss/ui@latest add button --diff
 npx @esuiss/ui@latest add button --overwrite
 ```
 
-`init` sets up Tailwind CSS v4, the `@/*` import alias, the theme stylesheet, and the button. Requires TypeScript.
+`init` sets up Tailwind CSS (4.2 or later), the `@/*` import alias, the theme stylesheet with `@esuiss/tailwind`, and the button. Requires TypeScript.

package/lib/init.mjs

@@ -38,7 +38,7 @@ const TOOLING = {
   next: ["tailwindcss", "@tailwindcss/postcss"],
   vite: ["tailwindcss", "@tailwindcss/vite", "@types/node"],
 }
-const RUNTIME = ["tw-animate-css"]
+const MINIMUM_TAILWIND = [4, 2]
 
 function relative(project, file) {
   return path.relative(project.cwd, file)
@@ -59,16 +59,46 @@ function findStylesheet(project) {
   return path.join(appDir, "globals.css")
 }
 
+function installedVersion(project, name) {
+  const manifest = path.join(project.cwd, "node_modules", name, "package.json")
+  if (existsSync(manifest)) {
+    return JSON.parse(readFileSync(manifest, "utf8")).version
+  }
+  return project.packages[name]
+}
+
 function assertTailwindVersion(project) {
-  const version = project.packages.tailwindcss
-  const major = version && Number(version.match(/\d+/)?.[0])
-  if (major && major < 4) {
+  const version = installedVersion(project, "tailwindcss")
+  const match = version?.match(/(\d+)(?:\.(\d+))?/)
+  if (!match) return
+  const major = Number(match[1])
+  const minor = match[2] === undefined ? undefined : Number(match[2])
+  const [requiredMajor, requiredMinor] = MINIMUM_TAILWIND
+  const tooOld =
+    major < requiredMajor ||
+    (major === requiredMajor && minor !== undefined && minor < requiredMinor)
+  if (tooOld) {
     throw new CliError(
-      `Tailwind CSS v4 is required, this project uses ${version}.`
+      `Tailwind CSS ${requiredMajor}.${requiredMinor} or later is required, this project uses ${version}. Upgrade tailwindcss and run init again.`
     )
   }
 }
 
+function stylesheetPackages(css) {
+  return [...css.matchAll(/@import\s+["']([^"']+)["']/g)]
+    .map(([, specifier]) => specifier)
+    .filter(
+      (specifier) =>
+        !specifier.startsWith(".") &&
+        !specifier.startsWith("/") &&
+        specifier !== "tailwindcss"
+    )
+    .map((specifier) => {
+      const parts = specifier.split("/")
+      return specifier.startsWith("@") ? parts.slice(0, 2).join("/") : parts[0]
+    })
+}
+
 function addAliasTo(file, target) {
   let text = readFileSync(file, "utf8")
   const alias = `"@/*": ["${target}"]`
@@ -206,7 +236,7 @@ export async function init(options) {
     step("Added the @/* import alias to tsconfig")
 
   install(project, TOOLING[project.framework], { dev: true })
-  install(project, RUNTIME)
+  install(project, stylesheetPackages(css))
 
   const manual =
     project.framework === "vite"

package/lib/project.mjs

@@ -21,11 +21,11 @@ const INSTALL_ARGS = {
 
 const TSCONFIGS = ["tsconfig.json", "tsconfig.app.json"]
 
-export function readJsonc(file) {
+function readJsonc(file) {
   const text = readFileSync(file, "utf8")
   const withoutComments = text.replace(
     /("(?:\\.|[^"\\])*")|\/\/[^\n]*|\/\*[\s\S]*?\*\//g,
-    (match, string) => string ?? ""
+    (_match, string) => string ?? ""
   )
   return JSON.parse(withoutComments.replace(/,(\s*[}\]])/g, "$1"))
 }

package/lib/registry.mjs

@@ -1,6 +1,6 @@
 import { CliError } from "./output.mjs"
 
-const DEFAULT_BASE = "https://raw.githubusercontent.com/esuiss/esuiss-ui/main"
+const DEFAULT_BASE = "https://raw.githubusercontent.com/e-suiss/ui/main"
 const base = (process.env.ESUISS_REGISTRY ?? DEFAULT_BASE).replace(/\/$/, "")
 
 export async function fetchText(file) {

package/package.json

@@ -1,8 +1,14 @@
 {
   "name": "@esuiss/ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Add esuiss-ui components to Next.js and React projects.",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/e-suiss/ui.git",
+    "directory": "packages/cli"
+  },
+  "homepage": "https://github.com/e-suiss/ui",
   "type": "module",
   "bin": {
     "esuiss": "index.mjs"