emily-css 1.2.0-alpha.0 → 1.2.1

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,
+};

package/src/generators/positioning.js

@@ -0,0 +1,58 @@
+'use strict'
+
+function escapeClassName(key) {
+  return key.replace(/\./g, '\\.');
+}
+
+function positioningUtilities(spacing) {
+  let css = `/* Positioning */\n`;
+
+  css += `.static { position: static; }\n`;
+  css += `.relative { position: relative; }\n`;
+  css += `.absolute { position: absolute; }\n`;
+  css += `.fixed { position: fixed; }\n`;
+  css += `.sticky { position: sticky; }\n`;
+
+  Object.entries(spacing).forEach(([key, value]) => {
+    const escaped = escapeClassName(key);
+    css += `.top-${escaped} { top: ${value}; }\n`;
+    css += `.right-${escaped} { right: ${value}; }\n`;
+    css += `.bottom-${escaped} { bottom: ${value}; }\n`;
+    css += `.left-${escaped} { left: ${value}; }\n`;
+    css += `.inset-${escaped} { inset: ${value}; }\n`;
+    css += `.inset-x-${escaped} { left: ${value}; right: ${value}; }\n`;
+    css += `.inset-y-${escaped} { top: ${value}; bottom: ${value}; }\n`;
+    if (value !== '0' && value !== '0px') {
+      css += `.-top-${escaped} { top: -${value}; }\n`;
+      css += `.-right-${escaped} { right: -${value}; }\n`;
+      css += `.-bottom-${escaped} { bottom: -${value}; }\n`;
+      css += `.-left-${escaped} { left: -${value}; }\n`;
+      css += `.-inset-${escaped} { inset: -${value}; }\n`;
+      css += `.-inset-x-${escaped} { left: -${value}; right: -${value}; }\n`;
+      css += `.-inset-y-${escaped} { top: -${value}; bottom: -${value}; }\n`;
+    }
+  });
+
+  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 += `.top-auto { top: auto; }\n`;
+  css += `.right-auto { right: auto; }\n`;
+  css += `.bottom-auto { bottom: auto; }\n`;
+  css += `.left-auto { left: auto; }\n`;
+
+  const zIndices = {
+    'auto': 'auto', '0': '0', '10': '10', '20': '20', '30': '30', '40': '40', '50': '50',
+    'dropdown': '1000', 'sticky': '1020', 'fixed': '1030', 'modal': '1040', 'popover': '1060', 'tooltip': '1070'
+  };
+  Object.entries(zIndices).forEach(([name, value]) => {
+    css += `.z-${name} { z-index: ${value}; }\n`;
+  });
+
+  css += `\n`;
+  return css;
+}
+
+module.exports = {
+  positioningUtilities,
+};

package/src/generators/rings.js

@@ -0,0 +1,41 @@
+'use strict'
+
+function ringUtilities(colours) {
+  let css = `/* Rings & Outlines */\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`;
+    });
+  });
+
+  css += `.outline-none { outline: 2px solid transparent; outline-offset: 2px; }\n`;
+  css += `.outline { outline: 1px solid currentColor; }\n`;
+  css += `.outline-0 { outline-width: 0; }\n`;
+  css += `.outline-1 { outline-width: 1px; }\n`;
+  css += `.outline-2 { outline-width: 2px; }\n`;
+  css += `.outline-offset-0 { outline-offset: 0px; }\n`;
+  css += `.outline-offset-1 { outline-offset: 1px; }\n`;
+  css += `.outline-offset-2 { outline-offset: 2px; }\n`;
+  css += `.outline-offset-4 { outline-offset: 4px; }\n`;
+  css += `.outline-offset-8 { outline-offset: 8px; }\n`;
+
+  css += `\n`;
+  return css;
+}
+
+module.exports = {
+  ringUtilities,
+};

package/src/generators/sizing.js

