@vojtaholik/create-static-kit 1.0.1 → 1.0.3

package/dist/cli.js

@@ -6,6 +6,26 @@ import prompts from "prompts";
 import { cyan, green, red, bold } from "kleur/colors";
 import fg from "fast-glob";
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
+// Get the current version of static-kit-core dynamically
+let staticKitCoreVersion = "latest"; // Default fallback
+try {
+    // Try monorepo path first (development)
+    const monorepoPath = path.join(__dirname, "..", "..", "static-kit-core", "package.json");
+    const pkgJson = JSON.parse(await fs.readFile(monorepoPath, "utf-8"));
+    staticKitCoreVersion = pkgJson.version;
+}
+catch {
+    try {
+        // Try installed package path (production)
+        const installedPath = path.join(__dirname, "..", "node_modules", "@vojtaholik", "static-kit-core", "package.json");
+        const pkgJson = JSON.parse(await fs.readFile(installedPath, "utf-8"));
+        staticKitCoreVersion = pkgJson.version;
+    }
+    catch {
+        // Keep the default "latest" fallback
+        console.warn("Warning: Could not determine static-kit-core version, using 'latest'");
+    }
+}
 const TEMPLATES = {
     minimal: {
         name: "Minimal",
@@ -98,17 +118,25 @@ async function main() {
                 })),
                 initial: 0,
             },
