jasmincss 1.0.0

package/src/core/utilities/scroll.js

@@ -0,0 +1,205 @@
+// Scroll utilities for JasminCSS
+
+export function generateScrollUtilities(config) {
+  const classes = [];
+
+  // Spacing scale for scroll padding/margin
+  const spacing = {
+    '0': '0px',
+    'px': '1px',
+    '0.5': '0.125rem',
+    '1': '0.25rem',
+    '1.5': '0.375rem',
+    '2': '0.5rem',
+    '2.5': '0.625rem',
+    '3': '0.75rem',
+    '3.5': '0.875rem',
+    '4': '1rem',
+    '5': '1.25rem',
+    '6': '1.5rem',
+    '7': '1.75rem',
+    '8': '2rem',
+    '9': '2.25rem',
+    '10': '2.5rem',
+    '11': '2.75rem',
+    '12': '3rem',
+    '14': '3.5rem',
+    '16': '4rem',
+    '20': '5rem',
+    '24': '6rem',
+    '28': '7rem',
+    '32': '8rem',
+    '36': '9rem',
+    '40': '10rem',
+    '44': '11rem',
+    '48': '12rem',
+    '52': '13rem',
+    '56': '14rem',
+    '60': '15rem',
+    '64': '16rem',
+    '72': '18rem',
+    '80': '20rem',
+    '96': '24rem'
+  };
+
+  // Scroll Padding
+  Object.entries(spacing).forEach(([name, value]) => {
+    const className = name.includes('.') ? name.replace('.', '\\.') : name;
+
+    // All sides
+    classes.push({
+      name: `scroll-p-${name}`,
+      css: `.scroll-p-${className} { scroll-padding: ${value}; }`
+    });
+
+    // X axis
+    classes.push({
+      name: `scroll-px-${name}`,
+      css: `.scroll-px-${className} { scroll-padding-left: ${value}; scroll-padding-right: ${value}; }`
+    });
+
+    // Y axis
+    classes.push({
+      name: `scroll-py-${name}`,
+      css: `.scroll-py-${className} { scroll-padding-top: ${value}; scroll-padding-bottom: ${value}; }`
+    });
+
+    // Individual sides
+    classes.push({
+      name: `scroll-pt-${name}`,
+      css: `.scroll-pt-${className} { scroll-padding-top: ${value}; }`
+    });
+    classes.push({
+      name: `scroll-pr-${name}`,
+      css: `.scroll-pr-${className} { scroll-padding-right: ${value}; }`
+    });
+    classes.push({
+      name: `scroll-pb-${name}`,
+      css: `.scroll-pb-${className} { scroll-padding-bottom: ${value}; }`
+    });
+    classes.push({
+      name: `scroll-pl-${name}`,
+      css: `.scroll-pl-${className} { scroll-padding-left: ${value}; }`
+    });
+
+    // Logical properties
+    classes.push({
+      name: `scroll-ps-${name}`,
+      css: `.scroll-ps-${className} { scroll-padding-inline-start: ${value}; }`
+    });
+    classes.push({
+      name: `scroll-pe-${name}`,
+      css: `.scroll-pe-${className} { scroll-padding-inline-end: ${value}; }`
+    });
+  });
+
+  // Scroll Margin
+  Object.entries(spacing).forEach(([name, value]) => {
+    const className = name.includes('.') ? name.replace('.', '\\.') : name;
+
+    // All sides
+    classes.push({
+      name: `scroll-m-${name}`,
+      css: `.scroll-m-${className} { scroll-margin: ${value}; }`
+    });
+
+    // X axis
+    classes.push({
+      name: `scroll-mx-${name}`,
+      css: `.scroll-mx-${className} { scroll-margin-left: ${value}; scroll-margin-right: ${value}; }`
+    });
+
+    // Y axis
+    classes.push({
+      name: `scroll-my-${name}`,
+      css: `.scroll-my-${className} { scroll-margin-top: ${value}; scroll-margin-bottom: ${value}; }`
+    });
+
+    // Individual sides
+    classes.push({
+      name: `scroll-mt-${name}`,
+      css: `.scroll-mt-${className} { scroll-margin-top: ${value}; }`
+    });
+    classes.push({
+      name: `scroll-mr-${name}`,
+      css: `.scroll-mr-${className} { scroll-margin-right: ${value}; }`
+    });
+    classes.push({
+      name: `scroll-mb-${name}`,
+      css: `.scroll-mb-${className} { scroll-margin-bottom: ${value}; }`
+    });
+    classes.push({
+      name: `scroll-ml-${name}`,
+      css: `.scroll-ml-${className} { scroll-margin-left: ${value}; }`
+    });
+
+    // Logical properties
+    classes.push({
+      name: `scroll-ms-${name}`,
+      css: `.scroll-ms-${className} { scroll-margin-inline-start: ${value}; }`
+    });
+    classes.push({
+      name: `scroll-me-${name}`,
+      css: `.scroll-me-${className} { scroll-margin-inline-end: ${value}; }`
+    });
+  });
+
+  // Overscroll Behavior
+  const overscroll = ['auto', 'contain', 'none'];
+  overscroll.forEach(value => {
+    classes.push({
+      name: `overscroll-${value}`,
+      css: `.overscroll-${value} { overscroll-behavior: ${value}; }`
+    });
+    classes.push({
+      name: `overscroll-x-${value}`,
+      css: `.overscroll-x-${value} { overscroll-behavior-x: ${value}; }`
+    });
+    classes.push({
+      name: `overscroll-y-${value}`,
+      css: `.overscroll-y-${value} { overscroll-behavior-y: ${value}; }`
+    });
+  });
+
+  // Scrollbar Width
+  classes.push({
+    name: 'scrollbar-auto',
+    css: '.scrollbar-auto { scrollbar-width: auto; }'
+  });
+  classes.push({
+    name: 'scrollbar-thin',
+    css: '.scrollbar-thin { scrollbar-width: thin; }'
+  });
+  classes.push({
+    name: 'scrollbar-none',
+    css: '.scrollbar-none { scrollbar-width: none; -ms-overflow-style: none; }'
+  });
+  classes.push({
+    name: 'scrollbar-none',
+    css: '.scrollbar-none::-webkit-scrollbar { display: none; }'
+  });
+
+  // Scrollbar Color
+  const colors = ['primary', 'secondary', 'accent', 'neutral'];
+  colors.forEach(color => {
+    classes.push({
+      name: `scrollbar-${color}`,
+      css: `.scrollbar-${color} { scrollbar-color: var(--j-${color}) transparent; }`
+    });
+  });
+
+  // Scroll Snap Stop
+  classes.push({
+    name: 'snap-normal',
+    css: '.snap-normal { scroll-snap-stop: normal; }'
+  });
+  classes.push({
+    name: 'snap-always',
+    css: '.snap-always { scroll-snap-stop: always; }'
+  });
+
+  return {
+    css: classes.map(c => c.css).join('\n'),
+    classes
+  };
+}

