emily-css 1.0.8 → 1.0.14

package/CHANGELOG.md

@@ -0,0 +1,154 @@
+# Changelog
+
+All notable changes to `emily-css` are documented here.
+
+---
+
+## v1.0.14 — May 2026
+
+**updated readme**
+
+### Changed
+- updated readme
+
+---
+## v1.0.13 — May 2026
+
+**added functionality to commit to github and then push to npm release**
+
+### Added
+- added functionality to commit to github and then push to npm release
+
+---
+## v1.0.12 — May 2026
+
+****
+
+---
+## v1.0.11 — May 2026
+
+****
+
+---
+## v1.0.10 — May 2026
+
+**Changelog automation**
+
+### Added
+- Release script (`npm run release`) — reads git log, prompts for version bump, writes CHANGELOG.md, commits and tags automatically
+
+---
+
+## v1.0.9 — May 2026
+
+**Showcase server + code block utilities**
+
+### Added
+- Showcase server — run `npm run emily:showcase` to browse components on localhost:3456
+- Code block utilities (`.code-window`, `.token-*`) in generated CSS — VSCode Dark+ style syntax highlighting
+- `pre`/`code` base styles added to `@layer base`
+
+---
+
+## v1.0.8 — May 2026
+
+**Watch mode + build pipeline**
+
+### Added
+- Watch mode — `npx emily-css watch` rebuilds CSS automatically on config change
+- Build + purge can now be chained in a single pipeline
+- npm scripts wired into `package.json` during `npx emily-css init`
+
+### Changed
+- `init.js` provides a more guided setup experience with clearer prompts
+- `bin/emilyui.js` updated to correctly route `watch`/`build`/`purge` subcommands
+
+---
+
+## v1.0.7 — April 2026
+
+**Purge regex fix**
+
+### Fixed
+- Purge crashed when class names contained regex metacharacters (`[`, `]`, `(`, `)`, `{`, `}`, etc). Previously only `:` and `.` were escaped — now uses full metacharacter escaping
+
+---
+
+## v1.0.6 — April 2026
+
+**Dist + font cleanup**
+
+### Changed
+- `dist/` and `fonts/` directories removed from git tracking
+
+### Breaking changes
+- If you were pulling `dist/emily.css` directly from GitHub, run `npx emily-css build` locally instead
+
+---
+
+## v1.0.5 — April 2026
+
+**Split font system**
+
+### Added
+- Separate heading and body font config — `fontFamily.heading` and `fontFamily.body` are now independent
+- Google Fonts CDN integration — fonts loaded via `@import` in generated CSS
+- Font-specific tests added to test suite
+
+### Changed
+- Bundled font files removed from the npm package
+- `emily.config.json` updated with split `fontFamily` structure
+
+### Breaking changes
+- If your config has `fontFamily` as a single string, update it to `{ "heading": "...", "body": "..." }`
+
+---
+
+## v1.0.3 — April 2026
+
+**Package size reduction**
+
+### Changed
+- Demo CSS removed from the published npm package
+
+---
+
+## v1.0.2 — April 2026
+
+**Package distribution fix**
+
+### Added
+- `.npmignore` added — controls which files are included in the published package
+- `dist` files explicitly declared in `package.json` `files` array
+
+### Fixed
+- Unnecessary files (tests, src, docs) were being included in the npm tarball
+
+---
+
+## v1.0.1 — April 2026
+
+**CLI rename fix**
+
+### Fixed
+- Internal references to old `emily-ui` CLI name updated to `emily-css`
+
+### Breaking changes
+- If you had scripts referencing `npx emily-ui`, update them to `npx emily-css`
+
+---
+
+## v1.0.0 — April 2026
+
+**Initial release**
+
+### Added
+- 11,844 utility classes generated from `emily.config.json`
+- OKLCH colour scale generation — one hex in, 10-shade scale out
+- Responsive variants (`sm:` `md:` `lg:` `xl:` `2xl:`)
+- State variants (`hover:` `focus-visible:` `active:` `disabled:` `dark:`)
+- Purge system — strips unused classes, ~97% file size reduction
+- Interactive setup wizard (`npx emily-css init`)
+- 72 tests, all passing
+
+---

package/README.md

@@ -1,307 +1,149 @@
-# EmilyUI
+# emilyCSS
 
