emily-css 1.2.1 → 1.2.3

package/CHANGELOG.md

@@ -1,87 +1,145 @@
-# Changelog
-
-All notable changes to `emily-css` are documented here.
-
----
-## v1.2.0-alpha.0 — May 2026
-
-### Added
-- Report-only Tailwind-to-EmilyCSS migration command: `emily-css migrate`.
-- Default semantic migration mode for design-token aligned suggestions.
-- Imported palette mode via `emily-css migrate --import-colours` for visual parity mapping suggestions.
-- Detection and reporting for arbitrary value utilities during migration analysis.
-
-### Notes
-- Migration in this alpha is analysis-only: no source files are modified by `migrate`.
-
----
-## v1.1.0 — May 2026
-
-### Added
-- Added `emily-css doctor`, a manifest-powered project checker that scans configured source files and reports unknown EmilyCSS classes with suggestions.
-- Added variant-aware class validation for responsive, state, ARIA, data-state, motion, dark, and forced-colours variants.
-
+# Changelog
+
+All notable changes to `emily-css` are documented here.
+
 ---
 
-## v1.2.1 — May 2026
+## v1.2.3 — May 2026
 
-**Refactor utility generators into modules**
+****
 
 ---
-## v1.2.1 — May 2026
-
-**updated the full system to be more efficient**
+## v1.2.2 — May 2026
 
 ### Added
-- updated the full system to be more efficient
+- Added IntelliSense JSON generation via `intellisense` config output (`dist/emily.intellisense.json` by default).
+- Added build profiling via `emily-css build --profile` with coarse timing buckets.
+- Added initial accessibility warnings to `emily-css doctor` (focus removal, same token text/background, and `cursor-pointer` on non-interactive elements).
+- Added documentation stubs in `docs/` for installation, configuration, variants, accessibility, doctor, migrate, manifest, and IntelliSense.
 
 ### Changed
-- updated release logic
-
----
-## v1.1.1 — May 2026
-
-**updated changes and added**
-
-### Added
-- updted changes
-
----
-## v1.1.0 — May 2026
-
-**add utility manifest generation): chore: release v1.1.0**
-
-### Added
-- add utility manifest generation): chore: release v1.1.0
-
----
-## v1.0.29 — May 2026
-
-**added json manifest for future use**
-
-### Added
-- added json manifest for future use
-
----
-## v1.0.28 — May 2026
-
-**added new utilities**
+- Stabilised manifest schema metadata with explicit `schemaVersion`, package name, and package version fields.
+- Improved purge class extraction for complex variant patterns and safer junk filtering.
+- Updated README to reflect current product direction and command surface.
 
-### Changed
-- added new utilties and tests
+### Notes
+- EmilyCSS remains CommonJS-compatible and continues to support Node 16+.
+- ESM-only dependency major upgrades remain intentionally deferred for compatibility.
 
 ---
-## v1.0.27 — May 2026
-
-**colour system redesign — brand/accent tokens + semantic colours (v1.0.23)**
-
-### Added
-- colour system redesign — brand/accent tokens + semantic colours (v1.0.23)
 
