emily-css 1.2.0-alpha.0 → 1.2.1

package/src/index.js

@@ -235,6 +235,7 @@ function generateCSSVariables(colours, spacing, config) {
       css += `  --color-${name}: ${hex};\n`;
     });
   }
+  css += `  --focus-ring-glow: color-mix(in srgb, var(--color-brand-80) 12%, transparent);\n`;
 
   // Spacing variables
   Object.entries(spacing).forEach(([key, value]) => {
@@ -1241,7 +1242,7 @@ function generatePatternComponents() {
     outline: 2px solid var(--color-neutral-80);
     outline-offset: 3px;
     border-color: var(--color-neutral-80);
-    box-shadow: 0 0 0 4px rgba(219, 39, 119, 0.1);
+    box-shadow: 0 0 0 4px var(--focus-ring-glow, rgba(219, 39, 119, 0.1));
   }
 
   .checkbox-group,
@@ -1272,7 +1273,7 @@ function generatePatternComponents() {
   input[type="checkbox"]:focus {
     outline: 2px solid var(--color-neutral-80);
     outline-offset: 3px;
-    box-shadow: 0 0 0 4px rgba(219, 39, 119, 0.1);
+    box-shadow: 0 0 0 4px var(--focus-ring-glow, rgba(219, 39, 119, 0.1));
   }
 
   input[type="radio"] {
@@ -1317,7 +1318,7 @@ function generatePatternComponents() {
     outline: 2px solid var(--color-neutral-80);
     outline-offset: 3px;
     border-radius: 50%;
-    box-shadow: 0 0 0 4px rgba(219, 39, 119, 0.1);
+    box-shadow: 0 0 0 4px var(--focus-ring-glow, rgba(219, 39, 119, 0.1));
   }
 
   input[aria-invalid="true"] {
@@ -1382,7 +1383,7 @@ function generatePatternComponents() {
   .btn-primary:focus-visible {
     outline: 2px solid var(--color-neutral-80);
     outline-offset: 3px;
-    box-shadow: 0 0 0 4px rgba(219, 39, 119, 0.1);
+    box-shadow: 0 0 0 4px var(--focus-ring-glow, rgba(219, 39, 119, 0.1));
   }
 
   .btn-secondary {
@@ -1400,7 +1401,7 @@ function generatePatternComponents() {
   .btn-secondary:focus-visible {
     outline: 2px solid var(--color-neutral-80);
     outline-offset: 3px;
-    box-shadow: 0 0 0 4px rgba(219, 39, 119, 0.1);
+    box-shadow: 0 0 0 4px var(--focus-ring-glow, rgba(219, 39, 119, 0.1));
   }
 
   .btn-ghost {
@@ -1416,7 +1417,7 @@ function generatePatternComponents() {
   .btn-ghost:focus-visible {
     outline: 2px solid var(--color-neutral-80);
     outline-offset: 3px;
-    box-shadow: 0 0 0 4px rgba(219, 39, 119, 0.1);
+    box-shadow: 0 0 0 4px var(--focus-ring-glow, rgba(219, 39, 119, 0.1));
   }
 
   .btn-danger {
@@ -1432,7 +1433,7 @@ function generatePatternComponents() {
   .btn-danger:focus-visible {
     outline: 2px solid var(--color-neutral-80);
     outline-offset: 3px;
-    box-shadow: 0 0 0 4px rgba(219, 39, 119, 0.1);
+    box-shadow: 0 0 0 4px var(--focus-ring-glow, rgba(219, 39, 119, 0.1));
   }
 
   .btn-sm {

package/src/init.js

@@ -5,24 +5,12 @@ const { Select, Input, Confirm } = require("enquirer");
 const chalk = require("chalk");
 const ora = require("ora");
 const boxen = require("boxen");
+const { DEFAULT_PURGE_IGNORE, PURGE_EXTENSIONS } = require("./constants.js");
 
 // ============================================================================
 // CONSTANTS
 // ============================================================================
 
-const DEFAULT_PURGE_IGNORE = [
-  "node_modules",
-  ".git",
-  ".nuxt",
-  ".next",
-  ".output",
-  "dist",
-  "build",
-  "coverage",
-  ".cache",
-  ".vite",
-];
-
 const COLOUR_PRESETS = {
   primary: [
     { value: "custom", label: "Enter your own hex" },
@@ -69,28 +57,6 @@ const FONT_OPTIONS = [
   { name: "system", message: "System sans-serif (no download required)" },
 ];
 
-const PURGE_EXTENSIONS = [
-  ".html",
-  ".htm",
-  ".twig",
-  ".njk",
-  ".liquid",
-  ".hbs",
-  ".js",
-  ".jsx",
-  ".ts",
-  ".tsx",
-  ".vue",
-  ".php",
-  ".astro",
-  ".svelte",
-  ".blade.php",
-  ".jinja",
-  ".jinja2",
-  ".j2",
-  ".md",
-];
-
 // ============================================================================
 // HELPERS
 // ============================================================================
@@ -662,7 +628,7 @@ async function init() {
 
     const baseUnitRaw = await new Input({
       name: "baseUnit",
-      message: "Base spacing unit in px (18px = 1.125rem)",
+      message: "Base spacing unit in px (label/documentation only)",
       initial: "18",
       validate: function (value) {
         const parsed = Number.parseInt(value, 10);

package/src/manifest.js

@@ -1,23 +1,8 @@
 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',
-];
+const {
+  DEFAULT_RESPONSIVE_VARIANTS,
+  BASE_VARIANTS,
+} = require('./constants.js');
 
 function parseDeclarations(block) {
   const declarations = {};

package/src/migrate.js

@@ -5,29 +5,8 @@ const fg = require('fast-glob');
 const { extractClassNames, getAllFiles } = require('./purge.js');
 const { generateManifest } = require('./manifest.js');
 const { normaliseClassForManifest, suggestClassName } = require('./doctor.js');
-
-const DEFAULT_EXTENSIONS = [
-  '.html',
-  '.htm',
-  '.twig',
-  '.njk',
-  '.liquid',
-  '.hbs',
-  '.js',
-  '.jsx',
-  '.ts',
-  '.tsx',
-  '.vue',
-  '.php',
-  '.astro',
-  '.svelte',
-  '.blade.php',
-  '.jinja',
-  '.jinja2',
-  '.j2',
-  '.md',
-  '.mdx',
-];
+const { DEFAULT_EXTENSIONS } = require('./constants.js');
+const MIGRATION_DEFAULT_EXTENSIONS = [...DEFAULT_EXTENSIONS, '.mdx'];
 
 const TAILWIND_MAPPINGS = {
   'text-gray-900': {
@@ -163,6 +142,150 @@ const TAILWIND_SHADE_TO_EMILY_SHADE = {
   '950': '100',
 };
 
+const SINGLE_WORD_UTILITY_ALLOWLIST = new Set([
+  'flex',
+  'grid',
+  'hidden',
+  'block',
+  'inline',
+  'table',
+  'contents',
+  'flow',
+  'container',
+  'relative',
+  'absolute',
+  'fixed',
+  'sticky',
+  'static',
+  'visible',
+  'invisible',
+  'uppercase',
+  'lowercase',
+  'capitalize',
+  'truncate',
+  'antialiased',
+  'italic',
+  'not-italic',
+  'underline',
+  'overline',
+  'line-through',
+]);
+
+const UTILITY_PREFIX_ALLOWLIST = new Set([
+  'bg',
+  'text',
+  'border',
+  'outline',
+  'accent',
+  'fill',
+  'stroke',
+  'ring',
+  'rounded',
+  'shadow',
+  'font',
+  'leading',
+  'tracking',
+  'p',
+  'px',
+  'py',
+  'pt',
+  'pr',
+  'pb',
+  'pl',
+  'm',
+  'mx',
+  'my',
+  'mt',
+  'mr',
+  'mb',
+  'ml',
+  'w',
+  'h',
+  'min-w',
+  'max-w',
+  'min-h',
+  'max-h',
+  'gap',
+  'space',
+  'inset',
+  'top',
+  'right',
+  'bottom',
+  'left',
+  'z',
+  'order',
+  'col',
+  'row',
+  'grid-cols',
+  'grid-rows',
+  'justify',
+  'items',
+  'content',
+  'self',
+  'place',
+  'object',
+  'overflow',
+  'divide',
+  'cursor',
+  'select',
+  'duration',
+  'delay',
+  'ease',
+  'scale',
+  'rotate',
+  'translate',
+  'skew',
+  'origin',
+  'opacity',
+  'basis',
+  'grow',
+  'shrink',
+]);
+
+function hasUtilityLikeSyntax(className) {
+  if (!className || typeof className !== 'string') {
+    return false;
+  }
+
+  const variantSeparatorIndex = className.lastIndexOf(':');
+  if (variantSeparatorIndex !== -1) {
+    const baseClass = className.slice(variantSeparatorIndex + 1);
+    if (!baseClass) {
+      return false;
+    }
+    return hasUtilityLikeSyntax(baseClass);
+  }
+
+  if (className.startsWith('-')) {
+    const baseClass = className.slice(1);
+    return baseClass.length > 0 && hasUtilityLikeSyntax(baseClass);
+  }
+
+  if (SINGLE_WORD_UTILITY_ALLOWLIST.has(className)) {
+    return true;
+  }
+
+  if (
+    hasArbitraryValueSyntax(className) ||
+    className.includes('/') ||
+    className.includes('.') ||
+    className.includes('_') ||
+    /\d/.test(className)
+  ) {
+    return true;
+  }
+
+  const parts = className.split('-').filter(Boolean);
+
+  if (parts.length >= 2) {
+    const first = parts[0];
+    const firstTwo = `${parts[0]}-${parts[1]}`;
+    return UTILITY_PREFIX_ALLOWLIST.has(first) || UTILITY_PREFIX_ALLOWLIST.has(firstTwo);
+  }
+
+  return false;
+}
+
 function getConfigPath(options = {}) {
   return options.configPath || path.join(process.cwd(), 'emily.config.json');
 }
@@ -443,12 +566,15 @@ function isLikelyUtilityClass(className) {
   if (/\s/.test(className)) return false;
   if (className.length > 120) return false;
   if (className.startsWith('--')) return false;
+  if (className.startsWith(':')) return false;
   if (className.startsWith('.') || className.startsWith('#') || className.startsWith('@')) return false;
   if (className.endsWith(':')) return false;
   if (className.includes('://')) return false;
   if (/[;()={},`]/.test(className)) return false;
   if (!/[a-zA-Z]/.test(className)) return false;
   if (!/^[a-zA-Z0-9:#_./\-[\]]+$/.test(className)) return false;
+  if (/^[a-z]+$/.test(className) && !SINGLE_WORD_UTILITY_ALLOWLIST.has(className)) return false;
+  if (!hasUtilityLikeSyntax(className) && !SINGLE_WORD_UTILITY_ALLOWLIST.has(className)) return false;
 
   return true;
 }
@@ -614,7 +740,7 @@ function migrateClasses(input, options = {}) {
 }
 
 function getFilesToScan(config, options = {}) {
-  const extensions = (config && config.purge && config.purge.extensions) || DEFAULT_EXTENSIONS;
+  const extensions = (config && config.purge && config.purge.extensions) || MIGRATION_DEFAULT_EXTENSIONS;
   const ignore = (config && config.purge && config.purge.ignore) || [];
 
   if (options.sourceGlobs && options.sourceGlobs.length > 0) {

package/src/purge.js

@@ -2,28 +2,7 @@
 
 const fs = require("fs");
 const path = require("path");
-
-const DEFAULT_EXTENSIONS = [
-  ".html",
-  ".htm",
-  ".twig",
-  ".njk",
-  ".liquid",
-  ".hbs",
-  ".js",
-  ".jsx",
-  ".ts",
-  ".tsx",
-  ".vue",
-  ".php",
-  ".astro",
-  ".svelte",
-  ".blade.php",
-  ".jinja",
-  ".jinja2",
-  ".j2",
-  ".md",
-];
+const { DEFAULT_EXTENSIONS } = require("./constants.js");
 
 function getAllFiles(dir, extensions = DEFAULT_EXTENSIONS) {
   let files = [];

package/src/watch.js

@@ -3,6 +3,10 @@ const path = require("path");
 const chokidar = require("chokidar");
 const chalk = require("chalk");
 const fg = require("fast-glob");
+const {
+  DEFAULT_PURGE_IGNORE,
+  DEFAULT_EXTENSIONS,
+} = require("./constants.js");
 
 const {
   buildFullFramework,
@@ -16,6 +20,7 @@ let isRunning = false;
 let pendingRun = false;
 let previousClasses = new Set();
 let hasRunOnce = false;
+let activeIgnoreList = DEFAULT_PURGE_IGNORE;
 
 function readConfig() {
   const configPath = path.join(process.cwd(), "emily.config.json");
@@ -34,22 +39,26 @@ function normalisePath(filePath) {
   return filePath.replace(/\\/g, "/");
 }
 
-function shouldIgnore(filePath) {
-  const normalised = normalisePath(filePath);
+function normaliseIgnoreEntry(entry) {
+  return normalisePath(String(entry || ""))
+    .replace(/^\.\/+/, "")
+    .replace(/^\/+|\/+$/g, "");
+}
 
-  return [
-    "node_modules/",
-    ".git/",
-    ".nuxt/",
-    ".next/",
-    ".output/",
-    "dist/",
-    "build/",
-    "coverage/",
-    ".cache/",
-    ".vite/",
-  ].some(
-    (part) => normalised.includes("/" + part) || normalised.startsWith(part),
+function shouldIgnore(filePath, ignoreList = DEFAULT_PURGE_IGNORE) {
+  if (!filePath) return false;
+
+  const normalised = normalisePath(filePath);
+  const normalisedIgnoreList = (Array.isArray(ignoreList) ? ignoreList : DEFAULT_PURGE_IGNORE)
+    .map(normaliseIgnoreEntry)
+    .filter(Boolean);
+
+  return normalisedIgnoreList.some(
+    (entry) =>
+      normalised === entry ||
+      normalised.startsWith(entry + "/") ||
+      normalised.includes("/" + entry + "/") ||
+      normalised.endsWith("/" + entry),
   );
 }
 
@@ -80,27 +89,7 @@ function getScanFiles(config) {
   }
 
   const sourceDir = config.purge?.sourceDir || ".";
-  const extensions = config.purge?.extensions || [
-    ".html",
-    ".htm",
-    ".twig",
-    ".njk",
-    ".liquid",
-    ".hbs",
-    ".js",
-    ".jsx",
-    ".ts",
-    ".tsx",
-    ".vue",
-    ".php",
-    ".astro",
-    ".svelte",
-    ".blade.php",
-    ".jinja",
-    ".jinja2",
-    ".j2",
-    ".md",
-  ];
+  const extensions = config.purge?.extensions || DEFAULT_EXTENSIONS;
 
   return fg.sync(
     extensions.map((ext) => `${sourceDir.replace(/\/$/, "")}/**/*${ext}`),
@@ -115,9 +104,10 @@ function getScanFiles(config) {
 function collectUsedClasses(config) {
   const files = getScanFiles(config);
   const usedClasses = new Set();
+  const ignoreList = config.purge?.ignore || DEFAULT_PURGE_IGNORE;
 
   for (const file of files) {
-    if (shouldIgnore(file)) continue;
+    if (shouldIgnore(file, ignoreList)) continue;
 
     try {
       const content = fs.readFileSync(file, "utf8");
@@ -210,6 +200,7 @@ function runProductionUpdate(filePath) {
 
   try {
     const config = readConfig();
+    activeIgnoreList = config.purge?.ignore || DEFAULT_PURGE_IGNORE;
     const normalisedFilePath = filePath ? normalisePath(filePath) : "";
     const isConfigChange = normalisedFilePath.endsWith("emily.config.json");
 
@@ -244,12 +235,13 @@ function getWatchPaths(config) {
 }
 
 function queueUpdate(filePath) {
-  if (filePath && shouldIgnore(filePath)) return;
+  if (filePath && shouldIgnore(filePath, activeIgnoreList)) return;
   runProductionUpdate(filePath);
 }
 
 function runWatch() {
   const config = readConfig();
+  activeIgnoreList = config.purge?.ignore || DEFAULT_PURGE_IGNORE;
   const watchPaths = getWatchPaths(config);
 
   console.log("");
@@ -270,7 +262,7 @@ function runWatch() {
   runProductionUpdate();
 
   const watcher = chokidar.watch(watchPaths, {
-    ignored: shouldIgnore,
+    ignored: (filePath) => shouldIgnore(filePath, activeIgnoreList),
     ignoreInitial: true,
     awaitWriteFinish: {
       stabilityThreshold: 500,
@@ -288,4 +280,4 @@ function runWatch() {
   });
 }
 
-runWatch();
+runWatch();