-A config-driven utility CSS framework. Define your brand once, generate the CSS.
+**A config-driven design system generator for developers working in constrained or legacy environments.**
 
-**EmilyUI** is the ecosystem name. `emily-css` is the utility layer published on npm. It's both the package you install and the CLI you use to generate and purge CSS. More packages coming.
+Define your brand in one JSON file and generate a production-ready, accessibility-first stylesheet in seconds.
 
-## Features
+## The Mental Model
 
-- **Works anywhere** - Generate static CSS and drop it into any project, no build pipeline required.
-- **Config-driven** - Entire framework configured via `emily.config.json`
-- **Utility-first** - Composable utilities for layout, spacing, typography and colour
-- **Responsive ready** - All utilities work with responsive prefixes (`sm:`, `md:`, `lg:`, `xl:`, `2xl:`)
-- **State variants** - `hover:`, `focus-visible:`, `active:`, `disabled:` built-in
-- **Accessibility first** - WCAG 2.2 AA compliance in core utilities (focus rings, contrast, motion)
-- **Purge system** - Remove unused CSS automatically for production
+emilyCSS is built for real-world systems like **Drupal, Power Pages, WordPress, static HTML**, and other environments where modern build pipelines often don't exist.
 
-## Quick Start
-
-### 1. Install
+1. **Configure** — Define your brand colours, fonts, and spacing in `emily.config.json`
+2. **Generate** — Run one command to produce a clean, optimized CSS file
+3. **Deploy** — Link the stylesheet and copy production-ready components from the showcase
 
-```bash
-npm install emily-css
-```
+## Quick Start
 
-### 2. Create your config
+### 1. Initialize
 
 ```bash
 npx emily-css init
 ```
 
-This walks you through:
+This creates your `emily.config.json`, walks you through your brand settings, and runs your first build.
 
-- Project name
-- Brand colours (primary, secondary, success, warning, error, neutral)
-- Font families
-- Base spacing unit
-- Source directory (used by the purge command)
-
-It then generates `emily.config.json` and runs your first build automatically.
-
-### 3. Link the CSS in your project
+### 2. Link the CSS
 
 ```html
-<link rel="stylesheet" href="./dist/emily.css">
+<link rel="stylesheet" href="./dist/emily.min.css">
 ```
 
-### 4. Use the utility classes
+### 3. Development
 
-```html
-<button class="px-4 py-2 rounded-md bg-primary-80 text-white hover:bg-primary-90 focus-visible:ring-2 focus-visible:ring-primary-50">
-  Button
-</button>
+```bash
+npx emily-css watch     # Rebuilds automatically on config/template changes
+npx emily-css build     # Manual rebuild
 ```
 
-Colours, spacing and typography all come from your config.
-
-### 5. Purge unused CSS for production
+Open the showcase:
 
 ```bash
-npx emily-css purge
+npm run emily:showcase   # Serves at http://localhost:3456
 ```
 
-Scans your template files, keeps only the utilities you actually use.
-
-Output:
-- `dist/emily.purged.css` - Purged CSS
-- `dist/emily.purged.min.css` - Minified version
-
-Use the purged file in production:
+## Core Features
 
-```html
-<link rel="stylesheet" href="./dist/emily.purged.min.css">
-```
+- **Token-Driven Colours** — One hex per colour → balanced 10-shade scale using OKLCH
+- **Predictable Spacing** — Everything scales from your baseUnit
+- **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
 
 ## Commands
 
 ```bash
-npx emily-css init     # Create emily.config.json and run first build
-npx emily-css build    # Regenerate CSS after config changes
-npx emily-css purge    # Remove unused utilities for production
-npm test              # Run test suite (if working on EmilyUI itself)
+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
 ```
 
 ## How Purge Works
 
-EmilyUI scans your template files for class names and removes any utilities you are not using.
-
-For example:
-
-```html
-<div class="p-4 bg-primary-80 rounded-lg">Content</div>
-```
-
-EmilyUI keeps `.p-4`, `.bg-primary-80`, `.rounded-lg` and removes everything else.
-
-Supported file types: `.html`, `.twig`, `.njk`, `.liquid`, `.hbs`, `.jsx`, `.tsx`, `.vue`, `.php`, `.astro`, `.svelte`, `.blade.php` (configurable via `extensions` in `emily.config.json`)
-
-**Note:** Class names must exist as plain text in your files. Dynamically constructed class names will not be detected:
+emilyCSS scans your templates for used class names and removes everything else.
 
-```js
-// This will be missed by purge:
-const colour = 'primary-80'
-const cls = `bg-${colour}`
+Configure it in `emily.config.json`:
 