-### Changed
-- updated utilties and new showcase
-
----
+## v1.2.1 — May 2026
+
+### Changed
+- Refactored utility generators into smaller internal modules.
+- Kept `src/generators.js` as a compatibility shim so existing imports continue to work.
+- Moved shared defaults into `src/constants.js`.
+- Updated watch mode so configured purge ignore rules are respected consistently.
+- Improved release hardening and package output checks.
+
+### Fixed
+- Kept dependency versions on CommonJS-compatible majors to support Node 16+.
+- Avoided ESM-only dependency upgrades that would break the current CommonJS CLI.
+
+### Dependency compatibility
+EmilyCSS intentionally stays on CommonJS-compatible dependency majors for now:
+
+- `chalk@4`
+- `ora@5`
+- `boxen@5`
+- `chokidar@4`
+
+Newer major versions are ESM-focused and may require newer Node versions. EmilyCSS currently supports Node 16+ and CommonJS.
+
+---
+
+## v1.2.0-alpha.0 — May 2026
+
+### Added
+- Report-only Tailwind-to-EmilyCSS migration command: `emily-css migrate`.
+- Default semantic migration mode for design-token aligned suggestions.
+- Imported palette mode via `emily-css migrate --import-colours` for visual parity mapping suggestions.
+- Detection and reporting for arbitrary value utilities during migration analysis.
+
+### Notes
+- Migration in this alpha is analysis-only. No source files are modified by `migrate`.
+
+---
+
+## v1.1.1 — May 2026
+
+### Added
+- Utility manifest generation for future tooling, doctor checks, migration support, and editor integrations.
+
+---
+
+## v1.1.0 — May 2026
+
+### Added
+- Added `emily-css doctor`, a manifest-powered project checker that scans configured source files and reports unknown EmilyCSS classes with suggestions.
+- Added variant-aware class validation for responsive, state, ARIA, data-state, motion, dark, and forced-colours variants.
+
+---
+
+## v1.2.1 — May 2026
+
+**Refactor utility generators into modules**
+
+---
+## v1.2.1 — May 2026
+
+**updated the full system to be more efficient**
+
+### Added
+- updated the full system to be more efficient
+
+### Changed
+- updated release logic
+
+---
+## v1.1.1 — May 2026
+
+**updated changes and added**
+
+### Added
+- updted changes
+
+---
+## v1.1.0 — May 2026
+
+**add utility manifest generation): chore: release v1.1.0**
+
+### Added
+- add utility manifest generation): chore: release v1.1.0
+
+---
+## v1.0.29 — May 2026
+
+**added json manifest for future use**
+
+### Added
+- added json manifest for future use
+
+---
+## v1.0.28 — May 2026
+
+**added new utilities**
+
+### Changed
+- added new utilties and tests
+
+---
+## v1.0.27 — May 2026
+
+**colour system redesign — brand/accent tokens + semantic colours (v1.0.23)**
+
+### Added
+- colour system redesign — brand/accent tokens + semantic colours (v1.0.23)
+
+### Changed
+- updated utilties and new showcase
+
+---
 # Changelog
 
 All notable changes to `emily-css` are documented here.

package/README.md

@@ -1,158 +1,107 @@
 # emilyCSS
 
-**A config-driven design system generator for developers working in constrained or legacy environments.**
+Token-first, framework-agnostic CSS generation for teams that want predictable utilities without adopting a full app framework.
 
-Define your brand in one JSON file and generate a production-ready, accessibility-first stylesheet in seconds.
+## What emilyCSS is
 
-## The Mental Model
+emilyCSS lets you define design tokens in `emily.config.json` and generate static CSS you can use anywhere: HTML, Drupal, WordPress, Power Pages, React, Vue, and other environments.
 
-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.
+## Why teams use it
 
-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
+- Token-first utility generation from your own colours, spacing, typography, and motion settings
+- Framework-agnostic output (`dist/emily.css` and `dist/emily.min.css`)
+- Accessibility-focused utility coverage (focus rings, visually-hidden helpers, motion-aware variants)
+- Tooling support with manifest and IntelliSense JSON generation
+- CommonJS package with Node 16+ compatibility
 
-## Quick Start
-
-### 1. Initialize
+## Install and basic workflow
 
 ```bash
+npm install emily-css
 npx emily-css init
+npx emily-css build
+npx emily-css watch
 ```
 
-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
+Link production CSS in your project:
 
 ```html
 <link rel="stylesheet" href="./dist/emily.min.css">
 ```
 
-### 3. Start Building
-
-Use the generated utilities and browse the showcase for ready-to-copy components.
-
-```bash
-npx emily-css build     # Rebuild after config changes
-npx emily-css watch     # Watch mode for development
-```
-
-## Core Features
-
-- **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 showcase.html
-
-## Commands
+## Core commands
 
 ```bash
-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
-npx emily-css migrate  # Report-only Tailwind-to-EmilyCSS migration analysis
-  --import-colours     # Imported palette mode (visual parity class suggestions)
+npx emily-css init
+npx emily-css build
+npx emily-css build --profile
+npx emily-css watch
+npx emily-css doctor
+npx emily-css migrate
+npx emily-css migrate --import-colours
+npx emily-css showcase
+npx emily-css help
+npx emily-css version
 ```
 
-## Migration (1.2.0-alpha)
-
-- `emily-css migrate` is report-only and does not modify files.
-- Default migration mode is semantic (`gray/slate/zinc/stone` remap toward `neutral` naming).
-- `emily-css migrate --import-colours` enables imported palette mode for parity-oriented palette suggestions.
-- Arbitrary value utilities (for example `w-[37px]`, `bg-[#0f172a]`) are detected and reported as unsupported.
+## Doctor and migrate
 
