emily-css 1.2.7 → 1.2.9

package/CHANGELOG.md

@@ -4,6 +4,50 @@ All notable changes to `emily-css` are documented here.
 
 ---
 
+## v1.2.9 — May 2026
+
+**Fix baseFontSize handling in emily-css init and generated CSS**
+
+### Fixed
+- fix(init): persist baseFontSize and emit html font-size for non-default values
+
+---
+## 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.**
@@ -463,4 +507,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.7",
+  "version": "1.2.9",
   "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