@onereach/styles 27.0.2-beta.6104.0 → 27.0.2-beta.6105.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/styles",
-  "version": "27.0.2-beta.6104.0",
+  "version": "27.0.2-beta.6105.0",
   "description": "Styles for or-ui-next",
   "license": "Apache-2.0",
   "files": [
@@ -41,7 +41,7 @@
     "test:contract": "node --test tests/*.test.cjs"
   },
   "dependencies": {
-    "@onereach/font-icons": "^27.0.2-beta.6104.0",
+    "@onereach/font-icons": "^27.0.2-beta.6105.0",
     "postcss-nested": "6.2.0",
     "tailwindcss": "4.3.2"
   },

package/postcss/tailwind-v4-compat.cjs

@@ -1,13 +1,21 @@
+const postcss = require('postcss');
+const postcssNested = require('postcss-nested');
+
+const screens = require('../screens.json');
 const {
   importantMarker,
 } = require('../tailwind/compatibility/important');
 const {
   legacySpacingAliasEntries,
 } = require('../tailwind/compatibility/legacy-spacing');
-const postcss = require('postcss');
-const postcssNested = require('postcss-nested');
+const coreVariants = require('../tailwind/plugins/core').variants;
+const themePresetValues = require('../tailwind/plugins/theme-preset').values;
 const spacing = require('../tailwind.config.preset.v4').theme.spacing;
-const screens = require('../screens.json');
+
+const legacyStateVariantOrder = new Map(
+  Object.keys(coreVariants)
+    .map((variant, index) => [variant, index]),
+);
 
 const legacySpacingAliases = legacySpacingAliasEntries(spacing)
   .sort(([, left], [, right]) => right.length - left.length);