package/src/core/utilities/spacing.js

@@ -0,0 +1,120 @@
+export function generateSpacingUtilities(config) {
+  const classes = [];
+  const spacing = config.spacing || {};
+
+  // Padding
+  Object.entries(spacing).forEach(([key, value]) => {
+    const safeName = key.replace('.', '\\.');
+
+    // All sides
+    classes.push({ name: `p-${safeName}`, css: `.p-${safeName} { padding: ${value}; }` });
+
+    // Individual sides
+    classes.push({ name: `pt-${safeName}`, css: `.pt-${safeName} { padding-top: ${value}; }` });
+    classes.push({ name: `pr-${safeName}`, css: `.pr-${safeName} { padding-right: ${value}; }` });
+    classes.push({ name: `pb-${safeName}`, css: `.pb-${safeName} { padding-bottom: ${value}; }` });
+    classes.push({ name: `pl-${safeName}`, css: `.pl-${safeName} { padding-left: ${value}; }` });
+
+    // Horizontal and vertical
+    classes.push({ name: `px-${safeName}`, css: `.px-${safeName} { padding-left: ${value}; padding-right: ${value}; }` });
+    classes.push({ name: `py-${safeName}`, css: `.py-${safeName} { padding-top: ${value}; padding-bottom: ${value}; }` });
+
+    // Logical properties
+    classes.push({ name: `ps-${safeName}`, css: `.ps-${safeName} { padding-inline-start: ${value}; }` });
+    classes.push({ name: `pe-${safeName}`, css: `.pe-${safeName} { padding-inline-end: ${value}; }` });
+  });
+
+  // Margin (positive values)
+  Object.entries(spacing).forEach(([key, value]) => {
+    const safeName = key.replace('.', '\\.');
+
+    // All sides
+    classes.push({ name: `m-${safeName}`, css: `.m-${safeName} { margin: ${value}; }` });
+
+    // Individual sides
+    classes.push({ name: `mt-${safeName}`, css: `.mt-${safeName} { margin-top: ${value}; }` });
+    classes.push({ name: `mr-${safeName}`, css: `.mr-${safeName} { margin-right: ${value}; }` });
+    classes.push({ name: `mb-${safeName}`, css: `.mb-${safeName} { margin-bottom: ${value}; }` });
+    classes.push({ name: `ml-${safeName}`, css: `.ml-${safeName} { margin-left: ${value}; }` });
+
+    // Horizontal and vertical
+    classes.push({ name: `mx-${safeName}`, css: `.mx-${safeName} { margin-left: ${value}; margin-right: ${value}; }` });
+    classes.push({ name: `my-${safeName}`, css: `.my-${safeName} { margin-top: ${value}; margin-bottom: ${value}; }` });
+
+    // Logical properties
+    classes.push({ name: `ms-${safeName}`, css: `.ms-${safeName} { margin-inline-start: ${value}; }` });
+    classes.push({ name: `me-${safeName}`, css: `.me-${safeName} { margin-inline-end: ${value}; }` });
+  });
+
+  // Margin auto
+  classes.push({ name: 'm-auto', css: '.m-auto { margin: auto; }' });
+  classes.push({ name: 'mx-auto', css: '.mx-auto { margin-left: auto; margin-right: auto; }' });
+  classes.push({ name: 'my-auto', css: '.my-auto { margin-top: auto; margin-bottom: auto; }' });
+  classes.push({ name: 'mt-auto', css: '.mt-auto { margin-top: auto; }' });
+  classes.push({ name: 'mr-auto', css: '.mr-auto { margin-right: auto; }' });
+  classes.push({ name: 'mb-auto', css: '.mb-auto { margin-bottom: auto; }' });
+  classes.push({ name: 'ml-auto', css: '.ml-auto { margin-left: auto; }' });
+  classes.push({ name: 'ms-auto', css: '.ms-auto { margin-inline-start: auto; }' });
+  classes.push({ name: 'me-auto', css: '.me-auto { margin-inline-end: auto; }' });
+
+  // Negative margins
+  Object.entries(spacing).forEach(([key, value]) => {
+    if (key === '0' || key === 'px') return; // Skip 0 and px for negative
+
+    const safeName = key.replace('.', '\\.');
+
+    // All sides
+    classes.push({ name: `-m-${safeName}`, css: `.-m-${safeName} { margin: -${value}; }` });
+
+    // Individual sides
+    classes.push({ name: `-mt-${safeName}`, css: `.-mt-${safeName} { margin-top: -${value}; }` });
+    classes.push({ name: `-mr-${safeName}`, css: `.-mr-${safeName} { margin-right: -${value}; }` });
+    classes.push({ name: `-mb-${safeName}`, css: `.-mb-${safeName} { margin-bottom: -${value}; }` });
+    classes.push({ name: `-ml-${safeName}`, css: `.-ml-${safeName} { margin-left: -${value}; }` });
+
+    // Horizontal and vertical
+    classes.push({ name: `-mx-${safeName}`, css: `.-mx-${safeName} { margin-left: -${value}; margin-right: -${value}; }` });
+    classes.push({ name: `-my-${safeName}`, css: `.-my-${safeName} { margin-top: -${value}; margin-bottom: -${value}; }` });
+  });
+
+  // Space Between (for flex/grid children)
+  Object.entries(spacing).forEach(([key, value]) => {
+    const safeName = key.replace('.', '\\.');
+
+    classes.push({
+      name: `space-x-${safeName}`,
+      css: `.space-x-${safeName} > :not([hidden]) ~ :not([hidden]) { margin-left: ${value}; }`
+    });
+    classes.push({
+      name: `space-y-${safeName}`,
+      css: `.space-y-${safeName} > :not([hidden]) ~ :not([hidden]) { margin-top: ${value}; }`
+    });
+
+    // Negative space
+    if (key !== '0' && key !== 'px') {
+      classes.push({
+        name: `-space-x-${safeName}`,
+        css: `.-space-x-${safeName} > :not([hidden]) ~ :not([hidden]) { margin-left: -${value}; }`
+      });
+      classes.push({
+        name: `-space-y-${safeName}`,
+        css: `.-space-y-${safeName} > :not([hidden]) ~ :not([hidden]) { margin-top: -${value}; }`
+      });
+    }
+  });
+
+  // Space reverse (for flex-row-reverse and flex-col-reverse)
+  classes.push({
+    name: 'space-x-reverse',
+    css: `.space-x-reverse > :not([hidden]) ~ :not([hidden]) { --j-space-x-reverse: 1; margin-right: calc(var(--j-space-x, 0) * var(--j-space-x-reverse)); margin-left: calc(var(--j-space-x, 0) * calc(1 - var(--j-space-x-reverse))); }`
+  });
+  classes.push({
+    name: 'space-y-reverse',
+    css: `.space-y-reverse > :not([hidden]) ~ :not([hidden]) { --j-space-y-reverse: 1; margin-bottom: calc(var(--j-space-y, 0) * var(--j-space-y-reverse)); margin-top: calc(var(--j-space-y, 0) * calc(1 - var(--j-space-y-reverse))); }`
+  });
+
+  return {
+    css: classes.map(c => c.css).join('\n'),
+    classes
+  };
+}

