emily-css 1.2.6 → 1.2.8

package/CHANGELOG.md

@@ -4,6 +4,50 @@ All notable changes to `emily-css` are documented here.
 
 ---
 
+## v1.2.8 — May 2026
+
+**feat(purge): add purge safelist support and keep semantic dark/light utilities**
+
+### Added
+- feat(purge): add purge safelist support and keep semantic dark/light utilities
+- add purge safelist support and keep semantic dark/light utilities
+- widen utility-prefix detection for scanner
+- expand Tailwind-compatible utility coverage
+
+### Changed
+- add coverage for new utility classes
+
+---
+## v1.2.8 — May 2026
+
+**Expand Tailwind-compat utility coverage and align migration scanner utility-family detection.**
+
+### Added
+- utilities: negative margin set (`-m-*`, `-mx-*`, `-my-*`, `-mt-*`, `-mr-*`, `-mb-*`, `-ml-*`)
+- utilities: full positioning values (`top/right/bottom/left/inset(-x/-y)-full`)
+- utilities: `box-border`, `box-content`
+- utilities: `justify-items-*`, `justify-self-*`
+- utilities: `max-h-none`
+- utilities: font weight completion (`font-thin`, `font-extralight`, `font-extrabold`, `font-black`)
+- utilities: `bg-origin-*` and `bg-gradient-to-*`
+- utilities: `transition-all`, `transition-shadow`
+- utilities: `scale-x-*`, `scale-y-*`, expanded skew and negative skew variants
+- utilities: full overscroll set (`overscroll-*`, `overscroll-x-*`, `overscroll-y-*`)
+
+### Changed
+- migrate: expanded utility-prefix detection to include `box-*`, `overscroll-*`, `transition-*`, `color-scheme-*`, `field-sizing-*`, and `scrollbar-*` families.
+- docs: updated README and migrate documentation with new compatibility coverage.
+
+---
+
+## v1.2.7 — May 2026
+
+**Fix migration scanner filtering so Vue dynamic class placeholders such as [rootClass] are not reported as unsupported arbitrary value utilities.**
+
+### Fixed
+- fix: ignore dynamic class placeholders in migration scan
+
+---
 ## v1.2.6 — May 2026
 
 **Fix migration scanner false positives by ignoring prose tokens, JS property access, and dynamic placeholders while keeping valid utility classes and arbitrary value support.**
@@ -455,4 +499,4 @@ All notable changes to `emily-css` are documented here.
 - 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:` `disab