-// This will be detected:
-const cls = 'bg-primary-80'
+```json
+"purge": {
+  "extensions": [".html", ".php", ".twig", ".liquid", ".jsx", ".vue", ".astro"]
+}
 ```
 
-If you use dynamic classes, either keep them as plain strings or manually safelist them in your config.
-
-## File Size
-
-EmilyUI uses a purge-based approach (generate all utilities, then remove unused).
+**Important:** Dynamically constructed classes (e.g. `bg-${colour}`) are not detected. Use static strings or add them to your safelist.
 
-| | Unpurged | Purged |
-|---|---|---|
-| Tailwind v2 | 2.4-8MB | under 10KB |
-| EmilyUI v1 | 1.1MB | 10-50KB |
-| Tailwind v3/v4 (JIT) | generates on demand | - |
+## File Size (Typical)
 
-EmilyUI's unpurged file is roughly half the size of Tailwind v2. Post-purge sizes are comparable. JIT-style generation is planned for v2.
+| State | Size |
+|-------|------|
+| Full build | ~1.1 MB |
+| After purge | 10–50 KB |
 
-## File Structure
-
-```
-emily-css/
-  ├── src/
-  │   ├── index.js          - Main build script
-  │   ├── generators.js     - Utility generation functions
-  │   ├── purge.js          - Purge system
-  │   ├── purge-cmd.js      - Purge CLI command
-  │   └── init.js           - Interactive setup
-  ├── dist/
-  │   ├── emily.css         - Generated CSS
-  │   ├── emily.min.css     - Minified CSS
-  │   ├── emily.purged.css  - Purged CSS
-  │   └── emily.purged.min.css
-  ├── showcase.html         - Example components
-  ├── emily.config.json     - Your config
-  ├── package.json
-  └── README.md
-```
-
-## Configuration
-
-Edit `emily.config.json` to customise:
+## Configuration Example
 
 ```json
 {
   "name": "My Brand",
-  "description": "Design system",
-
   "baseUnit": "8px",
-  "baseFontSize": "16px",
   "fontFamily": {
     "heading": "lexend",
     "body": "inter"
   },
-
   "colours": {
-    "primary": "#0077b6",
-    "secondary": "#006d9e",
-    "success": "#017f65",
-    "warning": "#ffc107",
-    "error": "#b20000",
-    "neutral": "#6b7280"
-  },
-
-  "breakpoints": {
-    "sm": "640px",
-    "md": "768px",
-    "lg": "1024px",
-    "xl": "1280px",
-    "2xl": "1536px"
+    "primary": "#2563EB",
+    "neutral": "#57534E"
   },
-
   "purge": {
-    "extensions": [".html", ".jsx", ".tsx", ".vue"]
+    "extensions": [".html", ".php", ".jsx", ".vue"]
   }
 }
 ```
 
-After editing, rebuild:
+After changes: `npx emily-css build`
 
-```bash
-npx emily-css build
-```
+## Component Showcase
 
-## Utilities
+After building, run `npm run emily:showcase` and visit `http://localhost:3456`. It contains production-ready, accessible components built with your exact brand.
 
-EmilyUI generates utilities across these categories:
+## EmilyUI vs emilyCSS
 
-- **Display** - block, inline, flex, grid, hidden
-- **Spacing** - margin (`m-`), padding (`p-`), gap (`gap-`)
-- **Sizing** - width (`w-`), height (`h-`), max-width, min-height
-- **Positioning** - absolute, relative, fixed, sticky, top, right, bottom, left
-- **Flexbox** - flex, flex-direction, justify-content, align-items, flex-wrap
-- **Grid** - grid, grid-cols, grid-rows, grid-gap
-- **Colours** - background (`bg-`), text, borders, accent for form controls
-- **Typography** - font-size, font-weight, line-height, text-align
-- **Borders** - border-width, border-style, border-colour, border-radius
-- **Shadows** - box-shadow, text-shadow
-- **Opacity** - opacity levels
-- **Accessibility** - sr-only, focus-visible, motion-safe, forced-colors
-- **State variants** - `hover:`, `focus-visible:`, `active:`, `disabled:`
-- **Responsive variants** - `sm:`, `md:`, `lg:`, `xl:`, `2xl:`
+- **EmilyUI** — The broader brand / ecosystem
+- **emilyCSS** — The current product (`emily-css` npm package + CLI)
 