-## How Purge Works
+- `doctor` checks for unknown EmilyCSS classes and variants.
+- `doctor` now also reports non-failing accessibility warnings (for example obvious focus-removal or same-token text/background patterns).
+- `migrate` is report-only and helps plan Tailwind-to-Emily migrations without modifying files.
 
-emilyCSS scans your templates for used class names and removes everything else.
+## Manifest and IntelliSense JSON
 
-Supported files: `.html`, `.php`, `.twig`, `.liquid`, `.jsx`, `.vue`, `.astro`, etc. (configurable).
+Enable machine-readable outputs when needed:
 
-**Important:** Dynamically constructed classes like `bg-${colour}` are not detected. Use static strings or add them to the safelist.
+```json
+{
+  "manifest": true,
+  "intellisense": {
+    "enabled": true,
+    "output": "dist/emily.intellisense.json"
+  }
+}
+```
 
-## File Size (Typical)
+Generated files:
 
-| State | Size |
-|-------|------|
-| Full build | ~1.1 MB |
-| After purge | 10–50 KB |
+- `dist/emily.manifest.json`
+- `dist/emily.intellisense.json`
 
-## Configuration
+These files are intended for tooling, audits, and editor integrations. A VSCode extension is not required for generation.
 
-Edit `emily.config.json`:
+## Minimal configuration example
 
 ```json
 {
   "name": "My Brand",
-  "baseUnit": "8px",
   "fontFamily": {
-    "heading": "lexend",
+    "heading": "atkinson",
     "body": "inter"
   },
   "colours": {
-    "brand": "#2563EB",
-    "accent": "#2563EB",
-    "btn-primary": "#2563EB",
-    "btn-secondary": "#2563EB",
-    "neutral": "#57534E"
+    "brand": "#0077B6",
+    "accent": "#0EA5E9",
+    "neutral": "#57534E",
+    "success": "#0F766E",
+    "error": "#B91C1C"
   },
-  "semanticColours": {
-    "dark": "#1A1A1A",
-    "light": "#FAFAFA"
-  },
-  "purge": {
-    "content": ["./**/*.{html,php,jsx,tsx,vue}"]
-  }
+  "manifest": true,
+  "intellisense": true
 }
 ```
 
-After changes: `npx emily-css build`
-
-## Component Showcase
-
-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 (the emily-css npm package + CLI)
-
-## Example Components
-
-### Button
-
-```html
-<button class="px-6 py-3 rounded-lg bg-brand-80 text-white hover:bg-brand-90 focus-visible:ring-2 focus-visible:ring-brand-50 font-medium">
-  Submit
-</button>
-```
-
-### Responsive Card
-
-```html
-<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>
-```
-
-## Fonts
-
-emilyCSS applies font stacks but does not include font files. Recommended approach:
-
-```bash
-npm install @fontsource/inter @fontsource/lexend
-```
+## Notes on compatibility
 
-Then import the weights you need.
+- Package format: CommonJS
+- Runtime support: Node 16+
+- ESM-only major upgrades are intentionally avoided where they would break compatibility
 
-## Support
+## Documentation stubs
 
-- **Website:** https://www.emilyui.com
-- **GitHub:** https://github.com/andyjterry/emily-ui
+Starter docs are available in [`docs/`](./docs) for installation, configuration, variants, accessibility, doctor, migrate, manifest, and IntelliSense.
 
 ## License
 
-MIT
+MIT

package/bin/emilyui.js