+- State variants (`hover:` `focus-visible:` `active:` `disab

package/README.md

@@ -11,6 +11,7 @@ emilyCSS lets you define design tokens in `emily.config.json` and generate stati
 - 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)
+- Broader Tailwind-style compatibility coverage for everyday migration classes
 - Tooling support with manifest and IntelliSense JSON generation
 - CommonJS package with Node 18+ compatibility
 
@@ -67,6 +68,23 @@ npm run emily:help
 - `migrate` is report-only and helps plan Tailwind-to-Emily migrations without modifying files.
 - For best migrate accuracy, generate the full framework/manifest first (`emily-css build --keep-full` or enable `manifest: true`).
 
+## Tailwind compatibility additions
+
+Recent utility coverage additions include:
+
+- Negative margin utilities: `-m-*`, `-mx-*`, `-my-*`, `-mt-*`, `-mr-*`, `-mb-*`, `-ml-*`
+- Positioning full values: `top-full`, `right-full`, `bottom-full`, `left-full`, `inset-full`, `inset-x-full`, `inset-y-full`
+- Box sizing: `box-border`, `box-content`
+- Grid alignment: `justify-items-*`, `justify-self-*`
+- Sizing completion: `max-h-none`
+- Typography completion: `font-thin`, `font-extralight`, `font-extrabold`, `font-black`
+- Background origin and gradient directions: `bg-origin-*`, `bg-gradient-to-*`
+- Transition completion: `transition-all`, `transition-shadow`
+- Transform axis utilities: `scale-x-*`, `scale-y-*`, extended `skew-x-*`, `skew-y-*`, and negative skew variants
+- Overscroll behavior: `overscroll-*`, `overscroll-x-*`, `overscroll-y-*`
+
+Migration scanner utility-prefix detection was also expanded for classes like `box-*`, `overscroll-*`, `transition-*`, `color-scheme-*`, `field-sizing-*`, and `scrollbar-*`.
+
 ## Manifest and IntelliSense JSON
 
 Enable machine-readable outputs when needed:

package/package.json

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

package/src/generators/background.js

@@ -9,6 +9,9 @@ function backgroundUtilities() {
 .bg-clip-padding { background-clip: padding-box; }
 .bg-clip-content { background-clip: content-box; }
 .bg-clip-text { -webkit-background-clip: text; background-clip: text; }
+.bg-origin-border { background-origin: border-box; }
+.bg-origin-padding { background-origin: padding-box; }
+.bg-origin-content { background-origin: content-box; }
 .bg-repeat { background-repeat: repeat; }
 .bg-no-repeat { background-repeat: no-repeat; }
 .bg-repeat-x { background-repeat: repeat-x; }
@@ -27,6 +30,14 @@ function backgroundUtilities() {
 .bg-left-bottom { background-position: left bottom; }
 .bg-right-top { background-position: right top; }
 .bg-right-bottom { background-position: right bottom; }
+.bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); }
+.bg-gradient-to-tr { background-image: linear-gradient(to top right, var(--tw-gradient-stops)); }
+.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
+.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
+.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }
+.bg-gradient-to-bl { background-image: linear-gradient(to bottom left, var(--tw-gradient-stops)); }
+.bg-gradient-to-l { background-image: linear-gradient(to left, var(--tw-gradient-stops)); }
+.bg-gradient-to-tl { background-image: linear-gradient(to top left, var(--tw-gradient-stops)); }
 
 `;
 }

package/src/generators/display.js

