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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/styles",
-  "version": "27.0.2-beta.6105.0",
+  "version": "27.0.2-beta.6106.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.6105.0",
+    "@onereach/font-icons": "^27.0.2-beta.6106.0",
     "postcss-nested": "6.2.0",
     "tailwindcss": "4.3.2"
   },

package/postcss/tailwind-v4-compat.cjs

@@ -23,6 +23,17 @@ const legacySpacingUtilityPattern = /^-?(?:p(?:[xytrblse])?|m(?:[xytrblse])?|gap
 const responsiveVariantOrder = new Map(
   ['xs', ...Object.keys(screens)].map((variant, index) => [variant, index]),
 );
+const legacyPseudoElementVariants = new Map([
+  ['after', '::after'],
+  ['backdrop', '::backdrop'],
+  ['before', '::before'],
+  ['file', '::file-selector-button'],
+  ['first-letter', '::first-letter'],
+  ['first-line', '::first-line'],
+  ['marker', '::marker'],
+  ['placeholder', '::placeholder'],
+  ['selection', '::selection'],
+]);
 const legacyTransformValue = [
   'translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0))',
   'rotate(var(--tw-rotate, 0))',
@@ -61,6 +72,20 @@ const legacyComponentFactoryNames = [
   'typography',
   'layout',
 ].sort((left, right) => right.length - left.length);
+const legacyComponentFactoryOrder = new Map([
+  'layout',
+  'typography',
+  'iconography',
+  'theme-preset-1',
+  'theme-preset-2',
+  'theme-preset-3',
+  'theme-preset-4',
+  'theme-foreground',
+  'theme-background',
+  'theme-border',
+  'theme-divider',
+  'theme-outline',
+].map((factory, index) => [factory, index]));
 const legacyCoreUtilities = new Map([
   ['leading-none', [
     ['line-height', '1'],
@@ -120,17 +145,24 @@ function tailwindV4Compat() {
 
       utilityLayers(root).forEach((layer) => {
         restoreLegacyGroupHover(layer);
+        restoreLegacyPseudoElementStateOrder(layer);
         restoreStackedVariantOrder(layer);
         restoreLegacySpacingClassNames(layer);
         restoreImportantDeclarations(layer);
         restoreLegacyCoreUtilities(layer);
+        restoreLegacyBorderWidthUtilities(layer);
         restoreLegacyTransformUtilities(layer);
         restoreArbitraryValueOrder(layer);
         reorderLegacyComponentValueSiblings(layer);
         reorderLegacyStateVariantSiblings(layer);
+        reorderLegacyOutlineSiblings(layer);
         reorderResponsiveVariantSiblings(layer);
       });
       restoreLegacyComponentLayers(root);
+      componentLayers(root).forEach((layer) => {
+        reorderLegacyComponentFactorySiblings(layer);
+        reorderResponsiveVariantSiblings(layer);
+      });
     },
   };
 }
@@ -142,8 +174,7 @@ function restoreNestedVariantOrder(root) {
         const variants = classSegments(className).slice(0, -1);
         const arbitraryIndex = variants.findIndex((variant) => variant.startsWith('[&'));
 
-        return variants.includes('children')
-          || arbitraryIndex > 0;
+        return variants.includes('children') || arbitraryIndex > 0;
       });
 
     if (!candidate) return;
@@ -233,6 +264,16 @@ function utilityLayers(root) {
   return layers;
 }
 
+function componentLayers(root) {
+  const layers = [];
+
+  root.walkAtRules('layer', (layer) => {
+    if (layer.params.trim() === 'components') layers.push(layer);
+  });
+
+  return layers;
+}
+
 function restoreLegacyComponentLayers(root) {
   utilityLayers(root).forEach((utilityLayer) => {
     const componentNodes = extractLegacyComponentNodes(utilityLayer);
@@ -340,6 +381,56 @@ function reorderLegacyComponentValueSiblings(container) {
   });
 }
 
+function reorderLegacyComponentFactorySiblings(container) {
+  const nodes = container.nodes ?? [];
+  const componentNodes = nodes.flatMap((node, index) => {
+    const selectors = [];
+
+    if (node.type === 'rule') selectors.push(node.selector);
+    node.walkRules?.((rule) => selectors.push(rule.selector));
+
+    const selectorClassNames = selectors.flatMap(classNames);
+    const factory = selectorClassNames
+      .map(baseUtility)
+      .flatMap((utility) => [...legacyComponentFactoryOrder.keys()]
+        .filter((candidate) => utility.startsWith(`${candidate}-`)))
+      .at(0);
+
+    if (!factory) return [];
+
+    return [{
+      index,
+      node,
+      order: legacyComponentFactoryOrder.get(factory),
+      state: selectorClassNames.some((className) => (
+        classSegments(className)
+          .slice(0, -1)
+          .some((segment) => legacyStateVariantOrder.has(segment))
+      )),
+    }];
+  });
+  const componentSet = new Set(componentNodes.map(({ node }) => node));
+  const sorted = [...componentNodes].sort((left, right) => (
+    Number(left.state) - Number(right.state)
+    || left.order - right.order
+    || left.index - right.index
+  ));
+
+  if (componentNodes.length > 0) {
+    container.nodes = [
+      ...nodes.filter((node) => !componentSet.has(node)),
+      ...sorted.map(({ node }) => node),
+    ];
+    container.nodes.forEach((node) => {
+      node.parent = container;
+    });
+  }
+
+  container.nodes?.forEach((node) => {
+    if (node.nodes) reorderLegacyComponentFactorySiblings(node);
+  });
+}
+
 function restoreStackedVariantOrder(root) {
   root.walkRules((rule) => {
     const candidate = classNames(rule.selector)
@@ -481,6 +572,25 @@ function restoreLegacyCoreUtilities(root) {
   });
 }
 
+function restoreLegacyBorderWidthUtilities(root) {
+  root.walkRules((rule) => {
+    const isBorderWidthUtility = classNames(rule.selector)
+      .map(baseUtility)
+      .some((utility) => (
+        /^border(?:-[xytrblse])?(?:-(?:0|1|2|4|8|\[[^\]]+]))?$/.test(utility)
+      ));
+
+    if (!isBorderWidthUtility) return;
+
+    rule.walkDecls((declaration) => {
+      if (
+        declaration.prop === 'border-style'
+        || declaration.prop === '--tw-border-style'
+      ) declaration.remove();
+    });
+  });
+}
+
 function restoreLegacyTransformUtilities(root) {
   root.walkRules((rule) => {
     const utility = classNames(rule.selector)
@@ -558,6 +668,30 @@ function restoreLegacyGroupHover(root) {
   });
 }
 
+function restoreLegacyPseudoElementStateOrder(root) {
+  root.walkRules((rule) => {
+    rule.selectors = rule.selectors.map((selector) => {
+      const pseudoElement = classNames(selector)
+        .flatMap((className) => classSegments(className).slice(0, -1))
+        .map((variant) => legacyPseudoElementVariants.get(variant))
+        .find((pseudo) => pseudo && selector.includes(pseudo));
+
+      if (!pseudoElement) return selector;
+
+      const pseudoIndex = selector.indexOf(pseudoElement);
+      const suffix = selector.slice(pseudoIndex + pseudoElement.length);
+
+      if (!suffix || !/^[:[]/.test(suffix)) return selector;
+
+      return [
+        selector.slice(0, pseudoIndex),
+        suffix,
+        pseudoElement,
+      ].join('');
+    });
+  });
+}
+
 function restoreLegacyGroupHoverSelector(selector) {
   const candidate = classNames(selector)
     .map((className) => ({
@@ -727,6 +861,56 @@ function compareVariantOrders(left, right) {
   return 0;
 }
 
+function reorderLegacyOutlineSiblings(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),
+      }))
+      .find(({ utility }) => (
+        utility === 'outline-none'
+        || utility.startsWith('outline-offset-')
+      ));
+
+    if (!candidate) return;
+
+    const variants = classSegments(candidate.className).slice(0, -1).join(':');
+    const important = candidate.className.startsWith('!')
+      || candidate.className.endsWith('!');
+    const key = `${variants}\0${important}`;
+    const group = groups.get(key) ?? [];
+
+    group.push({
+      index,
+      node,
+      order: candidate.utility === 'outline-none' ? 0 : 1,
+    });
+    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) reorderLegacyOutlineSiblings(node);
+  });
+}
+
 function reorderArbitraryValueSiblings(container) {
   const groups = new Map();
 
@@ -800,6 +984,13 @@ function reorderResponsiveVariantSiblings(container) {
 }
 
 function responsiveVariantForNode(node) {
+  if (node.type === 'atrule' && node.name === 'media') {
+    const screen = Object.entries(screens)
+      .find(([, minWidth]) => node.params.includes(`min-width: ${minWidth}`));
+
+    if (screen) return screen[0];
+  }
+
   const selectors = [];
 
   if (node.type === 'rule') selectors.push(node.selector);

package/tailwind/plugins/theme-preset.js

@@ -37,6 +37,7 @@ module.exports = {
           color: resolveThemeValue(theme, `textColor.on-${token}` + suffix),
           backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}` + suffix),
 
+          borderStyle: 'none',
           outlineStyle: 'none',
 
           [variants['mobile']]: {
@@ -77,6 +78,7 @@ module.exports = {
           color: resolveThemeValue(theme, `textColor.${token}` + suffix),
           backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}-opacity-0-08` + suffix),
 
+          borderStyle: 'none',
           outlineStyle: 'none',
 
           [variants['mobile']]: {
@@ -117,6 +119,7 @@ module.exports = {
           color: resolveThemeValue(theme, `textColor.${token}` + suffix),
           backgroundColor: 'transparent',
 
+          borderStyle: 'none',
           outlineStyle: 'none',
 
           [variants['mobile']]: {
@@ -157,6 +160,7 @@ module.exports = {
           color: resolveThemeValue(theme, `textColor.${token}` + suffix),
           backgroundColor: 'transparent',
 
+          borderStyle: 'none',
           outlineStyle: 'none',
 
           [variants['mobile']]: {