emily-css 1.2.0 → 1.2.1

package/CHANGELOG.md

@@ -25,6 +25,11 @@ All notable changes to `emily-css` are documented here.
 
 ## v1.2.1 — May 2026
 
+**Refactor utility generators into modules**
+
+---
+## v1.2.1 — May 2026
+
 **updated the full system to be more efficient**
 
 ### Added

package/package.json

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

package/src/generators/accessibility.js

@@ -0,0 +1,40 @@
+'use strict'
+
+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; }
+
+/* Touch target — WCAG 2.2 SC 2.5.8 minimum 24x24px hit area */
+.touch-target { position: relative; }
+.touch-target::before { content: ''; position: absolute; top: 50%; left: 50%; width: max(100%, 24px); height: max(100%, 24px); transform: translate(-50%, -50%); }
+
+/* Skip link — reveals on focus for keyboard/AT users */
+.skip-link { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
+.skip-link:focus { position: fixed; top: 1rem; left: 1rem; z-index: 1070; width: auto; height: auto; padding: 0.75rem 1.25rem; background-color: #ffffff; color: #000000; font-weight: 700; text-decoration: underline; border: 2px solid currentColor; border-radius: 4px; clip: auto; white-space: normal; }
+
+@media (prefers-reduced-motion: reduce) {
+  .motion-reduce\\:transition-none { transition-property: none; }
+  .motion-reduce\\:animate-none { animation: none; }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .motion-safe\\: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; }
+}
+@media (forced-colors: active) {
+  .forced-colors\\:outline { outline: 1px solid CanvasText; }
+  .forced-colors\\:outline-1 { outline: 1px solid CanvasText; }
+  .forced-colors\\:forced-color-adjust-none { forced-color-adjust: none; }
+}
+
+`;
+}
+
+module.exports = {
+  accessibilityUtilities,
+};

package/src/generators/animation.js

@@ -0,0 +1,31 @@
+'use strict'
+
+function animationUtilities() {
+  return `/* Animations — keyframes */
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+@keyframes ping {
+  75%, 100% { transform: scale(2); opacity: 0; }
+}
+@keyframes pulse {
+  50% { opacity: 0.5; }
+}
+@keyframes bounce {
+  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
+  50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
+}
+
+/* Animations — utilities */
+.animate-none { animation: none; }
+.animate-spin { animation: spin 1s linear infinite; }
+.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
+.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+.animate-bounce { animation: bounce 1s infinite; }
+
+`;
+}
+
+module.exports = {
+  animationUtilities,
+};

package/src/generators/background.js

@@ -0,0 +1,36 @@
+'use strict'
+
+function backgroundUtilities() {
+  return `/* Background */
+.bg-fixed { background-attachment: fixed; }
+.bg-local { background-attachment: local; }
+.bg-scroll { background-attachment: scroll; }
+.bg-clip-border { background-clip: border-box; }
+.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-repeat { background-repeat: repeat; }
+.bg-no-repeat { background-repeat: no-repeat; }
+.bg-repeat-x { background-repeat: repeat-x; }
+.bg-repeat-y { background-repeat: repeat-y; }
+.bg-repeat-round { background-repeat: round; }
+.bg-repeat-space { background-repeat: space; }
+.bg-auto { background-size: auto; }
+.bg-cover { background-size: cover; }
+.bg-contain { background-size: contain; }
+.bg-center { background-position: center; }
+.bg-top { background-position: top; }
+.bg-bottom { background-position: bottom; }
+.bg-left { background-position: left; }
+.bg-right { background-position: right; }
+.bg-left-top { background-position: left top; }
+.bg-left-bottom { background-position: left bottom; }
+.bg-right-top { background-position: right top; }
+.bg-right-bottom { background-position: right bottom; }
+
+`;
+}
+
+module.exports = {
+  backgroundUtilities,
+};

package/src/generators/code.js

@@ -0,0 +1,31 @@
+'use strict'
+
+function codeUtilities() {
+  return `/* Code — window chrome */
+.code-window { border-radius: 8px; overflow: hidden; border: 1px solid #3c3c3c; }
+.code-title-bar { background-color: #2d2d2d; padding: 0.5rem 1rem; display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid #3c3c3c; }
+.code-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
+.code-dot-red { background-color: #ff5f57; }
+.code-dot-yellow { background-color: #ffbd2e; }
+.code-dot-green { background-color: #28c840; }
+.code-filename { font-family: "Menlo", "Monaco", "Courier New", monospace; font-size: 0.85rem; color: white; margin-left: 0.5rem; }
+
+/* Code — VSCode Dark+ token colours */
+.token-tag { color: #569cd6; }
+.token-attr { color: #9cdcfe; }
+.token-string { color: #ce9178; }
+.token-number { color: #b5cea8; }
+.token-variant { color: #4ec9b0; }
+.token-utility { color: #dcdcaa; }
+.token-colour { color: #6a9955; }
+.token-comment { color: #6a9955; opacity: 0.75; font-style: italic; }
+.token-keyword { color: #c586c0; }
+.token-operator { color: #d4d4d4; }
+.token-line-number { color: #858585; user-select: none; padding-right: 1rem; display: inline-block; min-width: 2rem; text-align: right; }
+
+`;
+}
+
+module.exports = {
+  codeUtilities,
+};

package/src/generators/display.js

@@ -0,0 +1,46 @@
+'use strict'
+
+function displayUtilities() {
+  return `/* Display & Visibility */
+.block { display: block; }
+.inline { display: inline; }
+.inline-block { display: inline-block; }
+.flow-root { display: flow-root; }
+.flex { display: flex; }
+.inline-flex { display: inline-flex; }
+.grid { display: grid; }
+.inline-grid { display: inline-grid; }
+.contents { display: contents; }
+.list-item { display: list-item; }
+.hidden { display: none; }
+.table { display: table; }
+.inline-table { display: inline-table; }
+.table-caption { display: table-caption; }
+.table-cell { display: table-cell; }
+.table-column { display: table-column; }
+.table-column-group { display: table-column-group; }
+.table-footer-group { display: table-footer-group; }
+.table-header-group { display: table-header-group; }
+.table-row-group { display: table-row-group; }
+.table-row { display: table-row; }
+.visible { visibility: visible; }
+.invisible { visibility: hidden; }
+.collapse { visibility: collapse; }
+.float-start { float: inline-start; }
+.float-end { float: inline-end; }
+.float-right { float: right; }
+.float-left { float: left; }
+.float-none { float: none; }
+.clear-start { clear: inline-start; }
+.clear-end { clear: inline-end; }
+.clear-left { clear: left; }
+.clear-right { clear: right; }
+.clear-both { clear: both; }
+.clear-none { clear: none; }
+
+`;
+}
+
+module.exports = {
+  displayUtilities,
+};

package/src/generators/effects.js

@@ -0,0 +1,218 @@
+'use strict'
+
+function opacityUtilities() {
+  const opacities = [0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100];
+  let css = `/* Opacity */\n`;
+
+  opacities.forEach(op => {
+    css += `.opacity-${op} { opacity: ${op / 100}; }\n`;
+  });
+
+  css += `\n`;
+  return css;
+}
+
+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-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-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; }
+.duration-150 { transition-duration: 150ms; }
+.duration-200 { transition-duration: 200ms; }
+.duration-300 { transition-duration: 300ms; }
+.duration-500 { transition-duration: 500ms; }
+.duration-700 { transition-duration: 700ms; }
+.duration-1000 { transition-duration: 1000ms; }
+.ease-linear { transition-timing-function: linear; }
+.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
+.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
+.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
+.delay-75 { transition-delay: 75ms; }
+.delay-100 { transition-delay: 100ms; }
+.delay-150 { transition-delay: 150ms; }
+.delay-200 { transition-delay: 200ms; }
+.delay-300 { transition-delay: 300ms; }
+.delay-500 { transition-delay: 500ms; }
+
+`;
+}
+
+function shadowUtilities() {
+  return `/* Shadows */
+.shadow-none { box-shadow: none; }
+.shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
+.shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); }
+.shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); }
+.shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); }
+.shadow-xl { box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04); }
+.shadow-2xl { box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25); }
+.shadow-inner { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06); }
+
+`;
+}
+
+function blendUtilities() {
+  return `/* Blend Modes */
+.mix-normal { mix-blend-mode: normal; }
+.mix-multiply { mix-blend-mode: multiply; }
+.mix-screen { mix-blend-mode: screen; }
+.mix-overlay { mix-blend-mode: overlay; }
+.mix-darken { mix-blend-mode: darken; }
+.mix-lighten { mix-blend-mode: lighten; }
+.mix-color-dodge { mix-blend-mode: color-dodge; }
+.mix-color-burn { mix-blend-mode: color-burn; }
+.mix-hard-light { mix-blend-mode: hard-light; }
+.mix-soft-light { mix-blend-mode: soft-light; }
+.mix-difference { mix-blend-mode: difference; }
+.mix-exclusion { mix-blend-mode: exclusion; }
+.mix-hue { mix-blend-mode: hue; }
+.mix-saturation { mix-blend-mode: saturation; }
+.mix-color { mix-blend-mode: color; }
+.mix-luminosity { mix-blend-mode: luminosity; }
+
+`;
+}
+
+function cursorUtilities() {
+  return `/* Cursors & Interactions */
+.cursor-auto { cursor: auto; }
+.cursor-default { cursor: default; }
+.cursor-pointer { cursor: pointer; }
+.cursor-wait { cursor: wait; }
+.cursor-text { cursor: text; }
+.cursor-move { cursor: move; }
+.cursor-help { cursor: help; }
+.cursor-not-allowed { cursor: not-allowed; }
+.cursor-none { cursor: none; }
+.cursor-context-menu { cursor: context-menu; }
+.cursor-progress { cursor: progress; }
+.cursor-cell { cursor: cell; }
+.cursor-crosshair { cursor: crosshair; }
+.cursor-vertical-text { cursor: vertical-text; }
+.cursor-alias { cursor: alias; }
+.cursor-copy { cursor: copy; }
+.cursor-no-drop { cursor: no-drop; }
+.cursor-grab { cursor: grab; }
+.cursor-grabbing { cursor: grabbing; }
+.cursor-all-scroll { cursor: all-scroll; }
+.cursor-col-resize { cursor: col-resize; }
+.cursor-row-resize { cursor: row-resize; }
+.cursor-n-resize { cursor: n-resize; }
+.cursor-e-resize { cursor: e-resize; }
+.cursor-s-resize { cursor: s-resize; }
+.cursor-w-resize { cursor: w-resize; }
+.cursor-ne-resize { cursor: ne-resize; }
+.cursor-nw-resize { cursor: nw-resize; }
+.cursor-se-resize { cursor: se-resize; }
+.cursor-sw-resize { cursor: sw-resize; }
+.cursor-ew-resize { cursor: ew-resize; }
+.cursor-ns-resize { cursor: ns-resize; }
+.cursor-nesw-resize { cursor: nesw-resize; }
+.cursor-nwse-resize { cursor: nwse-resize; }
+.cursor-zoom-in { cursor: zoom-in; }
+.cursor-zoom-out { cursor: zoom-out; }
+.pointer-events-auto { pointer-events: auto; }
+.pointer-events-none { pointer-events: none; }
+.select-none { user-select: none; }
+.select-text { user-select: text; }
+.select-all { user-select: all; }
+.select-auto { user-select: auto; }
+.resize-none { resize: none; }
+.resize { resize: both; }
+.resize-x { resize: horizontal; }
+.resize-y { resize: vertical; }
+.touch-auto { touch-action: auto; }
+.touch-none { touch-action: none; }
+.touch-pan-x { touch-action: pan-x; }
+.touch-pan-left { touch-action: pan-left; }
+.touch-pan-right { touch-action: pan-right; }
+.touch-pan-y { touch-action: pan-y; }
+.touch-pan-up { touch-action: pan-up; }
+.touch-pan-down { touch-action: pan-down; }
+.touch-pinch-zoom { touch-action: pinch-zoom; }
+.touch-manipulation { touch-action: manipulation; }
+.isolate { isolation: isolate; }
+.isolation-auto { isolation: auto; }
+.will-change-auto { will-change: auto; }
+.will-change-scroll { will-change: scroll-position; }
+.will-change-contents { will-change: contents; }
+.will-change-transform { will-change: transform; }
+
+`;
+}
+
+function filterUtilities() {
+  return `/* Filters */
+.filter-none { filter: none; }
+.blur-none { filter: blur(0); }
+.blur-sm { filter: blur(4px); }
+.blur { filter: blur(8px); }
+.blur-md { filter: blur(12px); }
+.blur-lg { filter: blur(16px); }
+.blur-xl { filter: blur(24px); }
+.brightness-0 { filter: brightness(0); }
+.brightness-50 { filter: brightness(.5); }
+.brightness-75 { filter: brightness(.75); }
+.brightness-90 { filter: brightness(.9); }
+.brightness-100 { filter: brightness(1); }
+.brightness-110 { filter: brightness(1.1); }
+.brightness-125 { filter: brightness(1.25); }
+.brightness-150 { filter: brightness(1.5); }
+.brightness-200 { filter: brightness(2); }
+.contrast-0 { filter: contrast(0); }
+.contrast-50 { filter: contrast(.5); }
+.contrast-75 { filter: contrast(.75); }
+.contrast-100 { filter: contrast(1); }
+.contrast-125 { filter: contrast(1.25); }
+.contrast-150 { filter: contrast(1.5); }
+.contrast-200 { filter: contrast(2); }
+.grayscale-0 { filter: grayscale(0); }
+.grayscale { filter: grayscale(100%); }
+.invert-0 { filter: invert(0); }
+.invert { filter: invert(100%); }
+.sepia-0 { filter: sepia(0); }
+.sepia { filter: sepia(100%); }
+.saturate-0 { filter: saturate(0); }
+.saturate-50 { filter: saturate(.5); }
+.saturate-100 { filter: saturate(1); }
+.saturate-150 { filter: saturate(1.5); }
+.saturate-200 { filter: saturate(2); }
+.hue-rotate-0 { filter: hue-rotate(0deg); }
+.hue-rotate-15 { filter: hue-rotate(15deg); }
+.hue-rotate-30 { filter: hue-rotate(30deg); }
+.hue-rotate-60 { filter: hue-rotate(60deg); }
+.hue-rotate-90 { filter: hue-rotate(90deg); }
+.hue-rotate-180 { filter: hue-rotate(180deg); }
+.-hue-rotate-30 { filter: hue-rotate(-30deg); }
+.-hue-rotate-60 { filter: hue-rotate(-60deg); }
+.-hue-rotate-90 { filter: hue-rotate(-90deg); }
+
+`;
+}
+
+function backdropUtilities() {
+  return `/* Backdrop Filters */
+.backdrop-blur-none { backdrop-filter: blur(0); }
+.backdrop-blur-sm { backdrop-filter: blur(4px); }
+.backdrop-blur { backdrop-filter: blur(8px); }
+.backdrop-blur-md { backdrop-filter: blur(12px); }
+.backdrop-blur-lg { backdrop-filter: blur(16px); }
+.backdrop-blur-xl { backdrop-filter: blur(24px); }
+.backdrop-blur-2xl { backdrop-filter: blur(40px); }
+
+`;
+}
+
+module.exports = {
+  opacityUtilities,
+  transitionUtilities,
+  shadowUtilities,
+  blendUtilities,
+  cursorUtilities,
+  filterUtilities,
+  backdropUtilities,
+};

package/src/generators/forms.js

@@ -0,0 +1,25 @@
+'use strict'
+
+function formUtilities() {
+  return `/* Forms */
+.appearance-none { appearance: none; }
+.caret-transparent { caret-color: transparent; }
+.caret-current { caret-color: currentColor; }
+.placeholder-transparent::placeholder { color: transparent; }
+.placeholder-current::placeholder { color: currentColor; }
+.autofill\\:bg-transparent:autofill { background-color: transparent !important; }
+.autofill\\:text-current:autofill { color: currentColor !important; }
+.accent-current { accent-color: currentColor; }
+.checked\\:bg-current:checked { background-color: currentColor; }
+.indeterminate\\:bg-current:indeterminate { background-color: currentColor; }
+.default\\:ring-0:default { box-shadow: 0 0 0 0px transparent; }
+.disabled\\:opacity-50:disabled { opacity: 0.5; }
+.enabled\\:opacity-100:enabled { opacity: 1; }
+.read-only\\:bg-gray-100:read-only { background-color: rgb(243, 244, 246); }
+
+`;
+}
+
+module.exports = {
+  formUtilities,
+};

package/src/generators/index.js

@@ -0,0 +1,45 @@
+'use strict'
+
+const { displayUtilities } = require('./display');
+const { sizingUtilities } = require('./sizing');
+const { positioningUtilities } = require('./positioning');
+const { overflowUtilities } = require('./overflow');
+const { opacityUtilities, transitionUtilities, shadowUtilities, blendUtilities, cursorUtilities, filterUtilities, backdropUtilities } = require('./effects');
+const { transformUtilities } = require('./transforms');
+const { ringUtilities } = require('./rings');
+const { objectUtilities, tableListUtilities, verticalAlignUtilities, contentScrollUtilities, containerUtilities, spaceUtilities, divideUtilities } = require('./layout');
+const { svgUtilities } = require('./svg');
+const { formUtilities } = require('./forms');
+const { accessibilityUtilities } = require('./accessibility');
+const { codeUtilities } = require('./code');
+const { animationUtilities } = require('./animation');
+const { backgroundUtilities } = require('./background');
+
+module.exports = {
+  displayUtilities,
+  sizingUtilities,
+  positioningUtilities,
+  overflowUtilities,
+  opacityUtilities,
+  transitionUtilities,
+  transformUtilities,
+  shadowUtilities,
+  ringUtilities,
+  objectUtilities,
+  tableListUtilities,
+  svgUtilities,
+  formUtilities,
+  verticalAlignUtilities,
+  contentScrollUtilities,
+  blendUtilities,
+  cursorUtilities,
+  accessibilityUtilities,
+  containerUtilities,
+  codeUtilities,
+  animationUtilities,
+  backdropUtilities,
+  spaceUtilities,
+  divideUtilities,
+  backgroundUtilities,
+  filterUtilities,
+};

package/src/generators/layout.js

@@ -0,0 +1,138 @@
+'use strict'
+
+function objectUtilities() {
+  return `/* Object Fit & Position */
+.object-contain { object-fit: contain; }
+.object-cover { object-fit: cover; }
+.object-fill { object-fit: fill; }
+.object-none { object-fit: none; }
+.object-scale-down { object-fit: scale-down; }
+.object-center { object-position: center; }
+.object-top { object-position: top; }
+.object-bottom { object-position: bottom; }
+.object-left { object-position: left; }
+.object-right { object-position: right; }
+.object-top-left { object-position: top left; }
+.object-top-right { object-position: top right; }
+.object-bottom-left { object-position: bottom left; }
+.object-bottom-right { object-position: bottom right; }
+
+`;
+}
+
+function tableListUtilities() {
+  return `/* Tables & Lists */
+.border-collapse { border-collapse: collapse; }
+.border-separate { border-collapse: separate; }
+.table-auto { table-layout: auto; }
+.table-fixed { table-layout: fixed; }
+.caption-top { caption-side: top; }
+.caption-bottom { caption-side: bottom; }
+.list-none { list-style-type: none; }
+.list-disc { list-style-type: disc; }
+.list-decimal { list-style-type: decimal; }
+.list-inside { list-style-position: inside; }
+.list-outside { list-style-position: outside; }
+
+`;
+}
+
+function verticalAlignUtilities() {
+  return `/* Vertical Align */
+.align-baseline { vertical-align: baseline; }
+.align-top { vertical-align: top; }
+.align-middle { vertical-align: middle; }
+.align-bottom { vertical-align: bottom; }
+.align-text-top { vertical-align: text-top; }
+.align-text-bottom { vertical-align: text-bottom; }
+.align-sub { vertical-align: sub; }
+.align-super { vertical-align: super; }
+
+`;
+}
+
+function contentScrollUtilities() {
+  return `/* Content Visibility & Scroll */
+.content-normal { content-visibility: normal; }
+.content-hidden { content-visibility: hidden; }
+.content-auto { content-visibility: auto; }
+.scroll-auto { scroll-behavior: auto; }
+.scroll-smooth { scroll-behavior: smooth; }
+.scroll-m-0 { scroll-margin: 0; }
+.snap-none { scroll-snap-type: none; }
+.snap-x { scroll-snap-type: x var(--emily-scroll-snap-strictness); }
+.snap-y { scroll-snap-type: y var(--emily-scroll-snap-strictness); }
+.snap-both { scroll-snap-type: both var(--emily-scroll-snap-strictness); }
+.snap-mandatory { --emily-scroll-snap-strictness: mandatory; }
+.snap-proximity { --emily-scroll-snap-strictness: proximity; }
+.snap-start { scroll-snap-align: start; }
+.snap-center { scroll-snap-align: center; }
+.snap-end { scroll-snap-align: end; }
+.snap-align-none { scroll-snap-align: none; }
+
+`;
+}
+
+function containerUtilities() {
+  return `/* Container Queries */
+.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; }
+
+`;
+}
+
+function spaceUtilities(spacing) {
+  let css = `/* Space Between */\n`;
+  Object.entries(spacing).forEach(([key, value]) => {
+    const escaped = key.replace(/\./g, '\\.');
+    css += `.space-x-${escaped} > * + * { margin-left: ${value}; }\n`;
+    css += `.space-y-${escaped} > * + * { margin-top: ${value}; }\n`;
+    css += `.-space-x-${escaped} > * + * { margin-left: -${value}; }\n`;
+    css += `.-space-y-${escaped} > * + * { margin-top: -${value}; }\n`;
+  });
+  css += `.space-x-auto > * + * { margin-left: auto; }\n`;
+  css += `.space-y-auto > * + * { margin-top: auto; }\n`;
+  css += `\n`;
+  return css;
+}
+
+function divideUtilities(spacing, colours) {
+  let css = `/* Divide */\n`;
+  // Widths
+  css += `.divide-x > * + * { border-left-width: 1px; border-left-style: solid; }\n`;
+  css += `.divide-y > * + * { border-top-width: 1px; border-top-style: solid; }\n`;
+  css += `.divide-x-0 > * + * { border-left-width: 0px; }\n`;
+  css += `.divide-y-0 > * + * { border-top-width: 0px; }\n`;
+  css += `.divide-x-2 > * + * { border-left-width: 2px; border-left-style: solid; }\n`;
+  css += `.divide-y-2 > * + * { border-top-width: 2px; border-top-style: solid; }\n`;
+  css += `.divide-x-4 > * + * { border-left-width: 4px; border-left-style: solid; }\n`;
+  css += `.divide-y-4 > * + * { border-top-width: 4px; border-top-style: solid; }\n`;
+  // Styles
+  css += `.divide-solid > * + * { border-style: solid; }\n`;
+  css += `.divide-dashed > * + * { border-style: dashed; }\n`;
+  css += `.divide-dotted > * + * { border-style: dotted; }\n`;
+  css += `.divide-none > * + * { border-style: none; }\n`;
+  // Colours
+  Object.entries(colours).forEach(([colourName, shades]) => {
+    Object.entries(shades).forEach(([shade]) => {
+      css += `.divide-${colourName}-${shade} > * + * { border-color: var(--color-${colourName}-${shade}); }\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;
+}
+
+module.exports = {
+  objectUtilities,
+  tableListUtilities,
+  verticalAlignUtilities,
+  contentScrollUtilities,
+  containerUtilities,
+  spaceUtilities,
+  divideUtilities,
+};

package/src/generators/overflow.js

@@ -0,0 +1,36 @@
+'use strict'
+
+function overflowUtilities() {
+  return `/* Overflow & Clipping */
+.overflow-auto { overflow: auto; }
+.overflow-hidden { overflow: hidden; }
+.overflow-clip { overflow: clip; }
+.overflow-visible { overflow: visible; }
+.overflow-scroll { overflow: scroll; }
+.overflow-x-auto { overflow-x: auto; }
+.overflow-x-hidden { overflow-x: hidden; }
+.overflow-x-clip { overflow-x: clip; }
+.overflow-x-visible { overflow-x: visible; }
+.overflow-x-scroll { overflow-x: scroll; }
+.overflow-y-auto { overflow-y: auto; }
+.overflow-y-hidden { overflow-y: hidden; }
+.overflow-y-clip { overflow-y: clip; }
+.overflow-y-visible { overflow-y: visible; }
+.overflow-y-scroll { overflow-y: scroll; }
+.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.text-ellipsis { text-overflow: ellipsis; }
+.text-clip { text-overflow: clip; }
+.line-clamp-none { overflow: visible; display: block; -webkit-box-orient: horizontal; -webkit-line-clamp: unset; }
+.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
+.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+.line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
+.line-clamp-5 { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
+.line-clamp-6 { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
+
+`;
+}
+
+module.exports = {
+  overflowUtilities,
+};