@@ -0,0 +1,111 @@
+'use strict'
+
+function escapeClassName(key) {
+  return key.replace(/\./g, '\\.');
+}
+
+function sizingUtilities(spacing) {
+  let css = `/* Sizing */\n`;
+
+  Object.entries(spacing).forEach(([key, value]) => {
+    const escaped = escapeClassName(key);
+    css += `.w-${escaped} { width: ${value}; }\n`;
+    css += `.h-${escaped} { height: ${value}; }\n`;
+    css += `.size-${escaped} { width: ${value}; height: ${value}; }\n`;
+    css += `.min-w-${escaped} { min-width: ${value}; }\n`;
+    css += `.min-h-${escaped} { min-height: ${value}; }\n`;
+    css += `.max-w-${escaped} { max-width: ${value}; }\n`;
+    css += `.max-h-${escaped} { max-height: ${value}; }\n`;
+  });
+
+  const fractions = {
+    '1\\/2': '50%', '1\\/3': '33.333333%', '2\\/3': '66.666667%',
+    '1\\/4': '25%', '2\\/4': '50%', '3\\/4': '75%',
+    '1\\/5': '20%', '2\\/5': '40%', '3\\/5': '60%', '4\\/5': '80%',
+    '1\\/6': '16.666667%', '2\\/6': '33.333333%', '3\\/6': '50%', '4\\/6': '66.666667%', '5\\/6': '83.333333%',
+    '1\\/12': '8.333333%', '2\\/12': '16.666667%', '3\\/12': '25%', '4\\/12': '33.333333%', '5\\/12': '41.666667%', '6\\/12': '50%', '7\\/12': '58.333333%', '8\\/12': '66.666667%', '9\\/12': '75%', '10\\/12': '83.333333%', '11\\/12': '91.666667%'
+  };
+
+  Object.entries(fractions).forEach(([name, value]) => {
+    css += `.w-${name} { width: ${value}; }\n`;
+    css += `.h-${name} { height: ${value}; }\n`;
+    css += `.size-${name} { width: ${value}; height: ${value}; }\n`;
+  });
+
+  css += `.w-auto { width: auto; }\n`;
+  css += `.h-auto { height: auto; }\n`;
+  css += `.size-auto { width: auto; height: auto; }\n`;
+  css += `.w-full { width: 100%; }\n`;
+  css += `.h-full { height: 100%; }\n`;
+  css += `.size-full { width: 100%; height: 100%; }\n`;
+  css += `.w-screen { width: 100vw; }\n`;
+  css += `.h-screen { height: 100vh; }\n`;
+  css += `.w-svw { width: 100svw; }\n`;
+  css += `.h-svh { height: 100svh; }\n`;
+  css += `.w-lvw { width: 100lvw; }\n`;
+  css += `.h-lvh { height: 100lvh; }\n`;
+  css += `.w-dvw { width: 100dvw; }\n`;
+  css += `.h-dvh { height: 100dvh; }\n`;
+  css += `.w-min { width: min-content; }\n`;
+  css += `.w-max { width: max-content; }\n`;
+  css += `.w-fit { width: fit-content; }\n`;
+  css += `.h-min { height: min-content; }\n`;
+  css += `.h-max { height: max-content; }\n`;
+  css += `.h-fit { height: fit-content; }\n`;
+
+  css += `.min-w-0 { min-width: 0; }\n`;
+  css += `.min-w-full { min-width: 100%; }\n`;
+  css += `.min-w-min { min-width: min-content; }\n`;
+  css += `.min-w-max { min-width: max-content; }\n`;
+  css += `.min-w-fit { min-width: fit-content; }\n`;
+  css += `.min-h-0 { min-height: 0; }\n`;
+  css += `.min-h-full { min-height: 100%; }\n`;
+  css += `.min-h-screen { min-height: 100vh; }\n`;
+  css += `.min-h-svh { min-height: 100svh; }\n`;
+  css += `.min-h-lvh { min-height: 100lvh; }\n`;
+  css += `.min-h-dvh { min-height: 100dvh; }\n`;
+  css += `.min-h-min { min-height: min-content; }\n`;
+  css += `.min-h-max { min-height: max-content; }\n`;
+  css += `.min-h-fit { min-height: fit-content; }\n`;
+
+  css += `.max-w-0 { max-width: 0; }\n`;
+  css += `.max-w-none { max-width: none; }\n`;
+  css += `.max-w-full { max-width: 100%; }\n`;
+  css += `.max-w-min { max-width: min-content; }\n`;
+  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-full { max-height: 100%; }\n`;
+  css += `.max-h-screen { max-height: 100vh; }\n`;
+  css += `.max-h-svh { max-height: 100svh; }\n`;
+  css += `.max-h-lvh { max-height: 100lvh; }\n`;
+  css += `.max-h-dvh { max-height: 100dvh; }\n`;
+  css += `.max-h-min { max-height: min-content; }\n`;
+  css += `.max-h-max { max-height: max-content; }\n`;
+  css += `.max-h-fit { max-height: fit-content; }\n`;
+
+  const maxWidths = {
+    xs: '20rem', sm: '24rem', md: '28rem', lg: '32rem', xl: '36rem',
+    '2xl': '42rem', '3xl': '48rem', '4xl': '56rem', '5xl': '64rem',
+    '6xl': '72rem', '7xl': '80rem', prose: '65ch', screen: '100vw',
+    'screen-sm': '640px', 'screen-md': '768px', 'screen-lg': '1024px',
+    'screen-xl': '1280px', 'screen-2xl': '1536px'
+  };
+  Object.entries(maxWidths).forEach(([name, value]) => {
+    css += `.max-w-${name} { max-width: ${value}; }\n`;
+  });
+
+  css += `.aspect-auto { aspect-ratio: auto; }\n`;
+  css += `.aspect-square { aspect-ratio: 1; }\n`;
+  css += `.aspect-video { aspect-ratio: 16 / 9; }\n`;
+  css += `.aspect-3\\/2 { aspect-ratio: 3 / 2; }\n`;
+  css += `.aspect-4\\/3 { aspect-ratio: 4 / 3; }\n`;
+  css += `.aspect-16\\/9 { aspect-ratio: 16 / 9; }\n`;
+
+  css += `\n`;
+  return css;
+}
+
+module.exports = {
+  sizingUtilities,
+};

package/src/generators/svg.js

@@ -0,0 +1,38 @@
+'use strict'
+
+function svgUtilities(colours) {
+  let css = `/* SVG */\n`;
+
+  css += `.fill-current { fill: currentColor; }\n`;
+  css += `.stroke-current { stroke: currentColor; }\n`;
+  css += `.fill-white { fill: #FAFAFA; }\n`;
+  css += `.fill-black { fill: #111110; }\n`;
+  css += `.fill-transparent { fill: transparent; }\n`;
+  css += `.stroke-white { stroke: #FAFAFA; }\n`;
+  css += `.stroke-black { stroke: #111110; }\n`;
+  css += `.stroke-transparent { stroke: transparent; }\n`;
+  css += `.stroke-0 { stroke-width: 0; }\n`;
+  css += `.stroke-1 { stroke-width: 1; }\n`;
+  css += `.stroke-2 { stroke-width: 2; }\n`;
+
+  // Fill colours
+  Object.entries(colours).forEach(([colourName, shades]) => {
+    Object.entries(shades).forEach(([shade]) => {
+      css += `.fill-${colourName}-${shade} { fill: var(--color-${colourName}-${shade}); }\n`;
+    });
+  });
+
+  // Stroke colours
+  Object.entries(colours).forEach(([colourName, shades]) => {
+    Object.entries(shades).forEach(([shade]) => {
+      css += `.stroke-${colourName}-${shade} { stroke: var(--color-${colourName}-${shade}); }\n`;
+    });
+  });
+
+  css += `\n`;
+  return css;
+}
+
+module.exports = {
+  svgUtilities,
+};

package/src/generators/transforms.js

@@ -0,0 +1,61 @@
+'use strict'
+
+function escapeClassName(key) {
+  return key.replace(/\./g, '\\.');
+}
+
+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`;
+  css += `.transform-none { transform: none; }\n`;
+
+  // Translate
+  Object.entries(spacing).forEach(([key, value]) => {
+    const escaped = escapeClassName(key);
+    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} { --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} { --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} { --skew-x: ${sk}deg; transform: ${composedTransform}; }\n`;
+    css += `.skew-y-${sk} { --skew-y: ${sk}deg; transform: ${composedTransform}; }\n`;
+  });
+
+  // Transform origin
+  css += `.origin-center { transform-origin: center; }\n`;
+  css += `.origin-top { transform-origin: top; }\n`;
+  css += `.origin-top-right { transform-origin: top right; }\n`;
+  css += `.origin-right { transform-origin: right; }\n`;
+  css += `.origin-bottom-right { transform-origin: bottom right; }\n`;
+  css += `.origin-bottom { transform-origin: bottom; }\n`;
+  css += `.origin-bottom-left { transform-origin: bottom left; }\n`;
+  css += `.origin-left { transform-origin: left; }\n`;
+  css += `.origin-top-left { transform-origin: top left; }\n`;
+
+  css += `\n`;
+  return css;
+}
+
+module.exports = {
+  transformUtilities,
+};