emily-css 1.2.0 → 1.2.1

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