package/src/core/utilities/svg.js

@@ -0,0 +1,191 @@
+// SVG utilities for JasminCSS
+
+export function generateSvgUtilities(config) {
+  const classes = [];
+
+  // Fill utilities
+  classes.push({
+    name: 'fill-none',
+    css: '.fill-none { fill: none; }'
+  });
+  classes.push({
+    name: 'fill-inherit',
+    css: '.fill-inherit { fill: inherit; }'
+  });
+  classes.push({
+    name: 'fill-current',
+    css: '.fill-current { fill: currentColor; }'
+  });
+  classes.push({
+    name: 'fill-transparent',
+    css: '.fill-transparent { fill: transparent; }'
+  });
+  classes.push({
+    name: 'fill-black',
+    css: '.fill-black { fill: #000; }'
+  });
+  classes.push({
+    name: 'fill-white',
+    css: '.fill-white { fill: #fff; }'
+  });
+
+  // Fill semantic colors
+  const colors = ['primary', 'secondary', 'accent', 'success', 'warning', 'error', 'info', 'neutral'];
+  colors.forEach(color => {
+    classes.push({
+      name: `fill-${color}`,
+      css: `.fill-${color} { fill: var(--j-${color}); }`
+    });
+    // Color shades
+    [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].forEach(shade => {
+      classes.push({
+        name: `fill-${color}-${shade}`,
+        css: `.fill-${color}-${shade} { fill: var(--color-${color}-${shade}); }`
+      });
+    });
+  });
+
+  // Stroke utilities
+  classes.push({
+    name: 'stroke-none',
+    css: '.stroke-none { stroke: none; }'
+  });
+  classes.push({
+    name: 'stroke-inherit',
+    css: '.stroke-inherit { stroke: inherit; }'
+  });
+  classes.push({
+    name: 'stroke-current',
+    css: '.stroke-current { stroke: currentColor; }'
+  });
+  classes.push({
+    name: 'stroke-transparent',
+    css: '.stroke-transparent { stroke: transparent; }'
+  });
+  classes.push({
+    name: 'stroke-black',
+    css: '.stroke-black { stroke: #000; }'
+  });
+  classes.push({
+    name: 'stroke-white',
+    css: '.stroke-white { stroke: #fff; }'
+  });
+
+  // Stroke semantic colors
+  colors.forEach(color => {
+    classes.push({
+      name: `stroke-${color}`,
+      css: `.stroke-${color} { stroke: var(--j-${color}); }`
+    });
+    // Color shades
+    [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].forEach(shade => {
+      classes.push({
+        name: `stroke-${color}-${shade}`,
+        css: `.stroke-${color}-${shade} { stroke: var(--color-${color}-${shade}); }`
+      });
+    });
+  });
+
+  // Stroke Width
+  const strokeWidths = {
+    '0': '0',
+    '1': '1',
+    '2': '2'
+  };
+  Object.entries(strokeWidths).forEach(([name, value]) => {
+    classes.push({
+      name: `stroke-${name}`,
+      css: `.stroke-${name} { stroke-width: ${value}; }`
+    });
+  });
+
+  // Stroke Linecap
+  const linecaps = ['butt', 'round', 'square'];
+  linecaps.forEach(value => {
+    classes.push({
+      name: `stroke-cap-${value}`,
+      css: `.stroke-cap-${value} { stroke-linecap: ${value}; }`
+    });
+  });
+
+  // Stroke Linejoin
+  const linejoins = ['arcs', 'bevel', 'miter', 'miter-clip', 'round'];
+  linejoins.forEach(value => {
+    classes.push({
+      name: `stroke-join-${value}`,
+      css: `.stroke-join-${value} { stroke-linejoin: ${value}; }`
+    });
+  });
+
+  // Stroke Dasharray
+  classes.push({
+    name: 'stroke-dash-none',
+    css: '.stroke-dash-none { stroke-dasharray: none; }'
+  });
+  classes.push({
+    name: 'stroke-dash-1',
+    css: '.stroke-dash-1 { stroke-dasharray: 1; }'
+  });
+  classes.push({
+    name: 'stroke-dash-2',
+    css: '.stroke-dash-2 { stroke-dasharray: 2; }'
+  });
+  classes.push({
+    name: 'stroke-dash-4',
+    css: '.stroke-dash-4 { stroke-dasharray: 4; }'
+  });
+  classes.push({
+    name: 'stroke-dash-6',
+    css: '.stroke-dash-6 { stroke-dasharray: 6; }'
+  });
+
+  // Stroke Dashoffset
+  [0, 1, 2, 4, 8].forEach(value => {
+    classes.push({
+      name: `stroke-offset-${value}`,
+      css: `.stroke-offset-${value} { stroke-dashoffset: ${value}; }`
+    });
+  });
+
+  // Stroke Opacity
+  const opacities = [0, 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100];
+  opacities.forEach(value => {
+    classes.push({
+      name: `stroke-opacity-${value}`,
+      css: `.stroke-opacity-${value} { stroke-opacity: ${value / 100}; }`
+    });
+  });
+
+  // Fill Opacity
+  opacities.forEach(value => {
+    classes.push({
+      name: `fill-opacity-${value}`,
+      css: `.fill-opacity-${value} { fill-opacity: ${value / 100}; }`
+    });
+  });
+
+  // Fill Rule
+  classes.push({
+    name: 'fill-rule-nonzero',
+    css: '.fill-rule-nonzero { fill-rule: nonzero; }'
+  });
+  classes.push({
+    name: 'fill-rule-evenodd',
+    css: '.fill-rule-evenodd { fill-rule: evenodd; }'
+  });
+
+  // Clip Rule
+  classes.push({
+    name: 'clip-rule-nonzero',
+    css: '.clip-rule-nonzero { clip-rule: nonzero; }'
+  });
+  classes.push({
+    name: 'clip-rule-evenodd',
+    css: '.clip-rule-evenodd { clip-rule: evenodd; }'
+  });
+
+  return {
+    css: classes.map(c => c.css).join('\n'),
+    classes
+  };
+}