@@ -10,6 +10,7 @@ const usageText = `
   Usage:
     emily-css init        Set up a new project
     emily-css build       Generate production CSS to the configured output path
+      --profile           Print coarse build timing information
     emily-css watch       Dev mode: rebuild on changes
     emily-css doctor      Scan project files for unknown EmilyCSS classes
     emily-css migrate     Generate a Tailwind-to-EmilyCSS migration report
@@ -24,7 +25,10 @@ if (command === "init") {
   require("../src/init.js");
 } else if (command === "build") {
   const { build } = require("../src/index.js");
-  build({ keepFull: process.argv.includes("--keep-full") });
+  build({
+    keepFull: process.argv.includes("--keep-full"),
+    profile: process.argv.includes("--profile"),
+  });
 } else if (command === "watch") {
   require("../src/watch.js");
 } else if (command === "showcase") {
@@ -48,6 +52,7 @@ if (command === "init") {
   Commands:
     emily-css init        Set up a new project (interactive wizard)
     emily-css build       Generate production CSS to the configured output path
+      --profile           Print coarse build timing information
     emily-css watch       Dev mode: watch for changes and rebuild
     emily-css doctor      Scan project files for unknown EmilyCSS classes
     emily-css migrate     Generate a Tailwind-to-EmilyCSS migration report

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "emily-css",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "A config-driven utility CSS framework. Define your brand once, generate the CSS.",
   "main": "src/index.js",
   "bin": {
@@ -45,12 +45,12 @@
     "node": ">=16.0.0"
   },
   "devDependencies": {
-    "nodemon": "^3.0.0"
+    "nodemon": "^3.1.14"
   },
   "dependencies": {
     "boxen": "^5.1.2",
     "chalk": "^4.1.2",
-    "chokidar": "^5.0.0",
+    "chokidar": "^4.0.3",
     "cross-spawn": "^7.0.6",
     "enquirer": "^2.4.1",
     "fast-glob": "^3.3.3",

package/src/doctor.js

@@ -185,6 +185,102 @@ function loadManifest(config, css) {
   return generateManifest(css, config);
 }
 
+const INTERACTIVE_TAGS = new Set([
+  "a",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "summary",
+  "option",
+]);
+
+const VISIBLE_FOCUS_CLASSES = new Set([
+  "focus-ring",
+  "focus-visible:ring-2",
+  "outline",
+  "outline-2",
+]);
+const KNOWN_CLASS_SHIMS = new Set(["focus-ring-none"]);
+
+function parseElementClassLists(content) {
+  const entries = [];
+  const classAttrRegex =
+    /<([a-zA-Z][a-zA-Z0-9-]*)\b[^>]*?\b(?:class|className)\s*=\s*(["'])([\s\S]*?)\2[^>]*?>/g;
+  let match;
+
+  while ((match = classAttrRegex.exec(content)) !== null) {
+    const tagName = match[1].toLowerCase();
+    const classes = match[3]
+      .split(/\s+/)
+      .map((cls) => cls.trim())
+      .filter(Boolean);
+
+    entries.push({ tagName, classes });
+  }
+
+  return entries;
+}
+
+function hasVisibleFocusReplacement(classes) {
+  return classes.some((className) => VISIBLE_FOCUS_CLASSES.has(className));
+}
+
+function extractColourToken(className, prefix) {
+  const match = className.match(new RegExp(`^${prefix}([a-z][a-z0-9-]*-\\d{1,3})$`));
+  return match ? match[1] : null;
+}
+
+function createAccessibilityWarnings(filePath, content) {
+  const warnings = [];
+  const classEntries = parseElementClassLists(content);
+
+  classEntries.forEach(({ tagName, classes }) => {
+    if (classes.includes("focus-ring-none") && !hasVisibleFocusReplacement(classes)) {
+      warnings.push({
+        file: filePath,
+        reason: "focus-removal",
+        className: "focus-ring-none",
+        message:
+          'focus-ring-none removes visible focus styles without a replacement focus class.',
+      });
+    }
+
+    const bgTokens = new Set();
+    const textTokens = new Set();
+
+    classes.forEach((className) => {
+      const bgToken = extractColourToken(className, "bg-");
+      const textToken = extractColourToken(className, "text-");
+
+      if (bgToken) bgTokens.add(bgToken);
+      if (textToken) textTokens.add(textToken);
+    });
+
+    bgTokens.forEach((token) => {
+      if (textTokens.has(token)) {
+        warnings.push({
+          file: filePath,
+          reason: "same-text-background-colour",
+          className: `bg-${token} text-${token}`,
+          message: `Text and background both use token "${token}", which is likely unreadable.`,
+        });
+      }
+    });
+
+    if (classes.includes("cursor-pointer") && !INTERACTIVE_TAGS.has(tagName)) {
+      warnings.push({
+        file: filePath,
+        reason: "cursor-pointer-non-interactive",
+        className: "cursor-pointer",
+        message: `cursor-pointer is applied to non-interactive <${tagName}>.`,
+      });
+    }
+  });
+
+  return warnings;
+}
+
 function doctor() {
   const config = getConfig();
 
@@ -208,6 +304,7 @@ function doctor() {
 
   const files = getFilesToScan(config);
   const issues = [];
+  const warnings = [];
   const suggestionCache = new Map();
 
   files.forEach((filePath) => {
@@ -218,7 +315,8 @@ function doctor() {
       classes.forEach((className) => {
         const parsed = normaliseClassForManifest(className);
         const unknownVariants = parsed.variants.filter((variant) => !variantSet.has(variant));
-        const knownBase = utilitySet.has(parsed.baseClass);
+        const knownBase =
+          utilitySet.has(parsed.baseClass) || KNOWN_CLASS_SHIMS.has(parsed.baseClass);
 
         if (unknownVariants.length === 0 && knownBase) {
           return;
@@ -236,14 +334,31 @@ function doctor() {
           suggestion: suggestionCache.get(className),
         });
       });
+
+      warnings.push(...createAccessibilityWarnings(filePath, content));
     } catch (error) {
       // Keep parity with purge behaviour: unreadable files are skipped.
     }
   });
 
-  if (issues.length === 0) {
+  if (issues.length === 0 && warnings.length === 0) {
     console.log("✓ EmilyCSS doctor found no class issues");
-    return { ok: true, issues: [], exitCode: 0 };
+    return { ok: true, issues: [], warnings: [], exitCode: 0 };
+  }
+
+  if (warnings.length > 0) {
+    console.log(
+      `EmilyCSS doctor warning${warnings.length === 1 ? "" : "s"} (${warnings.length})\n`,
+    );
+    warnings.forEach((warning) => {
+      console.log(path.relative(process.cwd(), warning.file));
+      console.log(`  Warning: ${warning.message}`);
+      console.log("");
+    });
+  }
+
+  if (issues.length === 0) {
+    return { ok: true, issues: [], warnings, exitCode: 0 };
   }
 
   console.log(`EmilyCSS doctor found ${issues.length} issue${issues.length === 1 ? "" : "s"}\n`);
@@ -262,7 +377,7 @@ function doctor() {
   });
 
   console.log("Run `emily-css build` after fixing classes.");
-  return { ok: false, issues, exitCode: 1 };
+  return { ok: false, issues, warnings, exitCode: 1 };
 }
 
 module.exports = {

package/src/index.js

@@ -4,6 +4,7 @@
 const fs = require('fs');
 const path = require('path');
 const { generateManifest } = require('./manifest');
+const { generateIntellisense } = require('./intellisense');
 
 
 // ============================================================================
@@ -1507,6 +1508,32 @@ function getManifestOutputPath(config) {
     : path.join(process.cwd(), outputPath);
 }
 
+function getIntellisenseSettings(config) {
+  const intellisenseConfig = config.intellisense;
+
+  if (intellisenseConfig === true) {
+    return { enabled: true, output: 'dist/emily.intellisense.json' };
+  }
+
+  if (intellisenseConfig && typeof intellisenseConfig === 'object') {
+    return {
+      enabled: intellisenseConfig.enabled === true,
+      output: intellisenseConfig.output || 'dist/emily.intellisense.json',
+    };
+  }
+
+  return { enabled: false, output: 'dist/emily.intellisense.json' };
+}
+
+function getIntellisenseOutputPath(config) {
+  const intellisenseSettings = getIntellisenseSettings(config);
+  const outputPath = intellisenseSettings.output || 'dist/emily.intellisense.json';
+
+  return path.isAbsolute(outputPath)
+    ? outputPath
+    : path.join(process.cwd(), outputPath);
+}
+
 function ensureDirectoryForFile(filePath) {
   const dir = path.dirname(filePath);
 
@@ -1729,15 +1756,30 @@ ${bodyFont}`;
   fs.writeFileSync(fullCssPath, css);
 
   const manifestSettings = getManifestSettings(config);