@@ -37,6 +37,8 @@ function displayUtilities() {
 .clear-right { clear: right; }
 .clear-both { clear: both; }
 .clear-none { clear: none; }
+.box-border { box-sizing: border-box; }
+.box-content { box-sizing: content-box; }
 
 `;
 }

package/src/generators/effects.js

@@ -16,8 +16,10 @@ function transitionUtilities() {
   return `/* Transitions */
 .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
 .transition-none { transition-property: none; }
+.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
 .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
 .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
+.transition-shadow { transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
 .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
 .duration-75 { transition-duration: 75ms; }
 .duration-100 { transition-duration: 100ms; }

package/src/generators/overflow.js

@@ -17,6 +17,15 @@ function overflowUtilities() {
 .overflow-y-clip { overflow-y: clip; }
 .overflow-y-visible { overflow-y: visible; }
 .overflow-y-scroll { overflow-y: scroll; }
+.overscroll-auto { overscroll-behavior: auto; }
+.overscroll-contain { overscroll-behavior: contain; }
+.overscroll-none { overscroll-behavior: none; }
+.overscroll-x-auto { overscroll-behavior-x: auto; }
+.overscroll-x-contain { overscroll-behavior-x: contain; }
+.overscroll-x-none { overscroll-behavior-x: none; }
+.overscroll-y-auto { overscroll-behavior-y: auto; }
+.overscroll-y-contain { overscroll-behavior-y: contain; }
+.overscroll-y-none { overscroll-behavior-y: none; }
 .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .text-ellipsis { text-overflow: ellipsis; }
 .text-clip { text-overflow: clip; }

package/src/generators/positioning.js

@@ -36,6 +36,20 @@ function positioningUtilities(spacing) {
   css += `.inset-auto { inset: auto; }\n`;
   css += `.inset-x-auto { left: auto; right: auto; }\n`;
   css += `.inset-y-auto { top: auto; bottom: auto; }\n`;
+  css += `.inset-full { inset: 100%; }\n`;
+  css += `.inset-x-full { left: 100%; right: 100%; }\n`;
+  css += `.inset-y-full { top: 100%; bottom: 100%; }\n`;
+  css += `.top-full { top: 100%; }\n`;
+  css += `.right-full { right: 100%; }\n`;
+  css += `.bottom-full { bottom: 100%; }\n`;
+  css += `.left-full { left: 100%; }\n`;
+  css += `.-inset-full { inset: -100%; }\n`;
+  css += `.-inset-x-full { left: -100%; right: -100%; }\n`;
+  css += `.-inset-y-full { top: -100%; bottom: -100%; }\n`;
+  css += `.-top-full { top: -100%; }\n`;
+  css += `.-right-full { right: -100%; }\n`;
+  css += `.-bottom-full { bottom: -100%; }\n`;
+  css += `.-left-full { left: -100%; }\n`;
   css += `.top-auto { top: auto; }\n`;
   css += `.right-auto { right: auto; }\n`;
   css += `.bottom-auto { bottom: auto; }\n`;

package/src/generators/sizing.js

@@ -75,6 +75,7 @@ function sizingUtilities(spacing) {
   css += `.max-w-max { max-width: max-content; }\n`;
   css += `.max-w-fit { max-width: fit-content; }\n`;
   css += `.max-h-0 { max-height: 0; }\n`;
+  css += `.max-h-none { max-height: none; }\n`;
   css += `.max-h-full { max-height: 100%; }\n`;
   css += `.max-h-screen { max-height: 100vh; }\n`;
   css += `.max-h-svh { max-height: 100svh; }\n`;

package/src/generators/transforms.js

@@ -32,13 +32,19 @@ function transformUtilities(spacing) {
   const scales = [0, 50, 75, 90, 95, 100, 110, 125, 150];
   scales.forEach(scale => {
     css += `.scale-${scale} { --scale-x: ${scale / 100}; --scale-y: ${scale / 100}; transform: ${composedTransform}; }\n`;
+    css += `.scale-x-${scale} { --scale-x: ${scale / 100}; transform: ${composedTransform}; }\n`;
+    css += `.scale-y-${scale} { --scale-y: ${scale / 100}; transform: ${composedTransform}; }\n`;
   });
 
   // Skew
-  const skews = [0, 1, 2, 3];
+  const skews = [0, 1, 2, 3, 6, 12];
   skews.forEach(sk => {
     css += `.skew-x-${sk} { --skew-x: ${sk}deg; transform: ${composedTransform}; }\n`;
     css += `.skew-y-${sk} { --skew-y: ${sk}deg; transform: ${composedTransform}; }\n`;
+    if (sk > 0) {
+      css += `.-skew-x-${sk} { --skew-x: -${sk}deg; transform: ${composedTransform}; }\n`;
+      css += `.-skew-y-${sk} { --skew-y: -${sk}deg; transform: ${composedTransform}; }\n`;
+    }
   });
 
   // Transform origin

package/src/index.js

@@ -356,6 +356,17 @@ function generateSpacingUtilities(spacing) {
     css += `.ml-${escaped} { margin-left: ${value}; }\n`;
     css += `.ms-${escaped} { margin-inline-start: ${value}; }\n`;
     css += `.me-${escaped} { margin-inline-end: ${value}; }\n`;
+    if (value !== '0' && value !== '0px') {
+      css += `.-m-${escaped} { margin: -${value}; }\n`;
+      css += `.-mx-${escaped} { margin-left: -${value}; margin-right: -${value}; }\n`;
+      css += `.-my-${escaped} { margin-top: -${value}; margin-bottom: -${value}; }\n`;
+      css += `.-mt-${escaped} { margin-top: -${value}; }\n`;
+      css += `.-mr-${escaped} { margin-right: -${value}; }\n`;
+      css += `.-mb-${escaped} { margin-bottom: -${value}; }\n`;
+      css += `.-ml-${escaped} { margin-left: -${value}; }\n`;
+      css += `.-ms-${escaped} { margin-inline-start: -${value}; }\n`;
+      css += `.-me-${escaped} { margin-inline-end: -${value}; }\n`;
+    }
   });
 
   // Margin auto
@@ -552,6 +563,16 @@ function generateGridUtilities(spacing) {
     css += `.gap-y-${escaped} { row-gap: ${value}; }\n`;
   });
 
+  css += `.justify-items-start { justify-items: start; }\n`;
+  css += `.justify-items-end { justify-items: end; }\n`;
+  css += `.justify-items-center { justify-items: center; }\n`;
+  css += `.justify-items-stretch { justify-items: stretch; }\n`;
+  css += `.justify-self-auto { justify-self: auto; }\n`;
+  css += `.justify-self-start { justify-self: start; }\n`;
+  css += `.justify-self-end { justify-self: end; }\n`;
+  css += `.justify-self-center { justify-self: center; }\n`;
+  css += `.justify-self-stretch { justify-self: stretch; }\n`;
+
   css += `\n`;
   return css;
 }
@@ -567,7 +588,23 @@ function generateTypographyUtilities(config) {
     css += `.text-${fontSize.name} { font-size: var(--text-${fontSize.name}); line-height: ${fontSize.lineHeight}; }\n`;
   });
 
-  Object.entries(config.typography.fontWeights).forEach(([name, weight]) => {
+  const fontWeightDefaults = {
+    thin: 100,
+    extralight: 200,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800,
+    black: 900,
+  };
+  const resolvedFontWeights = {
+    ...fontWeightDefaults,
+    ...(config.typography.fontWeights || {}),
+  };
+
+  Object.entries(resolvedFontWeights).forEach(([name, weight]) => {
     css += `.font-${name} { font-weight: ${weight}; }\n`;
   });
 

package/src/init.js

@@ -56,6 +56,16 @@ const FONT_OPTIONS = [
   { name: "atkinson", message: "Atkinson Hyperlegible (maximum legibility)" },
   { name: "system", message: "System sans-serif (no download required)" },
 ];
+const CORE_COLOUR_KEYS = new Set([
+  "brand",
+  "accent",
+  "btn-primary",
+  "btn-secondary",
+  "success",
+  "warning",
+  "error",
+  "neutral",
+]);
 
 // ============================================================================
 // HELPERS
@@ -65,10 +75,47 @@ function isValidHex(hex) {
   return /^#[0-9A-F]{6}$/i.test(hex);
 }
 
+function isPlainObject(value) {
+  return (
+    value !== null &&
+    typeof value === "object" &&
+    !Array.isArray(value)
+  );
+}
+
+function mergeWithDefaults(defaults, existing) {
+  if (!isPlainObject(defaults)) {
+    return existing === undefined ? defaults : existing;
+  }
+
+  const output = { ...defaults };
+
+  if (!isPlainObject(existing)) {
+    return output;
+  }
+
+  Object.keys(existing).forEach((key) => {
+    if (isPlainObject(defaults[key]) && isPlainObject(existing[key])) {
+      output[key] = mergeWithDefaults(defaults[key], existing[key]);
+      return;
+    }
+
+    output[key] = existing[key];
+  });
+
+  return output;
+}
+
 function colourSwatch(hex) {
   return chalk.hex(hex)("■");
 }
 
+function normaliseHex(value) {
+  return typeof value === "string" && isValidHex(value)
+    ? value.toUpperCase()
+    : null;
+}
+
 async function askHex(promptName, message, initial) {
   const value = await new Input({
     name: promptName,
@@ -84,28 +131,69 @@ async function askHex(promptName, message, initial) {
   return value.toUpperCase();
 }
 
-async function askColourFromPresets(label, presets, defaultHex) {
+async function askColourFromPresets(label, presets, defaultHex, currentHex) {
+  const defaultHexValue = normaliseHex(defaultHex);
+  const currentHexValue = normaliseHex(currentHex);
+
   const choices = presets.map(function (opt) {
     if (opt.value === "custom") {
       return { name: "custom", message: "Enter your own hex" };
     }
 
+    const upperHex = String(opt.value).toUpperCase();
     return {
-      name: opt.value,
+      name: upperHex,
       message:
-        colourSwatch(opt.value) + " " + opt.label + " " + chalk.gray(opt.value),
+        colourSwatch(upperHex) + " " + opt.label + " " + chalk.gray(upperHex),
     };
   });
 
+  let initial = Math.max(
+    0,
+    choices.findIndex((choice) => choice.name === "custom"),
+  );
+
+  if (currentHexValue) {
+    const currentIndex = choices.findIndex(
+      (choice) => choice.name === currentHexValue,
+    );
+
+    if (currentIndex !== -1) {
+      initial = currentIndex;
+    } else {
+      choices.unshift({
+        name: "__current__",
+        message:
+          "Keep current " +
+          label +
+          " " +
+          colourSwatch(currentHexValue) +
+          " " +
+          chalk.gray(currentHexValue),
+      });
+      initial = 0;
+    }
+  } else if (defaultHexValue) {
+    const defaultIndex = choices.findIndex(
+      (choice) => choice.name === defaultHexValue,
+    );
+    if (defaultIndex !== -1) {
+      initial = defaultIndex;
+    }
+  }
+
   const selected = await new Select({
     name: label,
     message: label + " colour",
     choices,
+    initial,
   }).run();
 
+  if (selected === "__current__" && currentHexValue) return currentHexValue;
   if (selected !== "custom") return selected.toUpperCase();
 
-  return askHex(label + "Custom", "Enter " + label + " hex", defaultHex);
+  const fallbackHex = currentHexValue || defaultHexValue || "#000000";
+  return askHex(label + "Custom", "Enter " + label + " hex", fallbackHex);
 }
 
 function hasFile(fileName) {
@@ -124,6 +212,50 @@ function readPackageJson() {
   }
 }
 
+function readExistingConfig() {
+  const configPath = path.join(process.cwd(), "emily.config.json");
+
+  if (!fs.existsSync(configPath)) return null;
+
+  try {
+    return JSON.parse(fs.readFileSync(configPath, "utf8"));
+  } catch {
+    return null;
+  }
+}
+
+function getFontInitialIndex(fontKey, fallbackIndex) {
+  if (!fontKey || typeof fontKey !== "string") return fallbackIndex;
+  const normalised = fontKey.toLowerCase();
+  const index = FONT_OPTIONS.findIndex((option) => option.name === normalised);
+  return index === -1 ? fallbackIndex : index;
+}
+
+function getExistingAdditionalColours(existingColours) {
+  if (!isPlainObject(existingColours)) return {};
+
+  const additional = {};
+  Object.entries(existingColours).forEach(([name, value]) => {
+    if (CORE_COLOUR_KEYS.has(name)) return;
+    if (!/^[a-z][a-z0-9-]*$/.test(name)) return;
+
+    const upperHex = normaliseHex(value);
+    if (!upperHex) return;
+    additional[name] = upperHex;
+  });
+
+  return additional;
+}
+
+function getBaseUnitInitial(config) {
+  const rawBaseUnit = config && typeof config.baseUnit === "string"
+    ? config.baseUnit
+    : "";
+  const parsed = Number.parseInt(rawBaseUnit, 10);
+  if (Number.isNaN(parsed) || parsed <= 0) return "18";
+  return String(parsed);
+}
+
 function hasDependency(packageJson, dependencyName) {
   if (!packageJson) return false;
 
@@ -344,6 +476,16 @@ function createDefaultConfig({
       sourceDir: detectedProject.sourceDir,
       sourceGlobs: detectedProject.sourceGlobs,
       ignore: DEFAULT_PURGE_IGNORE,
+      safelist: [
+        "bg-dark",
+        "text-dark",
+        "border-dark",
+        "fill-dark",
+        "bg-light",
+        "text-light",
+        "border-light",
+        "fill-light",
+      ],
       extensions: PURGE_EXTENSIONS,
     },
 
@@ -492,10 +634,24 @@ async function init() {
     const spinner = ora("Analysing project structure...").start();
     const detectedProject = detectProject();
     spinner.succeed("Detected project: " + chalk.cyan(detectedProject.name));
+    const existingConfig = readExistingConfig();
+    const existingColours = isPlainObject(existingConfig && existingConfig.colours)
+      ? existingConfig.colours
+      : {};
+
+    if (existingConfig) {
+      console.log(
+        chalk.gray(
+          "  Found existing emily.config.json. Prompts are pre-filled from current settings.",
+        ),
+      );
+    }
 
     const packageJsonData = readPackageJson();
     const pkgName =
-      packageJsonData && packageJsonData.name
+      existingConfig && typeof existingConfig.name === "string" && existingConfig.name.trim()
+        ? existingConfig.name.trim()
+        : packageJsonData && packageJsonData.name
         ? titleCasePackageName(packageJsonData.name)
         : "My Design System";
 
@@ -523,11 +679,13 @@ async function init() {
       "brand",
       COLOUR_PRESETS.primary,
       "#DB2777",
+      existingColours.brand,
     );
     const accent = await askColourFromPresets(
       "accent",
       COLOUR_PRESETS.secondary,
       "#2563EB",
+      existingColours.accent,
     );
 
     console.log(
@@ -549,16 +707,19 @@ async function init() {
       "success",
       COLOUR_PRESETS.success,
       "#017F65",
+      existingColours.success,
     );
     const warning = await askColourFromPresets(
       "warning",
       COLOUR_PRESETS.warning,
       "#FFC107",
+      existingColours.warning,
     );
     const error = await askColourFromPresets(
       "error",
       COLOUR_PRESETS.error,
       "#B20000",
+      existingColours.error,
     );
 
     const colours = {
@@ -569,7 +730,8 @@ async function init() {
       success,
       warning,
       error,
-      neutral: "#57534E",
+      neutral: normaliseHex(existingColours.neutral) || "#57534E",
+      ...getExistingAdditionalColours(existingColours),
     };
 
     let addingMore = true;
@@ -619,14 +781,24 @@ async function init() {
       name: "headingFont",
       message: "Heading font",
       choices: FONT_OPTIONS,
-      initial: 0,
+      initial: getFontInitialIndex(
+        isPlainObject(existingConfig && existingConfig.fontFamily)
+          ? existingConfig.fontFamily.heading
+          : existingConfig && existingConfig.fontFamily,
+        0,
+      ),
     }).run();
 
     const bodyFont = await new Select({
       name: "bodyFont",
       message: "Body font",
       choices: FONT_OPTIONS,
-      initial: 1,
+      initial: getFontInitialIndex(
+        isPlainObject(existingConfig && existingConfig.fontFamily)
+          ? existingConfig.fontFamily.body
+          : existingConfig && existingConfig.fontFamily,
+        1,
+      ),
     }).run();
 
     // =========================================================================
@@ -636,7 +808,7 @@ async function init() {
     const baseUnitRaw = await new Input({
       name: "baseUnit",
       message: "Base spacing unit in px (label/documentation only)",
-      initial: "18",
+      initial: getBaseUnitInitial(existingConfig),
       validate: function (value) {
         const parsed = Number.parseInt(value, 10);
 
@@ -675,7 +847,7 @@ async function init() {
     // BUILD
     // =========================================================================
 
-    const config = createDefaultConfig({
+    const generatedDefaults = createDefaultConfig({
       name: projectName.trim(),
       colours,
       headingFont,
@@ -683,6 +855,19 @@ async function init() {
       baseUnit,
       detectedProject,
     });
+    const config = mergeWithDefaults(generatedDefaults, existingConfig);
+    config.name = projectName.trim();
+
+    if (!existingConfig || !existingConfig.description) {
+      config.description = config.name + " design system";
+    }
+
+    config.baseUnit = baseUnit + "px";
+    config.fontFamily = {
+      heading: headingFont,
+      body: bodyFont,
+    };
+    config.colours = colours;
 
     const configPath = path.join(process.cwd(), "emily.config.json");
     fs.writeFileSync(configPath, JSON.stringify(config, null, 2) + "\n");

package/src/migrate.js

@@ -224,11 +224,14 @@ const UTILITY_PREFIX_ALLOWLIST = new Set([
   'content',
   'self',
   'place',
+  'box',
   'object',
   'overflow',
+  'overscroll',
   'divide',
   'cursor',
   'select',
+  'transition',
   'duration',
   'delay',
   'ease',
@@ -241,6 +244,9 @@ const UTILITY_PREFIX_ALLOWLIST = new Set([
   'basis',
   'grow',
   'shrink',
+  'color-scheme',
+  'field-sizing',
+  'scrollbar',
 ]);
 
 function hasUtilityLikeSyntax(className) {
@@ -579,7 +585,7 @@ function isLikelyUtilityClass(className) {
  * Ignore obvious prose / JS expressions
  */
 if (/[.]+$/.test(className)) return false;
-if (/^[[][^:\]]+[]]$/.test(className)) return false;
+if (/^\[[^\]:]+\]$/.test(className)) return false;
 if (/^[a-zA-Z]+\.[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;

package/src/purge.js

@@ -222,6 +222,9 @@ function printFileSummary(files, extensions) {
 function purgeCSS(css, scanDir, config) {
   const resolvedPurgeConfig = resolvePurgeConfig(config);
   const extensions = resolvedPurgeConfig.extensions || DEFAULT_EXTENSIONS;
+  const safelist = Array.isArray(resolvedPurgeConfig.safelist)
+    ? resolvedPurgeConfig.safelist
+    : [];
   const files = getFilesForPurge(scanDir, config, extensions);
 
   printFileSummary(files, extensions);
@@ -245,7 +248,12 @@ function purgeCSS(css, scanDir, config) {
     }
   }
 
+  safelist.forEach((className) => usedClasses.add(className));
+
   console.log(`   Extracted ${usedClasses.size} unique class names`);
+  if (safelist.length > 0) {
+    console.log(`   Safelisted ${safelist.length} class names`);
+  }
 
   const blocks = extractBlocks(css);
   const purgedBlocks = blocks

package/src/purgeConfig.js

@@ -170,12 +170,21 @@ function resolvePurgeConfig(config = {}, options = {}) {
   }
 
   const sourceDir = purge.sourceDir || preset.sourceDir || '.';
+  const safelist = Array.isArray(purge.safelist)
+    ? unique(
+      purge.safelist
+        .filter((entry) => typeof entry === 'string')
+        .map((entry) => entry.trim())
+        .filter(Boolean),
+    )
+    : [];
 
   return {
     projectType,
     sourceDir,
     sourceGlobs,
     ignore: unique([...DEFAULT_PURGE_IGNORE, ...(purge.ignore || [])]),
+    safelist,
     extensions: Array.isArray(purge.extensions) && purge.extensions.length > 0
       ? purge.extensions
       : DEFAULT_EXTENSIONS,
@@ -188,4 +197,3 @@ module.exports = {
   detectProjectType,
   resolvePurgeConfig,
 };
-