-## Examples
+## Example Components
 
 ### Button
 
 ```html
-<button class="px-4 py-2 rounded-md bg-primary-80 text-white hover:bg-primary-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-50">
-  Click me
+<button class="px-6 py-3 rounded-lg bg-primary-80 text-white hover:bg-primary-90 focus-visible:ring-2 focus-visible:ring-primary-50 font-medium">
+  Submit
 </button>
 ```
 
 ### Responsive Card
 
 ```html
-<div class="w-full md:w-96 p-4 md:p-6 rounded-lg bg-neutral-10 border-1 border-neutral-30 shadow-md">
-  <h2 class="text-lg font-semibold text-neutral-90">Title</h2>
-  <p class="mt-2 text-sm text-neutral-70">Content</p>
+<div class="w-full md:w-96 p-6 rounded-lg bg-white border border-neutral-30 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>
 ```
 
-### Accessible Form Input
-
-```html
-<label for="email" class="block text-sm font-medium text-neutral-80">
-  Email
-</label>
-<input
-  id="email"
-  type="email"
-  class="mt-1 w-full px-3 py-2 border-1 border-neutral-40 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-50"
-/>
-```
-
-## Accessibility
-
-All utilities are built with WCAG 2.2 AA in mind:
-
-- **Focus rings** - Focus-visible states include proper colour contrast
-- **Colour contrast** - All colour scales meet AA contrast ratios
-- **Motion** - `motion-safe` and `motion-reduce` utilities for users with vestibular disorders
-- **Screen reader support** - `.sr-only` utility for screen-reader-only content
-- **Forced colours** - Utilities respect Windows High Contrast mode
-
-## Testing
-
-```bash
-npm test
-```
-
-72 automated tests covering colour generation, utilities, variants, config integrity, and build output. All passing.
-
-## Troubleshooting
-
-### Styles not applying?
-
-1. Check the responsive prefix: `.md\:flex` not `.md:flex`
-2. Verify class name spelling
-3. Clear browser cache and rebuild: `npx emily-css build`
-
-### File size too large?
-
-```bash
-npx emily-css purge
-```
-
-### Config not applying?
-
-1. Edit `emily.config.json`
-2. Run `npx emily-css build`
-3. No cache invalidation needed
-
 ## Fonts
 
-EmilyUI includes built-in support for **Inter** and **Lexend** via Google Fonts CDN. No font files to download or host. The generated CSS handles the import automatically.
-
-Set `fontFamily` as an object to use different fonts for headings and body:
+emilyCSS applies font stacks but does not include font files. Use `@fontsource` (recommended):
 
-```json
-"fontFamily": {
-  "heading": "lexend",
-  "body": "inter"
-}
-```
-
-Or as a string if you want one font throughout:
-
-```json
-"fontFamily": "inter"
+```bash
+npm install @fontsource/inter @fontsource/lexend
 ```
 
-Supported values: `inter`, `lexend`, `system` (system-ui stack), `georgia`, `mono`.
-
-To use a custom font, set `fontFamily` to any other value and add your own `@import` or `<link>` to your HTML before loading `emily.css`.
+Then import the weights you need.
 
 ## Support
 
-- Website: https://www.emilyui.com
-- GitHub: https://github.com/andyjterry/emily-ui
+- **Website:** https://www.emilyui.com
+- **GitHub:** https://github.com/andyjterry/emily-ui
 
 ## License
 

package/bin/emilyui.js

@@ -6,16 +6,45 @@ if (command === "init") {
   require("../src/init.js");
 } else if (command === "build") {
   const { build } = require("../src/index.js");
-  build();
+  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") {
+  require("../src/showcase.js");
+} else if (command === "help") {
+  console.log(`
+  emily-css — Config-driven CSS framework generator
+  
+  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 showcase    Launch the component showcase in your browser
+    emily-css help        Show this help text
+  
+  npm scripts (added by init):
+    npm run emily:build      Same as emily-css build
+    npm run emily:watch      Same as emily-css watch
+    npm run emily:showcase   Same as emily-css showcase
+    npm run emily:help       Same as emily-css help
+  
+  Docs: https://emilyui.dev
+`);
 } else {
   console.log(`
