emily-css 1.1.1 → 1.2.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 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
 
@@ -11,6 +23,17 @@ All notable changes to `emily-css` are documented here.
 
 ---
 
+## 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**

package/README.md

@@ -53,8 +53,17 @@ 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)
 ```
 
+## 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.
+
 ## How Purge Works
 
 emilyCSS scans your templates for used class names and removes everything else.
@@ -146,4 +155,4 @@ Then import the weights you need.
 
 ## License
 
-MIT
+MIT

package/bin/emilyui.js

@@ -4,6 +4,21 @@ const path = require("path");
 
 const command = process.argv[2];
 const packageJson = require(path.join(__dirname, "..", "package.json"));
+const usageText = `
+  emily-css — Config-driven CSS framework generator
+
+  Usage:
+    emily-css init        Set up a new project
+    emily-css build       Generate production CSS to the configured output path
+    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
+      --import-colours    Detect Tailwind colour palettes and suggest importedPalettes config
+    emily-css showcase    Browse components in your browser
+    emily-css help        Full command reference
+
+  Run emily-css help for more detail.
+`;
 
 if (command === "init") {
   require("../src/init.js");
@@ -18,6 +33,12 @@ if (command === "init") {
   const { doctor } = require("../src/doctor.js");
   const result = doctor();
   process.exitCode = result.exitCode;
+} else if (command === "migrate") {
+  const { generateMigrationReport } = require("../src/migrate.js");
+  const { formatMigrationReport } = require("../src/reporters/migrationReporter.js");
+  const importColours = process.argv.includes("--import-colours");
+  const report = generateMigrationReport({ importColours });
+  console.log(formatMigrationReport(report, { importColours }));
 } else if (command === "version" || command === "--version" || command === "-v") {
   console.log(packageJson.version);
 } else if (command === "help") {
@@ -29,6 +50,8 @@ if (command === "init") {
     emily-css build       Generate production CSS to the configured output path
     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
+      --import-colours    Detect Tailwind colour palettes and suggest importedPalettes config
     emily-css showcase    Launch the component showcase in your browser
     emily-css version     Show installed version
     emily-css help        Show this help text
@@ -42,17 +65,11 @@ if (command === "init") {
   Docs: https://emilyui.dev
 `);
 } else {
-  console.log(`
-  emily-css — Config-driven CSS framework generator
-
-  Usage:
-    emily-css init        Set up a new project
-    emily-css build       Generate production CSS to the configured output path
-    emily-css watch       Dev mode: rebuild on changes
-    emily-css doctor      Scan project files for unknown EmilyCSS classes
-    emily-css showcase    Browse components in your browser
-    emily-css help        Full command reference
-
-  Run emily-css help for more detail.
-`);
+  if (!command) {
+    console.log(usageText);
+  } else {
+    console.error(`Unknown command: ${command}`);
+    console.log(usageText);
+    process.exitCode = 1;
+  }
 }

package/package.json

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

package/src/constants.js

@@ -0,0 +1,65 @@
+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_PURGE_IGNORE = [
+  'node_modules',
+  '.git',
+  '.nuxt',
+  '.next',
+  '.output',
+  'dist',
+  'build',
+  'coverage',
+  '.cache',
+  '.vite',
+];
+
+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 PURGE_EXTENSIONS = [...DEFAULT_EXTENSIONS];
+
+module.exports = {
+  DEFAULT_EXTENSIONS,
+  DEFAULT_PURGE_IGNORE,
+  DEFAULT_RESPONSIVE_VARIANTS,
+  BASE_VARIANTS,
+  PURGE_EXTENSIONS,
+};

package/src/doctor.js

@@ -3,28 +3,7 @@ const path = require("path");
 const fg = require("fast-glob");
 const { extractClassNames } = require("./purge.js");
 const { ensureFullFramework, generateManifest } = require("./index.js");