package/src/core/utilities/transforms.js

@@ -0,0 +1,116 @@
+export function generateTransformUtilities(config) {
+  const classes = [];
+
+  // Transform
+  classes.push({
+    name: 'transform',
+    css: `.transform { transform: translate(var(--j-translate-x, 0), var(--j-translate-y, 0)) rotate(var(--j-rotate, 0)) skewX(var(--j-skew-x, 0)) skewY(var(--j-skew-y, 0)) scaleX(var(--j-scale-x, 1)) scaleY(var(--j-scale-y, 1)); }`
+  });
+  classes.push({ name: 'transform-cpu', css: '.transform-cpu { transform: translate(var(--j-translate-x, 0), var(--j-translate-y, 0)) rotate(var(--j-rotate, 0)) skewX(var(--j-skew-x, 0)) skewY(var(--j-skew-y, 0)) scaleX(var(--j-scale-x, 1)) scaleY(var(--j-scale-y, 1)); }' });
+  classes.push({ name: 'transform-gpu', css: '.transform-gpu { transform: translate3d(var(--j-translate-x, 0), var(--j-translate-y, 0), 0) rotate(var(--j-rotate, 0)) skewX(var(--j-skew-x, 0)) skewY(var(--j-skew-y, 0)) scaleX(var(--j-scale-x, 1)) scaleY(var(--j-scale-y, 1)); }' });
+  classes.push({ name: 'transform-none', css: '.transform-none { transform: none; }' });
+
+  // Transform Origin
+  const origins = ['center', 'top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left', 'top-left'];
+  origins.forEach(o => {
+    classes.push({ name: `origin-${o}`, css: `.origin-${o} { transform-origin: ${o.replace('-', ' ')}; }` });
+  });
+
+  // Scale
+  const scales = [0, 50, 75, 90, 95, 100, 105, 110, 125, 150, 200];
+  scales.forEach(s => {
+    const value = s / 100;
+    classes.push({ name: `scale-${s}`, css: `.scale-${s} { --j-scale-x: ${value}; --j-scale-y: ${value}; transform: scale(${value}); }` });
+    classes.push({ name: `scale-x-${s}`, css: `.scale-x-${s} { --j-scale-x: ${value}; transform: scaleX(${value}); }` });
+    classes.push({ name: `scale-y-${s}`, css: `.scale-y-${s} { --j-scale-y: ${value}; transform: scaleY(${value}); }` });
+  });
+
+  // Rotate
+  const rotations = [0, 1, 2, 3, 6, 12, 45, 90, 180];
+  rotations.forEach(r => {
+    classes.push({ name: `rotate-${r}`, css: `.rotate-${r} { --j-rotate: ${r}deg; transform: rotate(${r}deg); }` });
+    classes.push({ name: `-rotate-${r}`, css: `.-rotate-${r} { --j-rotate: -${r}deg; transform: rotate(-${r}deg); }` });
+  });
+
+  // Translate
+  const spacing = config.spacing || {};
+  const translateValues = {
+    ...spacing,
+    '1/2': '50%',
+    '1/3': '33.333333%',
+    '2/3': '66.666667%',
+    '1/4': '25%',
+    '2/4': '50%',
+    '3/4': '75%',
+    'full': '100%'
+  };
+
+  Object.entries(translateValues).forEach(([key, value]) => {
+    const safeName = key.replace('/', '\\/').replace('.', '\\.');
+    classes.push({ name: `translate-x-${safeName}`, css: `.translate-x-${safeName} { --j-translate-x: ${value}; transform: translateX(${value}); }` });
+    classes.push({ name: `translate-y-${safeName}`, css: `.translate-y-${safeName} { --j-translate-y: ${value}; transform: translateY(${value}); }` });
+
+    // Negative values
+    if (!key.includes('/')) {
+      classes.push({ name: `-translate-x-${safeName}`, css: `.-translate-x-${safeName} { --j-translate-x: -${value}; transform: translateX(-${value}); }` });
+      classes.push({ name: `-translate-y-${safeName}`, css: `.-translate-y-${safeName} { --j-translate-y: -${value}; transform: translateY(-${value}); }` });
+    }
+  });
+
+  // Negative percentage translations
+  ['1/2', '1/3', '2/3', '1/4', '3/4', 'full'].forEach(key => {
+    const value = translateValues[key];
+    const safeName = key.replace('/', '\\/');
+    classes.push({ name: `-translate-x-${safeName}`, css: `.-translate-x-${safeName} { --j-translate-x: -${value}; transform: translateX(-${value}); }` });
+    classes.push({ name: `-translate-y-${safeName}`, css: `.-translate-y-${safeName} { --j-translate-y: -${value}; transform: translateY(-${value}); }` });
+  });
+
+  // Skew
+  const skews = [0, 1, 2, 3, 6, 12];
+  skews.forEach(s => {
+    classes.push({ name: `skew-x-${s}`, css: `.skew-x-${s} { --j-skew-x: ${s}deg; transform: skewX(${s}deg); }` });
+    classes.push({ name: `skew-y-${s}`, css: `.skew-y-${s} { --j-skew-y: ${s}deg; transform: skewY(${s}deg); }` });
+    classes.push({ name: `-skew-x-${s}`, css: `.-skew-x-${s} { --j-skew-x: -${s}deg; transform: skewX(-${s}deg); }` });
+    classes.push({ name: `-skew-y-${s}`, css: `.-skew-y-${s} { --j-skew-y: -${s}deg; transform: skewY(-${s}deg); }` });
+  });
+
+  // Perspective
+  const perspectives = ['none', 'sm', 'md', 'lg', 'xl'];
+  const perspectiveValues = { none: 'none', sm: '200px', md: '500px', lg: '1000px', xl: '2000px' };
+  perspectives.forEach(p => {
+    classes.push({ name: `perspective-${p}`, css: `.perspective-${p} { perspective: ${perspectiveValues[p]}; }` });
+  });
+
+  // Perspective Origin
+  origins.forEach(o => {
+    classes.push({ name: `perspective-origin-${o}`, css: `.perspective-origin-${o} { perspective-origin: ${o.replace('-', ' ')}; }` });
+  });
+
+  // Transform Style
+  classes.push({ name: 'transform-flat', css: '.transform-flat { transform-style: flat; }' });
+  classes.push({ name: 'transform-3d', css: '.transform-3d { transform-style: preserve-3d; }' });
+
+  // Backface Visibility
+  classes.push({ name: 'backface-visible', css: '.backface-visible { backface-visibility: visible; }' });
+  classes.push({ name: 'backface-hidden', css: '.backface-hidden { backface-visibility: hidden; }' });
+
+  // 3D Transforms
+  const rotations3d = [0, 45, 90, 180];
+  rotations3d.forEach(r => {
+    classes.push({ name: `rotate-x-${r}`, css: `.rotate-x-${r} { transform: rotateX(${r}deg); }` });
+    classes.push({ name: `rotate-y-${r}`, css: `.rotate-y-${r} { transform: rotateY(${r}deg); }` });
+    classes.push({ name: `rotate-z-${r}`, css: `.rotate-z-${r} { transform: rotateZ(${r}deg); }` });
+  });
+
+  // Translate Z (for 3D)
+  const translateZValues = ['0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100'];
+  translateZValues.forEach(z => {
+    classes.push({ name: `translate-z-${z}`, css: `.translate-z-${z} { transform: translateZ(${z}px); }` });
+    classes.push({ name: `-translate-z-${z}`, css: `.-translate-z-${z} { transform: translateZ(-${z}px); }` });
+  });
+
+  return {
+    css: classes.map(c => c.css).join('\n'),
+    classes
+  };
+}