emily-css 1.0.17 → 1.0.19

package/CHANGELOG.md

@@ -4,6 +4,19 @@ All notable changes to `emily-css` are documented here.
 
 ---
 
+## v1.0.19 — May 2026
+
+**Add framework-aware output paths and bundled showcase template**
+
+---
+## v1.0.18 — May 2026
+
+****
+
+### Changed
+- added more utitlies as a code block
+
+---
 ## v1.0.17 — May 2026
 
 **added new utilties, and added component patterns**

package/README.md

@@ -20,7 +20,7 @@ emilyCSS is built for real-world systems like **Drupal, Power Pages, WordPress,
 npx emily-css init
 ```
 
-This creates your `emily.config.json`, walks you through your brand settings, and runs your first build.
+This creates your `emily.config.json`, walks you through your brand settings (colours, fonts, spacing, etc.), and runs your first build.
 
 ### 2. Link the CSS
 
@@ -28,17 +28,13 @@ This creates your `emily.config.json`, walks you through your brand settings, an
 <link rel="stylesheet" href="./dist/emily.min.css">
 ```
 
-### 3. Development
+### 3. Start Building
 
-```bash
-npx emily-css watch     # Rebuilds automatically on config/template changes
-npx emily-css build     # Manual rebuild
-```
-
-Open the showcase:
+Use the generated utilities and browse the showcase for ready-to-copy components.
 
 ```bash
-npm run emily:showcase   # Serves at http://localhost:3456
+npx emily-css build     # Rebuild after config changes
+npx emily-css watch     # Watch mode for development
 ```
 
 ## Core Features
@@ -48,30 +44,24 @@ npm run emily:showcase   # Serves at http://localhost:3456
 - **Accessibility First** — Focus-visible rings, motion utilities, WCAG 2.2 AA colours
 - **No Build Pipeline Required** — Just a static CSS file
 - **Smart Purge** — Remove unused utilities for tiny production files
-- **UI Starter Kit** — Copy-paste accessible components from the showcase
+- **UI Starter Kit** — Copy-paste accessible components from showcase.html
 
 ## Commands
 
 ```bash
-npx emily-css init      # Setup + first build
-npx emily-css build     # Regenerate CSS
-npx emily-css watch     # Development watch mode
-npx emily-css purge     # Remove unused styles for production
+npx emily-css init     # Setup config + first build
+npx emily-css build    # Regenerate CSS
+npx emily-css watch    # Development watch mode
+npx emily-css purge    # Remove unused styles for production
 ```
 
 ## How Purge Works
 
 emilyCSS scans your templates for used class names and removes everything else.
 
-Configure it in `emily.config.json`:
-
-```json
-"purge": {
-  "extensions": [".html", ".php", ".twig", ".liquid", ".jsx", ".vue", ".astro"]
-}
-```
+Supported files: `.html`, `.php`, `.twig`, `.liquid`, `.jsx`, `.vue`, `.astro`, etc. (configurable).
 
-**Important:** Dynamically constructed classes (e.g. `bg-${colour}`) are not detected. Use static strings or add them to your safelist.
+**Important:** Dynamically constructed classes like `bg-${colour}` are not detected. Use static strings or add them to the safelist.
 
 ## File Size (Typical)
 
@@ -80,7 +70,9 @@ Configure it in `emily.config.json`:
 | Full build | ~1.1 MB |
 | After purge | 10–50 KB |
 
-## Configuration Example
+## Configuration
+
+Edit `emily.config.json`:
 
 ```json
 {
@@ -95,7 +87,7 @@ Configure it in `emily.config.json`:
     "neutral": "#57534E"
   },
   "purge": {
-    "extensions": [".html", ".php", ".jsx", ".vue"]
+    "content": ["./**/*.{html,php,jsx,tsx,vue}"]
   }
 }
 ```
@@ -104,12 +96,12 @@ After changes: `npx emily-css build`
 
 ## Component Showcase
 
-After building, run `npm run emily:showcase` and visit `http://localhost:3456`. It contains production-ready, accessible components built with your exact brand.
+After your first build, open `showcase.html` in your browser. It contains production-ready, accessible components (buttons, forms, alerts, cards, etc.) built with your brand.
 
 ## EmilyUI vs emilyCSS
 
 - **EmilyUI** — The broader brand / ecosystem
-- **emilyCSS** — The current product (`emily-css` npm package + CLI)
+- **emilyCSS** — The current product (the emily-css npm package + CLI)
 
 ## Example Components
 