-
-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 getConfigPath() {
   return path.join(process.cwd(), "emily.config.json");

package/src/generators.js

@@ -281,6 +281,7 @@ function transitionUtilities() {
 // Transforms
 function transformUtilities(spacing) {
   let css = `/* Transforms */\n`;
+  const composedTransform = 'translate(var(--translate-x, 0), var(--translate-y, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1))';
 
   css += `.transform { transform: translateZ(0); }\n`;
   css += `.transform-gpu { transform: translate3d(0, 0, 0); }\n`;
@@ -289,30 +290,30 @@ function transformUtilities(spacing) {
   // Translate
   Object.entries(spacing).forEach(([key, value]) => {
     const escaped = escapeClassName(key);
-    css += `.translate-x-${escaped} { transform: translateX(${value}); }\n`;
-    css += `.translate-y-${escaped} { transform: translateY(${value}); }\n`;
-    css += `.-translate-x-${escaped} { transform: translateX(-${value}); }\n`;
-    css += `.-translate-y-${escaped} { transform: translateY(-${value}); }\n`;
+    css += `.translate-x-${escaped} { --translate-x: ${value}; transform: ${composedTransform}; }\n`;
+    css += `.translate-y-${escaped} { --translate-y: ${value}; transform: ${composedTransform}; }\n`;
+    css += `.-translate-x-${escaped} { --translate-x: -${value}; transform: ${composedTransform}; }\n`;
+    css += `.-translate-y-${escaped} { --translate-y: -${value}; transform: ${composedTransform}; }\n`;
   });
 
   // Rotate
   const rotations = [0, 1, 2, 3, 6, 12, 45, 90, 180];
   rotations.forEach(deg => {
-    css += `.rotate-${deg} { transform: rotate(${deg}deg); }\n`;
-    if (deg > 0) css += `.-rotate-${deg} { transform: rotate(-${deg}deg); }\n`;
+    css += `.rotate-${deg} { --rotate: ${deg}deg; transform: ${composedTransform}; }\n`;
+    if (deg > 0) css += `.-rotate-${deg} { --rotate: -${deg}deg; transform: ${composedTransform}; }\n`;
   });
 
   // Scale
   const scales = [0, 50, 75, 90, 95, 100, 110, 125, 150];
   scales.forEach(scale => {
-    css += `.scale-${scale} { transform: scale(${scale / 100}); }\n`;
+    css += `.scale-${scale} { --scale-x: ${scale / 100}; --scale-y: ${scale / 100}; transform: ${composedTransform}; }\n`;
   });
 
   // Skew
   const skews = [0, 1, 2, 3];
   skews.forEach(sk => {
-    css += `.skew-x-${sk} { transform: skewX(${sk}deg); }\n`;
-    css += `.skew-y-${sk} { transform: skewY(${sk}deg); }\n`;
+    css += `.skew-x-${sk} { --skew-x: ${sk}deg; transform: ${composedTransform}; }\n`;
+    css += `.skew-y-${sk} { --skew-y: ${sk}deg; transform: ${composedTransform}; }\n`;
   });
 
   // Transform origin
@@ -349,18 +350,21 @@ function shadowUtilities() {
 function ringUtilities(colours) {
   let css = `/* Rings & Outlines */\n`;
 
-  css += `.ring-0 { box-shadow: 0 0 0 0px var(--ring-color, transparent); }\n`;
-  css += `.ring-1 { box-shadow: 0 0 0 1px var(--ring-color, transparent); }\n`;
-  css += `.ring-2 { box-shadow: 0 0 0 2px var(--ring-color, transparent); }\n`;
+  css += `.ring-0 { --ring-offset-width: 0px; --ring-offset-color: #fff; --ring-color: currentColor; box-shadow: 0 0 0 var(--ring-offset-width, 0px) var(--ring-offset-color, #fff), 0 0 0 var(--ring-offset-width, 0px) transparent; }\n`;
+  css += `.ring-1 { --ring-offset-width: 0px; --ring-offset-color: #fff; --ring-color: currentColor; box-shadow: 0 0 0 var(--ring-offset-width, 0px) var(--ring-offset-color, #fff), 0 0 0 calc(1px + var(--ring-offset-width, 0px)) var(--ring-color, currentColor); }\n`;
+  css += `.ring-2 { --ring-offset-width: 0px; --ring-offset-color: #fff; --ring-color: currentColor; box-shadow: 0 0 0 var(--ring-offset-width, 0px) var(--ring-offset-color, #fff), 0 0 0 calc(2px + var(--ring-offset-width, 0px)) var(--ring-color, currentColor); }\n`;
 
   css += `.ring-offset-0 { --ring-offset-width: 0px; }\n`;
   css += `.ring-offset-2 { --ring-offset-width: 2px; }\n`;
   css += `.ring-offset-4 { --ring-offset-width: 4px; }\n`;
+  css += `.ring-offset-white { --ring-offset-color: #fff; }\n`;
+  css += `.ring-offset-black { --ring-offset-color: #000; }\n`;
 
   // Ring colours
   Object.entries(colours).forEach(([colourName, shades]) => {
     Object.entries(shades).forEach(([shade]) => {
       css += `.ring-${colourName}-${shade} { --ring-color: var(--color-${colourName}-${shade}); }\n`;
+      css += `.ring-offset-${colourName}-${shade} { --ring-offset-color: var(--color-${colourName}-${shade}); }\n`;
     });
   });
 
@@ -642,13 +646,10 @@ function accessibilityUtilities() {
 // Container Queries (Forward-looking)
 function containerUtilities() {
   return `/* Container Queries */
-@supports (container-type: inline-size) {
-  .container-type-inline { container-type: inline-size; }
-  @container (min-width: 20rem) { .cq-xs\\: { /* utilities */ } }
-  @container (min-width: 28rem) { .cq-sm\\: { /* utilities */ } }
-  @container (min-width: 36rem) { .cq-md\\: { /* utilities */ } }
-  @container (min-width: 48rem) { .cq-lg\\: { /* utilities */ } }
-}
+.container-type-inline { container-type: inline-size; }
+.container-type-size { container-type: size; }
+.container-type-normal { container-type: normal; }
+.container-name-none { container-name: none; }
 
 `;
 }

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 = {};