-emily-css - Config-driven CSS framework generator
+  emily-css — Config-driven CSS framework generator
+
+  Usage:
+    emily-css init        Set up a new project
+    emily-css build       Generate production CSS
+    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
 
-Usage:
-  emily-css init     Set up a new project
-  emily-css build    Generate emily.css from your config
-  emily-css purge    Remove unused utilities for production
+  Run emily-css help for more detail.
 `);
 }

package/package.json

@@ -1,22 +1,27 @@
 {
   "name": "emily-css",
-  "version": "1.0.8",
+  "version": "1.0.14",
   "description": "A config-driven utility CSS framework. Define your brand once, generate the CSS.",
   "main": "src/index.js",
   "bin": {
-    "emily-css": "./bin/emilyui.js"
+    "emily-css": "bin/emilyui.js"
   },
   "files": [
     "bin/",
     "src/",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "CHANGELOG.md"
   ],
   "scripts": {
     "build": "node src/index.js",
     "dev": "nodemon src/index.js",
     "init": "node src/init.js",
-    "test": "node tests/test.js"
+    "test": "node tests/test.js",
+    "emily:showcase": "node src/showcase.js",
+    "commit": "node scripts/commit.js",
+    "release": "node scripts/release.js",
+    "ship": "node scripts/ship.js"
   },
   "keywords": [
     "css",
@@ -36,5 +41,14 @@
   },
   "devDependencies": {
     "nodemon": "^3.0.0"
+  },
+  "dependencies": {
+    "boxen": "^5.1.2",
+    "chalk": "^4.1.2",
+    "chokidar": "^5.0.0",
+    "cross-spawn": "^7.0.6",
+    "emily-css": "^1.0.8",
+    "enquirer": "^2.4.1",
+    "ora": "^5.4.1"
   }
 }

package/src/generators.js

@@ -483,6 +483,38 @@ function containerUtilities() {
 `;
 }
 
+// ============================================================================
+// CODE BLOCK UTILITIES
+// ============================================================================
+// Styles pre/code elements to look like a VSCode Dark+ editor out of the box.
+// All colours are fixed VSCode Dark+ values — not config-driven, because code
+// editor chrome should always look like a code editor regardless of brand.
+function codeUtilities() {
+  return `/* Code — window chrome */
+.code-window { border-radius: 8px; overflow: hidden; border: 1px solid #3c3c3c; }
+.code-title-bar { background-color: #2d2d2d; padding: 0.5rem 1rem; display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid #3c3c3c; }
+.code-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
+.code-dot-red { background-color: #ff5f57; }
+.code-dot-yellow { background-color: #ffbd2e; }
+.code-dot-green { background-color: #28c840; }
+.code-filename { font-family: "Menlo", "Monaco", "Courier New", monospace; font-size: 0.85rem; color: white; margin-left: 0.5rem; }
+
+/* Code — VSCode Dark+ token colours */
+.token-tag { color: #569cd6; }
+.token-attr { color: #9cdcfe; }
+.token-string { color: #ce9178; }
+.token-number { color: #b5cea8; }
+.token-variant { color: #4ec9b0; }
+.token-utility { color: #dcdcaa; }
+.token-colour { color: #6a9955; }
+.token-comment { color: #6a9955; opacity: 0.75; font-style: italic; }
+.token-keyword { color: #c586c0; }
+.token-operator { color: #d4d4d4; }
+.token-line-number { color: #858585; user-select: none; padding-right: 1rem; display: inline-block; min-width: 2rem; text-align: right; }
+
+`;
+}
+
 module.exports = {
   displayUtilities,
   sizingUtilities,
@@ -502,5 +534,6 @@ module.exports = {
   blendUtilities,
   cursorUtilities,
   accessibilityUtilities,
-  containerUtilities
+  containerUtilities,
+  codeUtilities
 };