emily-css 1.0.27 → 1.0.29

package/CHANGELOG.md

@@ -4,6 +4,22 @@ All notable changes to `emily-css` are documented here.
 
 ---
 
+## 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)**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "emily-css",
-  "version": "1.0.27",
+  "version": "1.0.29",
   "description": "A config-driven utility CSS framework. Define your brand once, generate the CSS.",
   "main": "src/index.js",
   "bin": {

package/src/generators.js

@@ -424,6 +424,12 @@ function svgUtilities(colours) {
 
   css += `.fill-current { fill: currentColor; }\n`;
   css += `.stroke-current { stroke: currentColor; }\n`;
+  css += `.fill-white { fill: #FAFAFA; }\n`;
+  css += `.fill-black { fill: #111110; }\n`;
+  css += `.fill-transparent { fill: transparent; }\n`;
+  css += `.stroke-white { stroke: #FAFAFA; }\n`;
+  css += `.stroke-black { stroke: #111110; }\n`;
+  css += `.stroke-transparent { stroke: transparent; }\n`;
   css += `.stroke-0 { stroke-width: 0; }\n`;
   css += `.stroke-1 { stroke-width: 1; }\n`;
   css += `.stroke-2 { stroke-width: 2; }\n`;
@@ -602,6 +608,10 @@ function accessibilityUtilities() {
   return `/* Accessibility */
 .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
 .not-sr-only { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; }
+.sr-only-focusable:not(:focus):not(:focus-within) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
+.focus-ring:focus-visible { outline: 2px solid var(--color-brand-80); outline-offset: 2px; }
+.focus-ring-inset:focus-visible { outline: 2px solid var(--color-brand-80); outline-offset: -2px; }
+.focus-ring-none:focus-visible { outline: none; }
 .focus-visible:focus { outline: 2px solid currentColor; outline-offset: 2px; }
 .focus\\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
 
@@ -756,8 +766,8 @@ function divideUtilities(spacing, colours) {
       css += `.divide-${colourName}-${shade} > * + * { border-color: var(--color-${colourName}-${shade}); }\n`;
     });
   });
-  css += `.divide-white > * + * { border-color: #ffffff; }\n`;
-  css += `.divide-black > * + * { border-color: #000000; }\n`;
+  css += `.divide-white > * + * { border-color: #FAFAFA; }\n`;
+  css += `.divide-black > * + * { border-color: #111110; }\n`;
   css += `.divide-transparent > * + * { border-color: transparent; }\n`;
   css += `\n`;
   return css;

package/src/index.js

@@ -3,6 +3,7 @@
 
 const fs = require('fs');
 const path = require('path');
+const { generateManifest } = require('./manifest');
 
 
 // ============================================================================
@@ -693,8 +694,8 @@ function generateBorderUtilities(config) {
   css += `.border-none { border-style: none; }\n`;
   css += `.border-transparent { border-color: transparent; }\n`;
   css += `.border-current { border-color: currentColor; }\n`;
-  css += `.border-black { border-color: #000000; }\n`;
-  css += `.border-white { border-color: #ffffff; }\n`;
+  css += `.border-black { border-color: #111110; }\n`;
+  css += `.border-white { border-color: #FAFAFA; }\n`;
 
   const baseRadius = config.spacing.borderRadius['base'] || '8px';
   css += `.rounded { border-radius: ${baseRadius}; }\n`;
@@ -791,9 +792,15 @@ function generateColourUtilities(colours) {
     });
   });
 
-  css += `.bg-white { background-color: #ffffff; }\n`;
+  css += `.bg-white { background-color: #FAFAFA; }\n`;
+  css += `.bg-black { background-color: #111110; }\n`;
   css += `.bg-transparent { background-color: transparent; }\n`;
-  css += `.text-white { color: #ffffff; }\n`;
+  css += `.bg-current { background-color: currentColor; }\n`;
+
+  css += `.text-white { color: #FAFAFA; }\n`;
+  css += `.text-black { color: #111110; }\n`;
+  css += `.text-transparent { color: transparent; }\n`;
+  css += `.text-current { color: currentColor; }\n`;
 
   css += `\n`;
   return css;
@@ -812,6 +819,63 @@ function generateSemanticColourUtilities(semanticColours) {
   return css;
 }
 
+// ============================================================================
+// ARIA & DATA-STATE VARIANTS
+// ============================================================================
+// Generates ARIA attribute and data-state variants for all utility classes.
+// Selectors target the attribute value directly so they work without JS —
+// just toggle the attribute and the utility activates.
+//
+// Usage in HTML:
+//   aria-expanded: class="aria-expanded:block" aria-expanded="true"
+//   data-open:     class="data-open:flex"       data-state="open"
+//
+// Output examples:
+//   .aria-expanded\:block[aria-expanded="true"] { display: block; }
+//   .data-open\:flex[data-state="open"] { display: flex; }
+
+function addAriaDataVariants(css) {
+  const variants = [
+    { name: 'aria-expanded', selector: '[aria-expanded="true"]' },
+    { name: 'aria-selected', selector: '[aria-selected="true"]' },
+    { name: 'aria-current',  selector: '[aria-current="page"]' },
+    { name: 'aria-disabled', selector: '[aria-disabled="true"]' },
+    { name: 'data-open',     selector: '[data-state="open"]' },
+    { name: 'data-closed',   selector: '[data-state="closed"]' },
+  ];
+
+  let variantCss = css;
+
+  variants.forEach(variant => {
+    let variantRules = '';
+    const lines = css.split('\n');
+
+    lines.forEach(line => {
+      if (line.startsWith('.') && line.includes('{')) {
+        const className = line.split('{')[0].trim();
+        // Skip already-variant lines (contain ':' in class name) and special selectors
+        if (
+          !className.startsWith(':root') &&
+          !className.includes('@') &&
+          !className.includes('::') &&
+          !className.includes(':')
+        ) {
+          const classWithoutDot = className.substring(1);
+          const ariaSelector = `.${variant.name}\\:${classWithoutDot}${variant.selector}`;
+          const ariaRule = line.replace(className, ariaSelector);
+          variantRules += ariaRule + '\n';
+        }
+      }
+    });
+
+    if (variantRules) {
+      variantCss += `\n/* ARIA/data-state variant: ${variant.name} */\n` + variantRules;
+    }
+  });
+
+  return variantCss;
+}
+
 // ============================================================================
 // DARK MODE VARIANTS
 // ============================================================================
@@ -983,6 +1047,65 @@ function generatePatternComponents() {
     margin-inline: auto;
   }
 
+  .prose-emily {
+    max-width: 65ch;
+    margin-inline: auto;
+  }
+
+  .prose-emily > * + * {
+    margin-top: var(--space-4, 1rem);
+  }
+
+  .prose-emily h2,
+  .prose-emily h3 {
+    font-family: inherit;
+    color: var(--color-neutral-90);
+    line-height: 1.25;
+  }
+
+  .prose-emily h2 {
+    font-size: var(--text-2xl, 24px);
+    margin-top: var(--space-10, 2.5rem);
+  }
+
+  .prose-emily h3 {
+    font-size: var(--text-xl, 20px);
+    margin-top: var(--space-8, 2rem);
+  }
+
+  .prose-emily p,
+  .prose-emily li {
+    color: var(--color-neutral-70);
+    line-height: 1.75;
+  }
+
+  .prose-emily ul,
+  .prose-emily ol {
+    padding-left: var(--space-6, 1.5rem);
+  }
+
+  .prose-emily ul {
+    list-style-type: disc;
+  }
+
+  .prose-emily ol {
+    list-style-type: decimal;
+  }
+
+  .prose-emily a {
+    color: var(--color-brand-80);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  .prose-emily code {
+    font-size: var(--text-sm, 14px);
+    background-color: var(--color-neutral-10);
+    border: 1px solid var(--color-neutral-20);
+    border-radius: var(--space-1, 0.25rem);
+    padding: 0.125rem 0.375rem;
+  }
+
   /* ---- Composition ---- */
 
   /* Vertical stack with consistent gap — replaces manual margin chains */
@@ -1357,6 +1480,32 @@ function getProductionCssPath(config) {
   return path.join(process.cwd(), config.output?.css || 'dist/emily.min.css');
 }
 
+function getManifestSettings(config) {
+  const manifestConfig = config.manifest;
+
+  if (manifestConfig === true) {
+    return { enabled: true, output: 'dist/emily.manifest.json' };
+  }
+
+  if (manifestConfig && typeof manifestConfig === 'object') {
+    return {
+      enabled: manifestConfig.enabled === true,
+      output: manifestConfig.output || 'dist/emily.manifest.json',
+    };
+  }
+
+  return { enabled: false, output: 'dist/emily.manifest.json' };
+}
+
+function getManifestOutputPath(config) {
+  const manifestSettings = getManifestSettings(config);
+  const outputPath = manifestSettings.output || 'dist/emily.manifest.json';
+
+  return path.isAbsolute(outputPath)
+    ? outputPath
+    : path.join(process.cwd(), outputPath);
+}
+
 function ensureDirectoryForFile(filePath) {
   const dir = path.dirname(filePath);
 
@@ -1421,6 +1570,7 @@ function buildFullFramework() {
   utilityCss += filterUtilities();
 
   utilityCss = addStateVariants(utilityCss);
+  utilityCss = addAriaDataVariants(utilityCss);
   utilityCss = addDarkModeVariants(utilityCss);
   utilityCss = addResponsiveVariants(utilityCss, config);
 
@@ -1577,6 +1727,16 @@ ${bodyFont}`;
   ensureDirectoryForFile(fullCssPath);
   fs.writeFileSync(fullCssPath, css);
 
+  const manifestSettings = getManifestSettings(config);
+  if (manifestSettings.enabled) {
+    const manifestPath = getManifestOutputPath(config);
+    const manifest = generateManifest(css, config);
+
+    ensureDirectoryForFile(manifestPath);
+    fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2));
+    console.log(`✓ Generated manifest: ${manifestPath}`);
+  }
+
   console.log(`✓ Generated CSS: ${fullCssPath}`);
   console.log(`✓ File size: ${(css.length / 1024).toFixed(2)} KB (unminified)`);
   console.log('Full framework build complete');
@@ -1645,8 +1805,8 @@ function build(options = {}) {
   const fullCssPath = getFullCssPath(config);
   const result = buildProductionCss();
 
-  console.log('✓ Generated production CSS: ' + path.relative(process.cwd(), result.outputPath));
-  console.log('✓ File size: ' + (result.outputSize / 1024).toFixed(2) + ' KB');
+  console.log('\u2713 Generated production CSS: ' + path.relative(process.cwd(), result.outputPath));
+  console.log('\u2713 File size: ' + (result.outputSize / 1024).toFixed(2) + ' KB');
 
   if (!options.keepFull && fs.existsSync(fullCssPath)) {
     try {
@@ -1683,7 +1843,9 @@ module.exports = {
   generateFlexboxUtilities,
   generateGridUtilities,
   addStateVariants,
+  addAriaDataVariants,
   addResponsiveVariants,
+  generateManifest,
   generateFontCSS,
   codeUtilities,
 };

package/src/manifest.js

@@ -0,0 +1,307 @@
+const MANIFEST_VERSION = '1.1.0';
+const DEFAULT_RESPONSIVE_VARIANTS = ['sm', 'md', 'lg', 'xl', '2xl'];
+const BASE_VARIANTS = [
+  'hover',
+  'focus',
+  'focus-within',
+  'focus-visible',
+  'active',
+  'disabled',
+  'motion-reduce',
+  'motion-safe',
+  'aria-expanded',
+  'aria-selected',
+  'aria-current',
+  'aria-disabled',
+  'data-open',
+  'data-closed',
+  'dark',
+  'forced-colors',
+];
+
+function parseDeclarations(block) {
+  const declarations = {};
+  const declarationRegex = /([a-zA-Z-]+)\s*:\s*([^;]+)\s*;?/g;
+  let firstProperty = null;
+  let firstValue = null;
+  let match;
+
+  while ((match = declarationRegex.exec(block)) !== null) {
+    const property = match[1].trim();
+    const value = match[2].trim();
+    declarations[property] = value;
+
+    if (!firstProperty) {
+      firstProperty = property;
+      firstValue = value;
+    }
+  }
+
+  return { declarations, firstProperty, firstValue };
+}
+
+function getTokenFromDeclarations(declarations) {
+  const values = Object.values(declarations);
+
+  for (const value of values) {
+    const tokenMatch = value.match(/var\(\s*(--[a-zA-Z0-9-_]+)\s*(?:,[^)]+)?\)/);
+    if (tokenMatch) {
+      return tokenMatch[1];
+    }
+  }
+
+  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 inferCategory(className, property) {
+  if (
+    className === 'prose' ||
+    className === 'prose-emily' ||
+    className === 'center-screen' ||
+    className === 'center-absolute' ||
+    className === 'field-container' ||
+    className === 'form-hint' ||
+    className === 'form-error-message' ||
+    className === 'error-summary' ||
+    className === 'btn' ||
+    className === 'btn-primary' ||
+    className === 'btn-secondary' ||
+    className === 'btn-ghost' ||
+    className === 'btn-danger' ||
+    className === 'btn-sm' ||
+    className === 'btn-lg' ||
+    className === 'code-window' ||
+    className === 'code-title-bar' ||
+    className === 'code-dot' ||
+    className === 'code-dot-red' ||
+    className === 'code-dot-yellow' ||
+    className === 'code-dot-green' ||
+    className === 'code-filename' ||
+    className.startsWith('token-')
+  ) {
+    return 'component';
+  }
+
+  if (className.startsWith('text-')) {
+    return property === 'color' ? 'colour' : 'typography';
+  }
+
+  if (
+    className.startsWith('font-') ||
+    className.startsWith('leading-') ||
+    className.startsWith('tracking-') ||
+    className.startsWith('list-') 
+  ) {
+    return 'typography';
+  }
+
+  if (className.startsWith('bg-')) return 'background';
+
+  if (
+    className === 'border' ||
+    className.startsWith('border-') ||
+    className.startsWith('divide-') ||
+    className === 'outline' ||
+    className.startsWith('outline-') ||
+    className === 'ring' ||
+    className.startsWith('ring-')
+  ) {
+    return 'border';
+  }
+
+  if (
+    className.startsWith('p-') ||
+    className.startsWith('px-') ||
+    className.startsWith('py-') ||
+    className.startsWith('pt-') ||
+    className.startsWith('pr-') ||
+    className.startsWith('pb-') ||
+    className.startsWith('pl-') ||
+    className.startsWith('m-') ||
+    className.startsWith('mx-') ||
+    className.startsWith('my-') ||
+    className.startsWith('mt-') ||
+    className.startsWith('mr-') ||
+    className.startsWith('mb-') ||
+    className.startsWith('ml-') ||
+    className.startsWith('gap-') ||
+    className.startsWith('space-') ||
+    className.startsWith('inset-') ||
+    className.startsWith('top-') ||
+    className.startsWith('right-') ||
+    className.startsWith('bottom-') ||
+    className.startsWith('left-')
+  ) {
+    return 'spacing';
+  }
+
+  if (
+    className.startsWith('w-') ||
+    className.startsWith('h-') ||
+    className.startsWith('min-w-') ||
+    className.startsWith('max-w-') ||
+    className.startsWith('min-h-') ||
+    className.startsWith('max-h-') ||
+    className.startsWith('size-')
+  ) {
+    return 'sizing';
+  }
+
+  if (
+    className === 'flex' ||
+    className === 'grid' ||
+    className === 'block' ||
+    className === 'inline' ||
+    className === 'inline-block' ||
+    className === 'inline-flex' ||
+    className === 'hidden' ||
+    className === 'container' ||
+    className === 'relative' ||
+    className === 'absolute' ||
+    className === 'fixed' ||
+    className === 'sticky' ||
+    className === 'static'
+  ) {
+    return 'layout';
+  }
+
+  if (
+    className.startsWith('items-') ||
+    className.startsWith('justify-') ||
+    className.startsWith('content-') ||
+    className.startsWith('self-') ||
+    className.startsWith('place-') ||
+    className.startsWith('order-') ||
+    className.startsWith('col-') ||
+    className.startsWith('row-')
+  ) {
+    return 'layout';
+  }
+
+  if (className === 'rounded' || className.startsWith('rounded-')) return 'radius';
+  if (className === 'shadow' || className.startsWith('shadow-')) return 'shadow';
+
+  if (
+    className.startsWith('opacity-') ||
+    className.startsWith('blur-') ||
+    className.startsWith('backdrop-') ||
+    className === 'filter' ||
+    className === 'grayscale' ||
+    className.startsWith('saturate-') ||
+    className.startsWith('brightness-') ||
+    className.startsWith('contrast-')
+  ) {
+    return 'effects';
+  }
+
+  if (
+    className === 'transition' ||
+    className.startsWith('transition-') ||
+    className.startsWith('duration-') ||
+    className.startsWith('ease-') ||
+    className.startsWith('delay-') ||
+    className.startsWith('animate-')
+  ) {
+    return 'motion';
+  }
+
+  if (
+    className === 'sr-only' ||
+    className === 'not-sr-only' ||
+    className === 'focus-ring' ||
+    className === 'skip-to-content' ||
+    className === 'js-hidden' ||
+    className === 'no-js'
+  ) {
+    return 'accessibility';
+  }
+
+  if (
+    className === 'input' ||
+    className === 'select' ||
+    className === 'textarea' ||
+    className === 'checkbox' ||
+    className === 'radio' ||
+    className === 'stack' ||
+    className === 'cluster' ||
+    className === 'width-container'
+  ) {
+    return 'component';
+  }
+
+  return 'utility';
+}
+
+function normalizeClassName(selector) {
+  return selector.slice(1).replace(/\\(.)/g, '$1');
+}
+
+function getVariants(config) {
+  const breakpoints =
+    config &&
+    config.breakpoints &&
+    typeof config.breakpoints === 'object' &&
+    Object.keys(config.breakpoints).length > 0
+      ? Object.keys(config.breakpoints)
+      : DEFAULT_RESPONSIVE_VARIANTS;
+
+  return [...BASE_VARIANTS, ...breakpoints];
+}
+
+function generateManifest(css, config = {}) {
+  const manifest = {
+    version: MANIFEST_VERSION,
+    generatedAt: new Date().toISOString(),
+    utilities: [],
+  };
+
+  if (typeof css !== 'string' || css.length === 0) {
+    return manifest;
+  }
+
+  const variants = getVariants(config);
+  const cleanedCss = css.replace(/\/\*[\s\S]*?\*\//g, '');
+  const ruleRegex = /([^{}]+)\{([^{}]*)\}/g;
+  let ruleMatch;
+
+  while ((ruleMatch = ruleRegex.exec(cleanedCss)) !== null) {
+    const selector = ruleMatch[1].trim();
+    const declarationBlock = ruleMatch[2].trim();
+
+    if (!isSimpleBaseClassSelector(selector)) 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',
+    });
+  }
+
+  return manifest;
+}
+
+module.exports = {
+  generateManifest,
+};

package/src/purge.js

@@ -173,7 +173,7 @@ function purgeBlock(block, usedClasses) {
         .replace(/:/g, "\\\\:");
 
       const boundaryRegex = new RegExp(
-        `\\.${escapedUsed}(?::[\\w\\-]+|[\\s,>+~]|$)`,
+        `\\.${escapedUsed}(?::[\\w\\-]+|\\[|[\\s,>+~]|$)`,
       );
 
       if (boundaryRegex.test(selector)) return true;
@@ -275,5 +275,5 @@ function purgeCSS(css, scanDir, config) {
 module.exports = {
   purgeCSS,
   getAllFiles,
-  extractClassNames,
-};
+  extractClassNames
+};