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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/styles",
-  "version": "27.0.2-beta.6106.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.6106.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);
@@ -144,6 +149,7 @@ function tailwindV4Compat() {
       await flattenUtilityLayers(root);
 
       utilityLayers(root).forEach((layer) => {
+        restoreLegacyImportantClassNames(layer);
         restoreLegacyGroupHover(layer);
         restoreLegacyPseudoElementStateOrder(layer);
         restoreStackedVariantOrder(layer);
@@ -163,6 +169,7 @@ function tailwindV4Compat() {
         reorderLegacyComponentFactorySiblings(layer);
         reorderResponsiveVariantSiblings(layer);
       });
+      restoreLegacyImportantLayers(root);
     },
   };
 }
@@ -174,7 +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;
@@ -533,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();
 

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);