@@ -124,7 +116,7 @@ After building, run `npm run emily:showcase` and visit `http://localhost:3456`.
 ### Responsive Card
 
 ```html
-<div class="w-full md:w-96 p-6 rounded-lg bg-white border border-neutral-30 shadow-sm">
+<div class="w-full md:w-96 p-6 rounded-xl bg-white border border-neutral-20 shadow-sm">
   <h2 class="text-2xl font-semibold text-neutral-90">Card Title</h2>
   <p class="mt-3 text-neutral-70">Content goes here.</p>
 </div>
@@ -132,7 +124,7 @@ After building, run `npm run emily:showcase` and visit `http://localhost:3456`.
 
 ## Fonts
 
-emilyCSS applies font stacks but does not include font files. Use `@fontsource` (recommended):
+emilyCSS applies font stacks but does not include font files. Recommended approach:
 
 ```bash
 npm install @fontsource/inter @fontsource/lexend
@@ -147,4 +139,4 @@ Then import the weights you need.
 
 ## License
 
-MIT
+MIT

package/bin/emilyui.js

@@ -7,8 +7,6 @@ if (command === "init") {
 } else if (command === "build") {
   const { build } = require("../src/index.js");
   build({ keepFull: process.argv.includes("--keep-full") });
-} else if (command === "purge") {
-  require("../src/purge-cmd.js");
 } else if (command === "watch") {
   require("../src/watch.js");
 } else if (command === "showcase") {
@@ -19,9 +17,8 @@ if (command === "init") {
   
   Commands:
     emily-css init        Set up a new project (interactive wizard)
-    emily-css build       Generate production CSS to dist/emily.min.css
-    emily-css watch       Dev mode: watch for config changes and rebuild
-    emily-css purge       Scan project files and remove unused utilities
+    emily-css build       Generate production CSS to the configured output path
+    emily-css watch       Dev mode: watch for changes and rebuild
     emily-css showcase    Launch the component showcase in your browser
     emily-css help        Show this help text
   
@@ -39,12 +36,11 @@ if (command === "init") {
 
   Usage:
     emily-css init        Set up a new project
-    emily-css build       Generate production CSS
+    emily-css build       Generate production CSS to the configured output path
     emily-css watch       Dev mode: rebuild on changes
-    emily-css purge       Remove unused utilities
     emily-css showcase    Browse components in your browser
     emily-css help        Full command reference
 
   Run emily-css help for more detail.
 `);
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "emily-css",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "description": "A config-driven utility CSS framework. Define your brand once, generate the CSS.",
   "main": "src/index.js",
   "bin": {
@@ -9,6 +9,7 @@
   "files": [
     "bin/",
     "src/",
+    "templates/",
     "README.md",
     "LICENSE",
     "CHANGELOG.md"
@@ -22,7 +23,10 @@
     "emily:showcase": "node src/showcase.js",
     "commit": "node scripts/commit.js",
     "release": "node scripts/release.js",
-    "ship": "node scripts/ship.js"
+    "ship": "node scripts/ship.js",
+    "emily:build": "emily-css build",
+    "emily:watch": "emily-css watch",
+    "emily:help": "emily-css help"
   },
   "keywords": [
     "css",
@@ -50,6 +54,7 @@
     "cross-spawn": "^7.0.6",
     "emily-css": "^1.0.8",
     "enquirer": "^2.4.1",
+    "fast-glob": "^3.3.3",
     "ora": "^5.4.1"
   }
 }

package/src/index.js