+            {
+                type: "confirm",
+                name: "useTailwind",
+                message: "Use Tailwind CSS v4 for styling?",
+                initial: false,
+            },
             {
                 type: "confirm",
                 name: "cssReset",
                 message: "Include CSS reset?",
                 initial: true,
+                skip: (prev) => prev.useTailwind, // Skip if using Tailwind
             },
             {
                 type: "confirm",
                 name: "designTokens",
                 message: "Include design tokens?",
                 initial: false,
+                skip: (prev) => prev.useTailwind, // Skip if using Tailwind
             },
             {
                 type: "confirm",
@@ -130,8 +158,9 @@ async function main() {
         const options = {
             projectName: response.projectName,
             template: response.template,
-            cssReset: response.cssReset,
-            designTokens: response.designTokens,
+            cssReset: response.useTailwind ? false : response.cssReset,
+            designTokens: response.useTailwind ? false : response.designTokens,
+            useTailwind: response.useTailwind,
             includeCursorRules: response.includeCursorRules,
             initGit: response.initGit,
         };
@@ -144,6 +173,7 @@ async function main() {
             template: template || "default",
             cssReset: true,
             designTokens: false,
+            useTailwind: false,
             includeCursorRules: !noCursorRules,
             initGit: true,
         };
@@ -151,7 +181,7 @@ async function main() {
     }
 }
 async function createProject(options) {
-    const { projectName, template, cssReset, designTokens, includeCursorRules, initGit, } = options;
+    const { projectName, template, cssReset, designTokens, useTailwind, includeCursorRules, initGit, } = options;
     console.log();
     console.log(`${cyan("✨")} Creating ${bold(projectName)}...`);
     console.log();
@@ -171,11 +201,11 @@ async function createProject(options) {
         // Copy template files
         await copyTemplate(template, projectPath);
         // Generate package.json
-        await generatePackageJson(projectName, projectPath);
+        await generatePackageJson(projectName, projectPath, useTailwind);
         // Generate vite.config.ts
-        await generateViteConfig(projectPath);
+        await generateViteConfig(projectPath, useTailwind);
         // Generate static-kit.config.json
-        await generateStaticKitConfig(projectPath);
+        await generateStaticKitConfig(projectPath, useTailwind);
         // Conditionally add features
         if (cssReset) {
             await addCssReset(projectPath);
@@ -183,6 +213,9 @@ async function createProject(options) {
         if (designTokens) {
             await addDesignTokens(projectPath);
         }
+        if (useTailwind) {
+            await setupTailwindCSS(projectPath);
+        }
         // Remove Cursor rules if not wanted
         if (!includeCursorRules) {
             await removeCursorRules(projectPath);
@@ -234,7 +267,7 @@ async function copyTemplate(templateName, projectPath) {
         await fs.copyFile(srcPath, destPath);
     }
 }
-async function generatePackageJson(projectName, projectPath) {
+async function generatePackageJson(projectName, projectPath, useTailwind) {
     const packageJson = {
         name: projectName,
         private: true,
@@ -246,24 +279,39 @@ async function generatePackageJson(projectName, projectPath) {
             preview: "vite preview",
         },
         devDependencies: {
-            "@vojtaholik/static-kit-core": "^1.0.0",
+            "@vojtaholik/static-kit-core": `^${staticKitCoreVersion}`,
             "@types/node": "^24.2.1",
-            autoprefixer: "^10.4.21",
-            postcss: "^8.5.6",
-            "sass-embedded": "^1.90.0",
             typescript: "~5.9.2",
             vite: "^7.1.1",
         },
+        dependencies: {},
     };
+    if (useTailwind) {
+        // Tailwind CSS setup
+        packageJson.dependencies["tailwindcss"] = "^4.1.12";
+        packageJson.dependencies["@tailwindcss/vite"] = "^4.1.12";
+    }
+    else {
+        // SCSS setup
+        packageJson.devDependencies["sass-embedded"] = "^1.90.0";
+        packageJson.devDependencies["autoprefixer"] = "^10.4.21";
+        packageJson.devDependencies["postcss"] = "^8.5.6";
+    }
     await fs.writeFile(path.join(projectPath, "package.json"), JSON.stringify(packageJson, null, 2));
 }
-async function generateViteConfig(projectPath) {
+async function generateViteConfig(projectPath, useTailwind) {
+    const stylesEntry = useTailwind
+        ? "src/styles/styles.css"
+        : "src/styles/main.scss";
     const viteConfig = `import { createStaticKitConfig } from "@vojtaholik/static-kit-core/vite";
 
-export default createStaticKitConfig();`;
+export default createStaticKitConfig({
+  useTailwind: ${useTailwind},
+  stylesEntry: "${stylesEntry}"
+});`;
     await fs.writeFile(path.join(projectPath, "vite.config.ts"), viteConfig);
 }
-async function generateStaticKitConfig(projectPath) {
+async function generateStaticKitConfig(projectPath, useTailwind) {
     const config = {
         build: {
             base: "public/",
@@ -383,6 +431,23 @@ async function addDesignTokens(projectPath) {
         // main.scss doesn't exist or can't be read
     }
 }
+async function setupTailwindCSS(projectPath) {
+    // Create Tailwind CSS v4 setup with plain CSS
+    const tailwindSetup = `/* Tailwind CSS v4 */
+@import "tailwindcss";
+
+/* Custom styles */
+`;
+    // Create styles.css file (not SCSS)
+    await fs.writeFile(path.join(projectPath, "src", "styles", "styles.css"), tailwindSetup);
+    // Remove main.scss if it exists (from template)
+    try {
+        await fs.unlink(path.join(projectPath, "src", "styles", "main.scss"));
+    }
+    catch {
+        // File doesn't exist, that's fine
+    }
+}
 async function removeCursorRules(projectPath) {
     try {
         const cursorDir = path.join(projectPath, ".cursor");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vojtaholik/create-static-kit",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "CLI tool to create new Static Kit projects",
   "type": "module",
   "bin": {

package/templates/default/.cursor/rules/inline-tailwind-to-bem-with-apply-directive.mdc

@@ -0,0 +1,218 @@
+---
+description: Convert inline Tailwind CSS utility classes to BEM-compliant @apply directives in CSS files
+globs: ["**/*"]
+alwaysApply: true
+---
+
+# Tailwind CSS v4 @apply Conversion Specialist
+
+You are a Tailwind CSS v4 expert focused on converting inline utility classes to `@apply` directives in CSS files.
+
+## Core Rules
+
+### Tailwind CSS v4 Context
+
+- Always use `@import "tailwindcss";` syntax (not the old v3 @tailwind directives)
+- Understand that v4 uses CSS-first configuration and native CSS features
+- Recognize that @apply works the same but the import syntax has changed
+
+### @apply Conversion Guidelines
+
+#### MANDATORY CONVERSION RULE
+
+**ALWAYS convert inline utility classes to @apply when asked.** No exceptions, no questions, no debate about whether it's "worth it". If the user asks for conversion, you fucking do it.
+
+#### BEM Naming Convention
+
+**ALWAYS use BEM (Block Element Modifier) methodology for class names:**
+
+- **Block**: `.card`, `.button`, `.navbar`
+- **Element**: `.card__title`, `.card__content`, `.button__icon`
+- **Modifier**: `.card--primary`, `.button--large`, `.navbar--mobile`
+
+#### BEM Examples
+
+```css
+/* Block */
+.card {
+  @apply bg-white rounded-lg shadow-md p-6;
+}
+
+/* Element */
+.card__header {
+  @apply border-b border-gray-200 pb-4 mb-4;
+}
+
+.card__title {
+  @apply text-xl font-semibold text-gray-900;
+}
+
+.card__content {
+  @apply text-gray-600 leading-relaxed;
+}
+
+/* Modifier */
+.card--primary {
+  @apply border-l-4 border-blue-500;
+}
+
+.card--error {
+  @apply border-l-4 border-red-500 bg-red-50;
+}
+```
+
+#### Conversion Rules
+
+- **User request = immediate conversion** (no questioning)
+- Convert ANY utility classes when user requests it
+- Create BEM-compliant class names that describe component structure
+- Group related properties logically in @apply statements
+- Preserve responsive/state variants when complex
+
+#### Conversion Process
+
+1. **Identify the component structure**: Determine Block, Elements, and Modifiers
+2. **Create BEM class names**: Use semantic names that describe purpose and hierarchy
+3. **Group logically**: Organize related properties together in @apply statements
+4. **Preserve responsive/state variants**: Keep complex variants inline if needed
+
+#### Best Practices
+
+```css
+/* ✅ Good: BEM naming with logical grouping */
+.card {
+  @apply bg-white rounded-lg shadow-md;
+  @apply p-6 border border-gray-200;
+}
+
+.card--primary {
+  @apply border-l-4 border-blue-500;
+}
+
+.button {
+  @apply text-white font-medium px-4 py-2 rounded-md;
+  @apply transition-colors duration-200;
+}
+
+.button--primary {
+  @apply bg-blue-500 hover:bg-blue-600;
+}
+
+.button__icon {
+  @apply mr-2 w-4 h-4;
+}
+
+/* ❌ Bad: Non-BEM naming */
+.blue-rounded {
+  @apply bg-blue-500 rounded-md;
+}
+
+/* ❌ Bad: Non-semantic naming */
+.margin-top {
+  @apply mt-4;
+}
+```
+
+#### Handling Complex Cases
+
+- **Responsive variants**: Keep complex responsive logic inline, abstract base styles
+- **State variants**: Group base styles in @apply, keep interactive states inline when complex
+- **Component variants**: Create separate classes for different component states
+
+#### File Organization
+
+- Place @apply styles in the same file as the `@import "tailwindcss";`
+- Group related component styles together
+- Use comments to organize sections
+- Follow this structure:
+
+```css
+@import "tailwindcss";
+
+/* Base component styles */
+.card {
+  /* ... */
+}
+.button {
+  /* ... */
+}
+
+/* Layout components */
+.container {
+  /* ... */
+}
+.grid-layout {
+  /* ... */
+}
+
+/* Utility combinations */
+.form-input {
+  /* ... */
+}
+.error-text {
+  /* ... */
+}
+```
+
+### Conversion Examples
+
+#### Before (inline classes):
+
+```html
+<div
+  class="bg-white rounded-lg shadow-md p-6 border border-gray-200 hover:shadow-lg transition-shadow"
+>
+  <h2 class="text-xl font-semibold text-gray-900 mb-4">Card Title</h2>
+  <p class="text-gray-600 leading-relaxed">Card content</p>
+</div>
+```
+
+#### After (with @apply and BEM):
+
+```css
+.card {
+  @apply bg-white rounded-lg shadow-md p-6 border border-gray-200;
+  @apply hover:shadow-lg transition-shadow;
+}
+
+.card__title {
+  @apply text-xl font-semibold text-gray-900 mb-4;
+}
+
+.card__content {
+  @apply text-gray-600 leading-relaxed;
+}
+```
+
+```html
+<div class="card">
+  <h2 class="card__title">Card Title</h2>
+  <p class="card__content">Card content</p>
+</div>
+```
+
+### Action Instructions
+
+When converting (MANDATORY when asked):
+
+1. **Analyze the HTML/JSX** for component structure and hierarchy
+2. **Create BEM class names** following Block\_\_Element--Modifier pattern
+3. **Show the CSS @apply implementation** with proper BEM organization
+4. **Provide the updated HTML** with new BEM class names
+5. **Explain the BEM structure** and benefits of the conversion
+
+Always prioritize:
+
+- **BEM naming convention** (Block\_\_Element--Modifier)
+- **Mandatory conversion** when user requests it
+- **Component hierarchy** in naming structure
+- **Logical grouping** of related properties in @apply statements
+- **Semantic naming** that describes purpose and structure
+
+### TypeScript Integration
+
+When working with TypeScript projects, consider:
+
+- Type-safe class name patterns
+- Component prop interfaces for style variants
+- Utility types for consistent naming conventions

package/templates/minimal/.cursor/rules/inline-tailwind-to-bem-with-apply-directive.mdc

@@ -0,0 +1,218 @@
+---
+description: Convert inline Tailwind CSS utility classes to BEM-compliant @apply directives in CSS files
+globs: ["**/*"]
+alwaysApply: true
+---
+
+# Tailwind CSS v4 @apply Conversion Specialist
+
+You are a Tailwind CSS v4 expert focused on converting inline utility classes to `@apply` directives in CSS files.
+
+## Core Rules
+
+### Tailwind CSS v4 Context
+
+- Always use `@import "tailwindcss";` syntax (not the old v3 @tailwind directives)
+- Understand that v4 uses CSS-first configuration and native CSS features
+- Recognize that @apply works the same but the import syntax has changed
+
+### @apply Conversion Guidelines
+
+#### MANDATORY CONVERSION RULE
+
+**ALWAYS convert inline utility classes to @apply when asked.** No exceptions, no questions, no debate about whether it's "worth it". If the user asks for conversion, you fucking do it.
+
+#### BEM Naming Convention
+
+**ALWAYS use BEM (Block Element Modifier) methodology for class names:**
+
+- **Block**: `.card`, `.button`, `.navbar`
+- **Element**: `.card__title`, `.card__content`, `.button__icon`
+- **Modifier**: `.card--primary`, `.button--large`, `.navbar--mobile`
+
+#### BEM Examples
+
+```css
+/* Block */
+.card {
+  @apply bg-white rounded-lg shadow-md p-6;
+}
+
+/* Element */
+.card__header {
+  @apply border-b border-gray-200 pb-4 mb-4;
+}
+
+.card__title {
+  @apply text-xl font-semibold text-gray-900;
+}
+
+.card__content {
+  @apply text-gray-600 leading-relaxed;
+}
+
+/* Modifier */
+.card--primary {
+  @apply border-l-4 border-blue-500;
+}
+
+.card--error {
+  @apply border-l-4 border-red-500 bg-red-50;
+}
+```
+
+#### Conversion Rules
+
+- **User request = immediate conversion** (no questioning)
+- Convert ANY utility classes when user requests it
+- Create BEM-compliant class names that describe component structure
+- Group related properties logically in @apply statements
+- Preserve responsive/state variants when complex
+
+#### Conversion Process
+
+1. **Identify the component structure**: Determine Block, Elements, and Modifiers
+2. **Create BEM class names**: Use semantic names that describe purpose and hierarchy
+3. **Group logically**: Organize related properties together in @apply statements
+4. **Preserve responsive/state variants**: Keep complex variants inline if needed
+
+#### Best Practices
+
+```css
+/* ✅ Good: BEM naming with logical grouping */
+.card {
+  @apply bg-white rounded-lg shadow-md;
+  @apply p-6 border border-gray-200;
+}
+
+.card--primary {
+  @apply border-l-4 border-blue-500;
+}
+
+.button {
+  @apply text-white font-medium px-4 py-2 rounded-md;
+  @apply transition-colors duration-200;
+}
+
+.button--primary {
+  @apply bg-blue-500 hover:bg-blue-600;
+}
+
+.button__icon {
+  @apply mr-2 w-4 h-4;
+}
+
+/* ❌ Bad: Non-BEM naming */
+.blue-rounded {
+  @apply bg-blue-500 rounded-md;
+}
+
+/* ❌ Bad: Non-semantic naming */
+.margin-top {
+  @apply mt-4;
+}
+```
+
+#### Handling Complex Cases
+
+- **Responsive variants**: Keep complex responsive logic inline, abstract base styles
+- **State variants**: Group base styles in @apply, keep interactive states inline when complex
+- **Component variants**: Create separate classes for different component states
+
+#### File Organization
+
+- Place @apply styles in the same file as the `@import "tailwindcss";`
+- Group related component styles together
+- Use comments to organize sections
+- Follow this structure:
+
+```css
+@import "tailwindcss";
+
+/* Base component styles */
+.card {
+  /* ... */
+}
+.button {
+  /* ... */
+}
+
+/* Layout components */
+.container {
+  /* ... */
+}
+.grid-layout {
+  /* ... */
+}
+
+/* Utility combinations */
+.form-input {
+  /* ... */
+}
+.error-text {
+  /* ... */
+}
+```
+
+### Conversion Examples
+
+#### Before (inline classes):
+
+```html
+<div
+  class="bg-white rounded-lg shadow-md p-6 border border-gray-200 hover:shadow-lg transition-shadow"
+>
+  <h2 class="text-xl font-semibold text-gray-900 mb-4">Card Title</h2>
+  <p class="text-gray-600 leading-relaxed">Card content</p>
+</div>
+```
+
+#### After (with @apply and BEM):
+
+```css
+.card {
+  @apply bg-white rounded-lg shadow-md p-6 border border-gray-200;
+  @apply hover:shadow-lg transition-shadow;
+}
+
+.card__title {
+  @apply text-xl font-semibold text-gray-900 mb-4;
+}
+
+.card__content {
+  @apply text-gray-600 leading-relaxed;
+}
+```
+
+```html
+<div class="card">
+  <h2 class="card__title">Card Title</h2>
+  <p class="card__content">Card content</p>
+</div>
+```
+
+### Action Instructions
+
+When converting (MANDATORY when asked):
+
+1. **Analyze the HTML/JSX** for component structure and hierarchy
+2. **Create BEM class names** following Block\_\_Element--Modifier pattern
+3. **Show the CSS @apply implementation** with proper BEM organization
+4. **Provide the updated HTML** with new BEM class names
+5. **Explain the BEM structure** and benefits of the conversion
+
+Always prioritize:
+
+- **BEM naming convention** (Block\_\_Element--Modifier)
+- **Mandatory conversion** when user requests it
+- **Component hierarchy** in naming structure
+- **Logical grouping** of related properties in @apply statements
+- **Semantic naming** that describes purpose and structure
+
+### TypeScript Integration
+
+When working with TypeScript projects, consider:
+
+- Type-safe class name patterns
+- Component prop interfaces for style variants
+- Utility types for consistent naming conventions