+  const intellisenseSettings = getIntellisenseSettings(config);
+  const shouldGenerateManifestData =
+    manifestSettings.enabled || intellisenseSettings.enabled;
+  const manifestData = shouldGenerateManifestData
+    ? generateManifest(css, config)
+    : null;
+
   if (manifestSettings.enabled) {
     const manifestPath = getManifestOutputPath(config);
-    const manifest = generateManifest(css, config);
 
     ensureDirectoryForFile(manifestPath);
-    fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2));
+    fs.writeFileSync(manifestPath, JSON.stringify(manifestData, null, 2));
     console.log(`✓ Generated manifest: ${manifestPath}`);
   }
 
+  if (intellisenseSettings.enabled) {
+    const intellisensePath = getIntellisenseOutputPath(config);
+    const intellisense = generateIntellisense(manifestData);
+
+    ensureDirectoryForFile(intellisensePath);
+    fs.writeFileSync(intellisensePath, JSON.stringify(intellisense, null, 2));
+    console.log(`✓ Generated IntelliSense: ${intellisensePath}`);
+  }
+
   console.log(`✓ Generated CSS: ${fullCssPath}`);
   console.log(`✓ File size: ${(css.length / 1024).toFixed(2)} KB (unminified)`);
   console.log('Full framework build complete');