@@ -867,28 +867,54 @@ function generatePatternComponents() {
 // BUILD FUNCTION
 // ============================================================================
 
-function buildFullFramework() {
-  const configPath = path.join(process.cwd(), 'emily.config.json');
+function getConfigPath() {
+  return path.join(process.cwd(), 'emily.config.json');
+}
+
+function getConfig() {
+  const configPath = getConfigPath();
+
   if (!fs.existsSync(configPath)) {
-    console.error(`\n  emily-css: No config found.\n  Expected: ${configPath}\n  Run "emily-css init" to create one.\n`);
+    console.error('\n  emily-css: No config found. Run "emily-css init" first.\n');
     process.exit(1);
   }
-  const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
+
+  return JSON.parse(fs.readFileSync(configPath, 'utf8'));
+}
+
+function getFullCssPath(config) {
+  return path.join(process.cwd(), config.output?.fullCss || 'dist/emily.css');
+}
+
+function getProductionCssPath(config) {
+  return path.join(process.cwd(), config.output?.css || 'dist/emily.min.css');
+}
+
+function ensureDirectoryForFile(filePath) {
+  const dir = path.dirname(filePath);
+
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+  }
+}
+
+function getSourceDir(config) {
+  return config.purge?.sourceDir || '.';
+}
+
+function buildFullFramework() {
+  const config = getConfig();
 
   console.log('Building EmilyCSS full framework...');
 
-  // Generate colours
   const colours = generateAllColours(config.colours);
   console.log(`✓ Generated ${Object.keys(colours).length} colour scales`);
 
-  // Generate spacing
   const spacing = generateSpacing(config.baseUnit, config.spacing.scale);
   console.log(`✓ Generated ${Object.keys(spacing).length} spacing values`);
 
-  // 1. Generate Variables (Theme Layer)
   const variablesCss = generateCSSVariables(colours, spacing, config);
 
-  // 2. Generate Utilities (Utilities Layer)
   let utilityCss = '';
   utilityCss += displayUtilities();
   utilityCss += generateSpacingUtilities(spacing);
@@ -923,21 +949,16 @@ function buildFullFramework() {
   utilityCss += backgroundUtilities();
   utilityCss += filterUtilities();
 
-  // Add state, dark mode, and responsive variants to utilities
   utilityCss = addStateVariants(utilityCss);
   utilityCss = addDarkModeVariants(utilityCss);
   utilityCss = addResponsiveVariants(utilityCss, config);
 
-  // 3. Assemble Final CSS with Layers
-  // Layer order matters: later layers win over earlier ones.
-  // theme  → CSS custom properties / design tokens
-  // base   → box-sizing reset, font-face, body defaults
-  // components → reserved for future component styles
-  // utilities  → generated utility classes (highest priority)
   const { fontFace, bodyFont } = generateFontCSS(config);
+
   const fontLabel = typeof config.fontFamily === 'object'
     ? 'heading: ' + (config.fontFamily.heading || 'system') + ', body: ' + (config.fontFamily.body || 'system')
     : (config.fontFamily || 'system');
+
   console.log('✓ Font: ' + fontLabel);
 
   const baseCss = `
@@ -946,7 +967,6 @@ function buildFullFramework() {
     box-sizing: border-box;
   }
 
-  /* Remove default margin/padding on common elements */
   body, h1, h2, h3, h4, h5, h6, p,
   ul, ol, dl, dd, figure, blockquote,
   fieldset, textarea, pre {
@@ -954,23 +974,19 @@ function buildFullFramework() {
     padding: 0;
   }
 
-  /* Lists: remove bullets/numbers when unstyled */
   ul, ol {
     list-style: none;
   }
 
-  /* Inherit fonts for form elements */
   input, button, textarea, select {
     font: inherit;
   }
 
-  /* Sensible media defaults */
   img, picture, video, canvas, svg {
     display: block;
     max-width: 100%;
   }
 
-  /* Remove default button styles */
   button {
     background: none;
     border: none;
@@ -978,22 +994,38 @@ function buildFullFramework() {
     padding: 0;
   }
 
-  /* Avoid overflow on long words */
   p, h1, h2, h3, h4, h5, h6 {
     overflow-wrap: break-word;
   }
 
-  /* Code blocks — VSCode Dark+ style by default */
+  code {
+    font-family: "Menlo", "Monaco", "Courier New", monospace;
+    font-size: 0.875em;
+    background-color: #0d0c0b;
+    color: #a3c986;
+    padding: 0.125rem 0.4rem;
+    border-radius: 4px;
+    display: inline;
+  }
+
+  code.block {
+    display: block;
+    padding: 0.625rem 1rem;
+    border-radius: 6px;
+    font-size: 0.8125rem;
+    line-height: 1.6;
+  }
+
   pre {
-    background-color: #1e1e1e;
-    color: #d4d4d4;
+    background-color: #0d0c0b;
+    color: #e4e0db;
     padding: 1.25rem;
-    border-radius: 0 0 6px;
+    border-radius: 6px;
     overflow-x: auto;
     font-family: "Menlo", "Monaco", "Courier New", monospace;
     font-size: 0.875rem;
     line-height: 1.7;
-    border: 1px solid #333;
+    border: 1px solid #2a2520;
   }
 
   pre code {
@@ -1003,38 +1035,25 @@ function buildFullFramework() {
     color: inherit;
     font-size: inherit;
     font-family: inherit;
-  }
-
-  /* Inline code */
-  code {
-    font-family: "Menlo", "Monaco", "Courier New", monospace;
-    font-size: 0.875em;
-    background-color: #2d2d2d;
-    color: #d4d4d4;
-    padding: 0.125rem 0.375rem;
-    border-radius: 4px;
+    display: inline;
   }
 ${bodyFont}`;
 
-  // @font-face must sit outside @layer for broadest browser compatibility
   let css = fontFace ? `${fontFace}\n` : '';
   css += `@layer theme, base, components, utilities;\n\n`;
   css += `@layer theme {\n${variablesCss}}\n\n`;
+
   const baseStylesCss = generateBaseStyles(config);
   css += `@layer base {${baseCss}${baseStylesCss}}\n\n`;
   css += `@layer components {\n${generatePatternComponents()}}\n\n`;
   css += `@layer utilities {\n${utilityCss}}\n`;
 
-  // Write output
-  const outputPath = path.join(process.cwd(), 'dist/emily.css');
-  const outputDir = path.dirname(outputPath);
+  const fullCssPath = getFullCssPath(config);
 
-  if (!fs.existsSync(outputDir)) {
-    fs.mkdirSync(outputDir, { recursive: true });
-  }
+  ensureDirectoryForFile(fullCssPath);
+  fs.writeFileSync(fullCssPath, css);
 
-  fs.writeFileSync(outputPath, css);
-  console.log(`✓ Generated CSS: ${outputPath}`);
+  console.log(`✓ Generated CSS: ${fullCssPath}`);
   console.log(`✓ File size: ${(css.length / 1024).toFixed(2)} KB (unminified)`);
   console.log('Full framework build complete');
 }
@@ -1049,55 +1068,44 @@ function minify(css) {
     .trim();
 }
 
-function getConfig() {
-  const configPath = path.join(process.cwd(), 'emily.config.json');
-
-  if (!fs.existsSync(configPath)) {
-    console.error('\n  emily-css: No config found. Run "emily-css init" first.\n');
-    process.exit(1);
-  }
-
-  return JSON.parse(fs.readFileSync(configPath, 'utf8'));
-}
-
-function getSourceDir(config) {
-  return config.purge && config.purge.sourceDir ? config.purge.sourceDir : '.';
-}
-
 function buildProductionCss() {
   const config = getConfig();
   const sourceDir = getSourceDir(config);
-  const cssPath = path.join(process.cwd(), 'dist/emily.css');
-  const minPath = path.join(process.cwd(), 'dist/emily.min.css');
+  const fullCssPath = getFullCssPath(config);
+  const productionCssPath = getProductionCssPath(config);
 
-  if (!fs.existsSync(cssPath)) {
+  if (!fs.existsSync(fullCssPath)) {
     buildFullFramework();
   }
 
   const { purgeCSS } = require('./purge.js');
-  const css = fs.readFileSync(cssPath, 'utf8');
+  const css = fs.readFileSync(fullCssPath, 'utf8');
   const purged = purgeCSS(css, sourceDir, config);
   const minified = minify(purged);
 
-  fs.writeFileSync(minPath, minified);
+  ensureDirectoryForFile(productionCssPath);
+  fs.writeFileSync(productionCssPath, minified);
 
   return {
     css,
     purged,
     minified,
     originalSize: Buffer.byteLength(css, 'utf8'),
-    outputSize: Buffer.byteLength(minified, 'utf8')
+    outputSize: Buffer.byteLength(minified, 'utf8'),
+    outputPath: productionCssPath,
+    fullCssPath,
   };
 }
 
 function isFrameworkStale() {
-  const configPath = path.join(process.cwd(), 'emily.config.json');
-  const cssPath = path.join(process.cwd(), 'dist/emily.css');
+  const config = getConfig();
+  const configPath = getConfigPath();
+  const fullCssPath = getFullCssPath(config);
 
-  if (!fs.existsSync(cssPath)) return true;
+  if (!fs.existsSync(fullCssPath)) return true;
   if (!fs.existsSync(configPath)) return true;
 
-  return fs.statSync(configPath).mtimeMs > fs.statSync(cssPath).mtimeMs;
+  return fs.statSync(configPath).mtimeMs > fs.statSync(fullCssPath).mtimeMs;
 }
 
 function ensureFullFramework() {
@@ -1109,18 +1117,19 @@ function ensureFullFramework() {
 function build(options = {}) {
   ensureFullFramework();
 
+  const config = getConfig();
+  const fullCssPath = getFullCssPath(config);
   const result = buildProductionCss();
-  const cssPath = path.join(process.cwd(), 'dist/emily.css');
 
-  console.log('✓ Generated production CSS: dist/emily.min.css');
+  console.log('✓ Generated production CSS: ' + path.relative(process.cwd(), result.outputPath));
   console.log('✓ File size: ' + (result.outputSize / 1024).toFixed(2) + ' KB');
 
-  if (!options.keepFull && fs.existsSync(cssPath)) {
+  if (!options.keepFull && fs.existsSync(fullCssPath)) {
     try {
-      fs.unlinkSync(cssPath);
-      console.log('Removed dist/emily.css for production build.');
-    } catch (e) {
-      // Windows FUSE: can't delete, non-fatal
+      fs.unlinkSync(fullCssPath);
+      console.log('Removed ' + path.relative(process.cwd(), fullCssPath) + ' for production build.');
+    } catch (error) {
+      // Windows FUSE: cannot always delete files cleanly, non-fatal.
     }
   }