@@ -15,6 +23,44 @@ const legacySpacingUtilityPattern = /^-?(?:p(?:[xytrblse])?|m(?:[xytrblse])?|gap
 const responsiveVariantOrder = new Map(
   ['xs', ...Object.keys(screens)].map((variant, index) => [variant, index]),
 );
+const legacyTransformValue = [
+  'translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0))',
+  'rotate(var(--tw-rotate, 0))',
+  'skewX(var(--tw-skew-x, 0))',
+  'skewY(var(--tw-skew-y, 0))',
+  'scaleX(var(--tw-scale-x, 1))',
+  'scaleY(var(--tw-scale-y, 1))',
+].join(' ');
+const legacyComponentFactories = [
+  ['theme-outline', require('../tailwind/plugins/theme-outline').values],
+  ['theme-background', require('../tailwind/plugins/theme-background').values],
+  ['theme-foreground', require('../tailwind/plugins/theme-foreground').values],
+  ['theme-preset-1', themePresetValues],
+  ['theme-preset-2', themePresetValues],
+  ['theme-preset-3', themePresetValues],
+  ['theme-preset-4', themePresetValues],
+  ['theme-divider', require('../tailwind/plugins/theme-divider').values],
+  ['theme-border', require('../tailwind/plugins/theme-border').values],
+]
+  .map(([factory, values]) => [
+    factory,
+    new Map(Object.keys(values).map((value, index) => [value, index])),
+  ])
+  .sort(([left], [right]) => right.length - left.length);
+const legacyComponentFactoryNames = [
+  'theme-background',
+  'theme-foreground',
+  'theme-preset-1',
+  'theme-preset-2',
+  'theme-preset-3',
+  'theme-preset-4',
+  'theme-divider',
+  'theme-outline',
+  'theme-border',
+  'iconography',
+  'typography',
+  'layout',
+].sort((left, right) => right.length - left.length);
 const legacyCoreUtilities = new Map([
   ['leading-none', [
     ['line-height', '1'],
@@ -24,6 +70,9 @@ const legacyCoreUtilities = new Map([
     ['line-height', 'inherit'],
     ['color', 'inherit'],
   ]],
+  ['outline', [
+    ['outline-style', 'solid'],
+  ]],
   ['outline-none', [
     ['outline', '2px solid transparent'],
     ['outline-offset', '2px'],
@@ -41,6 +90,12 @@ const legacyCoreUtilities = new Map([
 const legacyCoreReplacementProps = new Map([
   ['leading-none', new Set(['--tw-leading', 'line-height'])],
   ['text-inherit', new Set(['font-size', 'line-height', 'color'])],
+  ['outline', new Set([
+    '--tw-outline-style',
+    'outline',
+    'outline-style',
+    'outline-width',
+  ])],
   ['outline-none', new Set([
     '--tw-outline-style',
     'outline',
@@ -60,29 +115,40 @@ function tailwindV4Compat() {
   return {
     postcssPlugin: 'onereach-tailwind-v4-compat',
     async OnceExit(root) {
-      utilityLayers(root).forEach(restoreNestedChildrenVariantOrder);
+      utilityLayers(root).forEach(restoreNestedVariantOrder);
       await flattenUtilityLayers(root);
 
       utilityLayers(root).forEach((layer) => {
+        restoreLegacyGroupHover(layer);
         restoreStackedVariantOrder(layer);
         restoreLegacySpacingClassNames(layer);
         restoreImportantDeclarations(layer);
         restoreLegacyCoreUtilities(layer);
+        restoreLegacyTransformUtilities(layer);
         restoreArbitraryValueOrder(layer);
+        reorderLegacyComponentValueSiblings(layer);
+        reorderLegacyStateVariantSiblings(layer);
         reorderResponsiveVariantSiblings(layer);
       });
+      restoreLegacyComponentLayers(root);
     },
   };
 }
 
-function restoreNestedChildrenVariantOrder(root) {
+function restoreNestedVariantOrder(root) {
   root.walkRules((candidateRule) => {
     const candidate = classNames(candidateRule.selector)
-      .find((className) => className.split(':').includes('children'));
+      .find((className) => {
+        const variants = classSegments(className).slice(0, -1);
+        const arbitraryIndex = variants.findIndex((variant) => variant.startsWith('[&'));
+
+        return variants.includes('children')
+          || arbitraryIndex > 0;
+      });
 
     if (!candidate) return;
 
-    const segments = candidate.split(':');
+    const segments = classSegments(candidate);
     const variantDepth = segments.length - 1;
 
     const paths = nestedContainerPaths(candidateRule, variantDepth);
@@ -106,6 +172,29 @@ function restoreNestedChildrenVariantOrder(root) {
   });
 }
 
+function classSegments(className) {
+  const segments = [];
+  let bracketDepth = 0;
+  let segment = '';
+
+  for (const character of className) {
+    if (character === '[') bracketDepth += 1;
+    if (character === ']') bracketDepth -= 1;
+
+    if (character === ':' && bracketDepth === 0) {
+      segments.push(segment);
+      segment = '';
+      continue;
+    }
+
+    segment += character;
+  }
+
+  segments.push(segment);
+
+  return segments;
+}
+
 function nestedContainerPaths(container, depth, containers = []) {
   if (depth === 0) {
     return [{
@@ -144,6 +233,113 @@ function utilityLayers(root) {
   return layers;
 }
 
+function restoreLegacyComponentLayers(root) {
+  utilityLayers(root).forEach((utilityLayer) => {
+    const componentNodes = extractLegacyComponentNodes(utilityLayer);
+
+    if (componentNodes.length === 0) return;
+
+    const componentLayer = postcss.atRule({
+      name: 'layer',
+      params: 'components',
+    });
+
+    componentLayer.append(componentNodes);
+    utilityLayer.before(componentLayer);
+  });
+}
+
+function extractLegacyComponentNodes(container) {
+  return [...(container.nodes ?? [])].flatMap((node) => {
+    if (node.type === 'rule') {
+      const isLegacyComponent = classNames(node.selector)
+        .map(baseUtility)
+        .some((utility) => legacyComponentFactoryNames
+          .some((factory) => utility.startsWith(`${factory}-`)));
+
+      if (!isLegacyComponent) return [];
+
+      node.remove();
+      return [node];
+    }
+
+    if (!node.nodes) return [];
+
+    const childNodes = extractLegacyComponentNodes(node);
+
+    if (childNodes.length === 0) return [];
+    if (node.type === 'atrule' && node.name === 'layer' && node.params === 'utilities') {
+      if (node.nodes.length === 0) node.remove();
+
+      return childNodes;
+    }
+
+    const wrapper = node.clone();
+
+    wrapper.removeAll();
+    wrapper.append(childNodes);
+    if (node.nodes.length === 0) node.remove();
+
+    return [wrapper];
+  });
+}
+
+function reorderLegacyComponentValueSiblings(container) {
+  const groups = new Map();
+
+  container.nodes?.forEach((node, index) => {
+    if (node.type !== 'rule') return;
+
+    const candidate = classNames(node.selector)
+      .map((className) => ({
+        className,
+        utility: baseUtility(className),
+      }))
+      .map((entry) => ({
+        ...entry,
+        factory: legacyComponentFactories
+          .find(([factory]) => entry.utility.startsWith(`${factory}-`)),
+      }))
+      .find(({ factory }) => factory);
+
+    if (!candidate) return;
+
+    const [factory, valueOrder] = candidate.factory;
+    const value = candidate.utility.slice(factory.length + 1);
+    const order = valueOrder.get(value);
+
+    if (order === undefined) return;
+
+    const variants = classSegments(candidate.className).slice(0, -1).join(':');
+    const key = `${factory}\0${variants}`;
+    const group = groups.get(key) ?? [];
+
+    group.push({
+      index,
+      node,
+      order,
+    });
+    groups.set(key, group);
+  });
+
+  groups.forEach((group) => {
+    const sorted = [...group].sort((left, right) => (
+      left.order - right.order || left.index - right.index
+    ));
+
+    group.forEach(({ index }, sortedIndex) => {
+      const node = sorted[sortedIndex].node;
+
+      container.nodes[index] = node;
+      node.parent = container;
+    });
+  });
+
+  container.nodes?.forEach((node) => {
+    if (node.nodes) reorderLegacyComponentValueSiblings(node);
+  });
+}
+
 function restoreStackedVariantOrder(root) {
   root.walkRules((rule) => {
     const candidate = classNames(rule.selector)
@@ -255,6 +451,9 @@ function restoreLegacyCoreUtilities(root) {
       .find((className) => legacyCoreUtilities.has(className));
 
     if (!utility) return;
+    if (!candidateRule.selectors.every((selector) => classNames(selector)
+      .map(baseUtility)
+      .includes(utility))) return;
 
     const declarations = legacyCoreUtilities.get(utility);
     const replacedProps = legacyCoreReplacementProps.get(utility);
@@ -271,18 +470,156 @@ function restoreLegacyCoreUtilities(root) {
           .filter((declaration) => replacedProps.has(declaration.prop))
           .forEach((declaration) => declaration.remove());
         declarations.slice().reverse().forEach(([prop, value]) => {
-          container.prepend({ prop, value, important });
+          container.prepend({
+            prop,
+            value,
+            important,
+          });
         });
         restoredContainers.add(container);
       });
   });
 }
 
+function restoreLegacyTransformUtilities(root) {
+  root.walkRules((rule) => {
+    const utility = classNames(rule.selector)
+      .map(baseUtility)
+      .find((className) => (
+        /^-?rotate-(?![xy]-)/.test(className)
+        || /^-?translate-[xy]-/.test(className)
+        || /^-?skew-[xy]-/.test(className)
+        || /^scale(?:-[xy])?-/.test(className)
+      ));
+
+    if (!utility) return;
+    if (!rule.selectors.every((selector) => classNames(selector)
+      .map(baseUtility)
+      .includes(utility))) return;
+
+    const declarations = directDeclarations(rule);
+    const important = declarations.some((declaration) => declaration.important);
+    const rotate = declarations.find((declaration) => declaration.prop === 'rotate');
+    const translate = declarations.find((declaration) => declaration.prop === 'translate');
+    const scale = declarations.find((declaration) => declaration.prop === 'scale');
+    const transform = declarations.find((declaration) => declaration.prop === 'transform');
+
+    if (rotate) {
+      rotate.cloneBefore({
+        prop: '--tw-rotate',
+        value: rotate.value,
+        important,
+      });
+      rotate.remove();
+    }
+    translate?.remove();
+    scale?.remove();
+    transform?.remove();
+    declarations
+      .filter(({ prop }) => prop === '--tw-scale-z')
+      .forEach((declaration) => declaration.remove());
+    declarations
+      .filter(({ prop }) => prop === '--tw-skew-x' || prop === '--tw-skew-y')
+      .forEach((declaration) => {
+        declaration.value = declaration.value.replace(/^skew[XY]\((.*)\)$/, '$1');
+      });
+    rule.append({
+      prop: 'transform',
+      value: legacyTransformValue,
+      important,
+    });
+  });
+}
+
+function restoreLegacyGroupHover(root) {
+  const restoredByParent = new WeakMap();
+
+  root.walkRules((rule) => {
+    const selectors = rule.selectors.map(restoreLegacyGroupHoverSelector);
+
+    if (selectors.every((selector, index) => selector === rule.selectors[index])) return;
+
+    rule.selectors = [...new Set(selectors)];
+
+    const signature = [
+      rule.selector,
+      ...directDeclarations(rule)
+        .map(({ prop, value, important }) => `${prop}:${value}:${important}`),
+    ].join('\0');
+    const restored = restoredByParent.get(rule.parent) ?? new Set();
+
+    if (restored.has(signature)) {
+      rule.remove();
+      return;
+    }
+
+    restored.add(signature);
+    restoredByParent.set(rule.parent, restored);
+  });
+}
+
+function restoreLegacyGroupHoverSelector(selector) {
+  const candidate = classNames(selector)
+    .map((className) => ({
+      className,
+      variant: classSegments(className)
+        .find((segment) => segment === 'group-hover' || segment.startsWith('group-hover/')),
+    }))
+    .find(({ variant }) => variant);
+
+  if (!candidate) return selector;
+
+  const groupName = `group${candidate.variant.slice('group-hover'.length)}`;
+  const groupSelector = `.${escapeClassName(groupName)}`;
+  const compoundStart = selector.indexOf(`:is(:where(${groupSelector})`);
+
+  if (compoundStart < 0) return selector;
+
+  const compoundEnd = closingParenthesis(selector, compoundStart + 3);
+
+  if (compoundEnd < 0) return selector;
+
+  return [
+    `${groupSelector}:hover `,
+    selector.slice(0, compoundStart),
+    selector.slice(compoundEnd + 1),
+  ].join('');
+}
+
+function closingParenthesis(value, openingIndex) {
+  let depth = 0;
+
+  for (let index = openingIndex;index < value.length;index += 1) {
+    if (value[index] === '(') depth += 1;
+    if (value[index] === ')') depth -= 1;
+    if (depth === 0) return index;
+  }
+
+  return -1;
+}
+
 function classNames(selector) {
   const names = [];
+  let attributeDepth = 0;
 
-  for (let index = 0; index < selector.length; index += 1) {
-    if (selector[index] !== '.' || selector[index - 1] === '\\') continue;
+  for (let index = 0;index < selector.length;index += 1) {
+    if (selector[index] === '\\') {
+      index += 1;
+      continue;
+    }
+    if (selector[index] === '[') {
+      attributeDepth += 1;
+      continue;
+    }
+    if (selector[index] === ']') {
+      attributeDepth -= 1;
+      continue;
+    }
+    if (
+      attributeDepth > 0
+      || selector[index] !== '.'
+      || selector[index - 1] === '\\'
+    ) continue;
 
     let name = '';
     index += 1;
@@ -335,6 +672,61 @@ function restoreArbitraryValueOrder(root) {
   });
 }
 
+function reorderLegacyStateVariantSiblings(container) {
+  const nodes = container.nodes ?? [];
+  const stateNodes = nodes.flatMap((node, index) => {
+    if (node.type !== 'rule') return [];
+
+    const variants = classNames(node.selector)
+      .map((className) => classSegments(className)
+        .slice(0, -1)
+        .filter((segment) => legacyStateVariantOrder.has(segment))
+        .map((segment) => legacyStateVariantOrder.get(segment))
+        .reverse())
+      .find((order) => order.length > 0);
+
+    if (!variants) return [];
+
+    return [{
+      index,
+      node,
+      order: variants,
+    }];
+  });
+  const stateSet = new Set(stateNodes.map(({ node }) => node));
+  const sorted = [...stateNodes].sort((left, right) => (
+    Math.min(...left.order) - Math.min(...right.order)
+    || compareVariantOrders(left.order, right.order)
+    || left.index - right.index
+  ));
+
+  if (stateNodes.length > 0) {
+    container.nodes = [
+      ...nodes.filter((node) => !stateSet.has(node)),
+      ...sorted.map(({ node }) => node),
+    ];
+    container.nodes.forEach((node) => {
+      node.parent = container;
+    });
+  }
+
+  container.nodes?.forEach((node) => {
+    if (node.nodes) reorderLegacyStateVariantSiblings(node);
+  });
+}
+
+function compareVariantOrders(left, right) {
+  const length = Math.max(left.length, right.length);
+
+  for (let index = 0;index < length;index += 1) {
+    const difference = (left[index] ?? -1) - (right[index] ?? -1);
+
+    if (difference !== 0) return difference;
+  }
+
+  return 0;
+}
+
 function reorderArbitraryValueSiblings(container) {
   const groups = new Map();
 
@@ -357,7 +749,11 @@ function reorderArbitraryValueSiblings(container) {
     const key = `${normalizedCandidate}\0${declarationSignature.join('\0')}`;
     const group = groups.get(key) ?? [];
 
-    group.push({ candidate, index, node });
+    group.push({
+      candidate,
+      index,
+      node,
+    });
     groups.set(key, group);
   });