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

package/package.json

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

package/postcss/tailwind-v4-compat.cjs

@@ -4,6 +4,8 @@ const postcssNested = require('postcss-nested');
 const screens = require('../screens.json');
 const {
   importantMarker,
+  legacyImportantClasses,
+  toTailwind4ImportantClass,
 } = require('../tailwind/compatibility/important');
 const {
   legacySpacingAliasEntries,
@@ -16,6 +18,9 @@ const legacyStateVariantOrder = new Map(
   Object.keys(coreVariants)
     .map((variant, index) => [variant, index]),
 );
+const legacyImportantSuffixClasses = new Set(
+  legacyImportantClasses.map(toTailwind4ImportantClass),
+);
 
 const legacySpacingAliases = legacySpacingAliasEntries(spacing)
   .sort(([, left], [, right]) => right.length - left.length);
@@ -23,6 +28,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 +77,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'],
@@ -119,18 +149,27 @@ function tailwindV4Compat() {
       await flattenUtilityLayers(root);
 
       utilityLayers(root).forEach((layer) => {
+        restoreLegacyImportantClassNames(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);
+      });
+      restoreLegacyImportantLayers(root);
     },
   };
 }
@@ -142,8 +181,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 +271,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 +388,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)
@@ -442,6 +540,89 @@ function restoreImportantDeclarations(root) {
   });
 }
 
+function restoreLegacyImportantClassNames(root) {
+  root.walkRules((rule) => {
+    const aliases = rule.selectors.flatMap((selector) => (
+      classNames(selector)
+        .filter((className) => legacyImportantSuffixClasses.has(className))
+        .map((className) => {
+          const segments = classSegments(className);
+          const utility = segments.pop().slice(0, -1);
+          const legacyClassName = [...segments, `!${utility}`].join(':');
+
+          return selector.replace(
+            `.${escapeClassName(className)}`,
+            `.${escapeClassName(legacyClassName)}`,
+          );
+        })
+    ));
+
+    const uniqueAliases = [...new Set(aliases)];
+
+    if (uniqueAliases.length === 0) return;
+
+    const aliasRule = rule.clone({ selectors: uniqueAliases });
+
+    aliasRule.raws.onereachLegacyImportant = true;
+    rule.after(aliasRule);
+  });
+}
+
+function restoreLegacyImportantLayers(root) {
+  utilityLayers(root).forEach((utilityLayer) => {
+    const legacyImportantNodes = extractMarkedLegacyImportantNodes(utilityLayer);
+
+    if (legacyImportantNodes.length === 0) return;
+
+    let componentLayer = utilityLayer.prev();
+
+    if (
+      componentLayer?.type !== 'atrule'
+      || componentLayer.name !== 'layer'
+      || componentLayer.params.trim() !== 'components'
+    ) {
+      componentLayer = postcss.atRule({
+        name: 'layer',
+        params: 'components',
+      });
+      utilityLayer.before(componentLayer);
+    }
+
+    componentLayer.append(legacyImportantNodes);
+  });
+}
+
+function extractMarkedLegacyImportantNodes(container) {
+  return [...(container.nodes ?? [])].flatMap((node) => {
+    if (node.type === 'rule') {
+      if (!node.raws.onereachLegacyImportant) return [];
+
+      delete node.raws.onereachLegacyImportant;
+      node.remove();
+      return [node];
+    }
+
+    if (!node.nodes) return [];
+
+    const childNodes = extractMarkedLegacyImportantNodes(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 restoreLegacyCoreUtilities(root) {
   const restoredContainers = new WeakSet();
 
@@ -481,6 +662,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 +758,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 +951,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 +1074,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/compatibility/important.js

@@ -1,4 +1,18 @@
 const importantMarker = '--or-tailwind-v3-important';
+const legacyImportantClasses = [
+  'dark:disabled:!bg-on-disabled-dark',
+  'dark:invalid:read-only:!border-transparent',
+  'dark:read-only:!border-transparent',
+  'disabled:!bg-on-disabled',
+  'first:children:!ms-0',
+  'invalid:!border-dashed',
+  'invalid:read-only:!border-transparent',
+  'last:children:!me-0',
+  'md:!my-0',
+  'md:!pb-[7px]',
+  'md:!pt-[6px]',
+  'read-only:!border-transparent',
+];
 
 function markImportant(declarations) {
   return {
@@ -7,7 +21,16 @@ function markImportant(declarations) {
   };
 }
 
+function toTailwind4ImportantClass(className) {
+  const segments = className.split(':');
+  const utility = segments.pop();
+
+  return [...segments, `${utility.replace(/^!/, '')}!`].join(':');
+}
+
 module.exports = {
   importantMarker,
+  legacyImportantClasses,
   markImportant,
+  toTailwind4ImportantClass,
 };

package/tailwind/compatibility/legacy-spacing.js

@@ -27,6 +27,10 @@ const spacingUtilities = [
   'max-w',
   'max-h',
 ];
+const {
+  legacyImportantClasses,
+  toTailwind4ImportantClass,
+} = require('./important');
 
 const childrenUtilities = spacingUtilities.filter((utility) => (
   /^(?:p[trblxyse]?|m[trblxyse]?)$/.test(utility)
@@ -38,6 +42,10 @@ const stateVariants = ['dark', 'hover', 'mobile', 'desktop'];
 function generateLegacyCompatibilityCss({ spacing, screens }) {
   const candidates = new Set();
 
+  legacyImportantClasses.forEach((className) => {
+    candidates.add(toTailwind4ImportantClass(className));
+  });
+
   legacySpacingAliasEntries(spacing).forEach(([, alias]) => {
     spacingUtilities.forEach((utility) => {
       addCandidateVariants(candidates, `${utility}-${alias}`, screens);

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']]: {