@@ -1753,11 +1795,16 @@ function minify(css) {
     .trim();
 }
 
-function buildProductionCss() {
+function buildProductionCss(options = {}) {
   const config = getConfig();
   const sourceDir = getSourceDir(config);
   const fullCssPath = getFullCssPath(config);
   const productionCssPath = getProductionCssPath(config);
+  const profile = {
+    purge: 0,
+    minify: 0,
+    write: 0,
+  };
 
   if (!fs.existsSync(fullCssPath)) {
     buildFullFramework();
@@ -1765,11 +1812,18 @@ function buildProductionCss() {
 
   const { purgeCSS } = require('./purge.js');
   const css = fs.readFileSync(fullCssPath, 'utf8');
+  const purgeStart = Date.now();
   const purged = purgeCSS(css, sourceDir, config);
+  profile.purge = Date.now() - purgeStart;
+
+  const minifyStart = Date.now();
   const minified = minify(purged);
+  profile.minify = Date.now() - minifyStart;
 
+  const writeStart = Date.now();
   ensureDirectoryForFile(productionCssPath);
   fs.writeFileSync(productionCssPath, minified);
+  profile.write = Date.now() - writeStart;
 
   return {
     css,
@@ -1779,6 +1833,7 @@ function buildProductionCss() {
     outputSize: Buffer.byteLength(minified, 'utf8'),
     outputPath: productionCssPath,
     fullCssPath,
+    profile: options.profile ? profile : undefined,
   };
 }
 
@@ -1800,11 +1855,14 @@ function ensureFullFramework() {
 }
 
 function build(options = {}) {
+  const totalStart = Date.now();
+  const frameworkStart = Date.now();
   ensureFullFramework();
+  const frameworkMs = Date.now() - frameworkStart;
 
   const config = getConfig();
   const fullCssPath = getFullCssPath(config);
-  const result = buildProductionCss();
+  const result = buildProductionCss({ profile: options.profile });
 
   console.log('\u2713 Generated production CSS: ' + path.relative(process.cwd(), result.outputPath));
   console.log('\u2713 File size: ' + (result.outputSize / 1024).toFixed(2) + ' KB');
@@ -1818,12 +1876,27 @@ function build(options = {}) {
     }
   }
 
+  if (options.profile) {
+    const timings = result.profile || { purge: 0, minify: 0, write: 0 };
+    const totalMs = Date.now() - totalStart;
+
+    console.log('\nEmilyCSS build profile\n');
+    console.log('Framework: ' + frameworkMs + 'ms');
+    console.log('Purge:     ' + timings.purge + 'ms');
+    console.log('Minify:    ' + timings.minify + 'ms');
+    console.log('Write:     ' + timings.write + 'ms');
+    console.log('Total:     ' + totalMs + 'ms');
+  }
+
   console.log('Build complete');
 }
 
 if (require.main === module) {
   const args = process.argv.slice(2);
-  build({ keepFull: args.includes('--keep-full') });
+  build({
+    keepFull: args.includes('--keep-full'),
+    profile: args.includes('--profile'),
+  });
 }
 
 module.exports = {

package/src/intellisense.js

@@ -0,0 +1,27 @@
+function toIntellisenseUtility(utility) {
+  return {
+    class: utility.class || null,
+    category: utility.category || null,
+    property: utility.property || null,
+    value: utility.value || null,
+    token: utility.token || null,
+    variants: Array.isArray(utility.variants) ? utility.variants : [],
+  };
+}
+
+function generateIntellisense(manifest) {
+  const utilities = Array.isArray(manifest && manifest.utilities)
+    ? manifest.utilities
+    : [];
+
+  return {
+    version: "1",
+    generatedAt:
+      (manifest && manifest.generatedAt) || new Date().toISOString(),
+    utilities: utilities.map(toIntellisenseUtility),
+  };
+}
+
+module.exports = {
+  generateIntellisense,
+};

package/src/manifest.js

@@ -1,4 +1,5 @@
 const MANIFEST_VERSION = '1.1.0';
+const packageJson = require('../package.json');
 const {
   DEFAULT_RESPONSIVE_VARIANTS,
   BASE_VARIANTS,
@@ -38,18 +39,76 @@ function getTokenFromDeclarations(declarations) {
   return null;
 }
 
-function isSimpleBaseClassSelector(selector) {
-  if (!selector || !selector.startsWith('.')) return false;
-  if (selector.includes(' ')) return false;
-  if (selector.includes(',')) return false;
-  if (selector.includes('[')) return false;
-  if (selector.includes(':')) return false;
-  if (selector.includes('::')) return false;
-  if (selector.includes('>')) return false;
-  if (selector.includes('+')) return false;
-  if (selector.includes('~')) return false;
-
-  return true;
+function readLeadingClassSelector(selector) {
+  if (!selector || !selector.startsWith('.')) return null;
+
+  let classSelector = '.';
+
+  for (let i = 1; i < selector.length; i++) {
+    const char = selector[i];
+
+    if (char === '\\' && i + 1 < selector.length) {
+      classSelector += selector[i] + selector[i + 1];
+      i++;
+      continue;
+    }
+
+    if (
+      char === ' ' ||
+      char === '\t' ||
+      char === '\n' ||
+      char === '\r' ||
+      char === ',' ||
+      char === '>' ||
+      char === '+' ||
+      char === '~' ||
+      char === ':' ||
+      char === '['
+    ) {
+      break;
+    }
+
+    classSelector += char;
+  }
+
+  return classSelector.length > 1 ? classSelector : null;
+}
+
+function extractManifestClassSelectors(selector) {
+  if (typeof selector !== 'string' || selector.trim().length === 0) {
+    return [];
+  }
+
+  const classSelectors = [];
+  const seen = new Set();
+  const selectorParts = selector
+    .split(',')
+    .map((part) => part.trim())
+    .filter(Boolean);
+
+  selectorParts.forEach((part) => {
+    const classSelector = readLeadingClassSelector(part);
+    if (!classSelector) return;
+    if (classSelector.includes('\\:')) return;
+
+    const remainder = part.slice(classSelector.length).trimStart();
+
+    // Expanded pseudo-state / pseudo-element and attribute selectors are not
+    // base utilities in the manifest (for example .hover\:x:hover, .x[...]).
+    if (
+      remainder.startsWith(':') ||
+      remainder.startsWith('::') ||
+      remainder.startsWith('[')
+    ) {
+      return;
+    }
+
+    if (seen.has(classSelector)) return;
+    seen.add(classSelector);
+    classSelectors.push(classSelector);
+  });
+
+  return classSelectors;
 }
 
 function inferCategory(className, property) {
@@ -249,7 +308,10 @@ function getVariants(config) {
 
 function generateManifest(css, config = {}) {
   const manifest = {
-    version: MANIFEST_VERSION,
+    schemaVersion: '1',
+    package: packageJson.name || 'emily-css',
+    version: packageJson.version || '0.0.0',
+    manifestVersion: MANIFEST_VERSION,
     generatedAt: new Date().toISOString(),
     utilities: [],
   };
@@ -266,21 +328,25 @@ function generateManifest(css, config = {}) {
   while ((ruleMatch = ruleRegex.exec(cleanedCss)) !== null) {
     const selector = ruleMatch[1].trim();
     const declarationBlock = ruleMatch[2].trim();
-
-    if (!isSimpleBaseClassSelector(selector)) continue;
+    const classSelectors = extractManifestClassSelectors(selector);
+    if (classSelectors.length === 0) continue;
 
     const { declarations, firstProperty, firstValue } = parseDeclarations(declarationBlock);
     if (!firstProperty) continue;
 
-    manifest.utilities.push({
-      class: normalizeClassName(selector),
-      category: inferCategory(normalizeClassName(selector), firstProperty),
-      property: firstProperty,
-      value: firstValue,
-      token: getTokenFromDeclarations(declarations),
-      declarations,
-      variants,
-      source: 'generated-css',
+    classSelectors.forEach((classSelector) => {
+      const className = normalizeClassName(classSelector);
+
+      manifest.utilities.push({
+        class: className,
+        category: inferCategory(className, firstProperty),
+        property: firstProperty,
+        value: firstValue,
+        token: getTokenFromDeclarations(declarations),
+        declarations,
+        variants,
+        source: 'generated-css',
+      });
     });
   }
 

package/src/purge.js

@@ -36,23 +36,48 @@ function getAllFiles(dir, extensions = DEFAULT_EXTENSIONS) {
 
 function extractClassNames(content) {
   const classNames = new Set();
-  const classRegex = /(?:class|className)\s*=\s*["']([^"']+)["']/g;
+
+  function isLikelyClassToken(token) {
+    if (!token || typeof token !== "string") return false;
+    if (token.length > 120) return false;
+    if (token.includes("://")) return false;
+    if (token.startsWith(".") || token.startsWith("#") || token.startsWith("@")) return false;
+    if (token.endsWith(":")) return false;
+    if (/[(){};,`$]/.test(token)) return false;
+    if (!/^[a-zA-Z0-9:#_./\-[\]]+$/.test(token)) return false;
+    if (!/[a-zA-Z]/.test(token)) return false;
+
+    return true;
+  }
+
+  function addClassToken(token) {
+    if (!token) return;
+
+    const cleaned = token.trim().replace(/^['"`]+|['"`]+$/g, "");
+    if (!cleaned) return;
+    if (!isLikelyClassToken(cleaned)) return;
+
+    classNames.add(cleaned);
+  }
+
+  const classRegex = /(?:class|className)\s*=\s*(["'])([\s\S]*?)\1/g;
   let match;
 
   while ((match = classRegex.exec(content)) !== null) {
-    const classes = match[1].split(/\s+/);
-    classes.forEach((cls) => {
-      if (cls.trim()) classNames.add(cls.trim());
-    });
+    const classes = match[2].split(/\s+/);
+    classes.forEach(addClassToken);
   }
 
-  const vueRegex = /(?::class|class\.|v-bind:class)\s*=\s*["'{]([^"'}]+)["'}]/g;
-  while ((match = vueRegex.exec(content)) !== null) {
-    const classes = match[1].split(/[\s,]+/);
-    classes.forEach((cls) => {
-      const cleaned = cls.replace(/['"`{}"]/g, "").trim();
-      if (cleaned) classNames.add(cleaned);
-    });
+  const vueBindingRegex = /(?:\:class|v-bind:class)\s*=\s*(["'])([\s\S]*?)\1/g;
+  const vueObjectKeyRegex = /['"`]([^'"`]+)['"`]\s*:/g;
+
+  while ((match = vueBindingRegex.exec(content)) !== null) {
+    const bindingContent = match[2];
+    let keyMatch;
+
+    while ((keyMatch = vueObjectKeyRegex.exec(bindingContent)) !== null) {
+      addClassToken(keyMatch[1]);
+    }
   }
 
   const templateStringRegex = /`([^`]+)`/g;
@@ -62,14 +87,9 @@ function extractClassNames(content) {
 
     possibleClasses.forEach((cls) => {
       const cleaned = cls.trim();
-
-      if (
-        cleaned &&
-        /^[a-zA-Z0-9:_./-]+$/.test(cleaned) &&
-        /[-:]/.test(cleaned)
-      ) {
-        classNames.add(cleaned);
-      }
+      if (!cleaned) return;
+      if (!/[-:]/.test(cleaned)) return;
+      addClassToken(cleaned);
     });
   }
 

package/templates/showcase.html

@@ -149,7 +149,7 @@
       </div>
     </section>
 
-    <section id="buttons" class="bg-white rounded-lg shadow-md border border-neutral-20 p-6 mb-6 background-neutral-100">
+    <section id="buttons" class="bg-white rounded-lg shadow-md border border-neutral-20 p-6 mb-6">
       <h2 class="text-2xl font-bold mb-4">Buttons</h2>
 
       <div class="flex flex-wrap gap-3">