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

package/main-v3.css

@@ -4,6 +4,6 @@
 @import "./font.css";
 
 @import "./base.layer.css";
-@import "./legacy-utilities.layer.css";
+@import "./compat/tailwind-v3-utilities.css";
 
 @config "./tailwind.config.js";

package/main-v4.css

@@ -0,0 +1,3 @@
+@import "./tokens-v3.css";
+@import "./font.css";
+@import "./base.layer.css";

package/package.json

@@ -1,24 +1,28 @@
 {
   "name": "@onereach/styles",
-  "version": "27.0.2-beta.6102.0",
+  "version": "27.0.2-beta.6104.0",
   "description": "Styles for or-ui-next",
   "license": "Apache-2.0",
   "files": [
     "dist",
+    "MIGRATION_TAILWIND_V4.md",
     "icons",
     "src",
     "tailwind/**",
+    "compat",
     "base.layer.css",
     "font.css",
-    "legacy-utilities.layer.css",
     "legacy-ui-warning.scss",
     "main-v3.css",
+    "main-v4.css",
+    "postcss",
     "preflight-revert.css",
     "rollup-plugin-tailwindcss-cli.css",
     "scrollbar.css",
     "tailwind.config.js",
     "tailwind.config.json",
     "tailwind.config.preset.js",
+    "tailwind.config.preset.v4.js",
     "temporary-dark-v2.css",
     "tokens.css",
     "tokens-v3.css",
@@ -26,16 +30,19 @@
     "screens.json"
   ],
   "scripts": {
-    "build": "npm-run-all build:tokens:css build:tokens:css:v3 build:resolve-config",
+    "build": "npm-run-all build:tokens:css build:tokens:css:v3 build:resolve-config build:compat",
+    "build:compat": "node ./scripts/generateLegacyCompatibility.js",
     "build:resolve-config": "node ./scripts/resolveConfig.js",
     "build:tokens:css": "node ./utils/makeCssVaribales.js",
     "build:tokens:css:v3": "node ./utils/makeCssVariablesV3.js",
     "clean": "rimraf dist",
     "fix": "stylelint --fix '**/*.scss'",
-    "lint": "stylelint '**/*.scss'"
+    "lint": "stylelint '**/*.scss'",
+    "test:contract": "node --test tests/*.test.cjs"
   },
   "dependencies": {
-    "@onereach/font-icons": "^27.0.2-beta.6102.0",
+    "@onereach/font-icons": "^27.0.2-beta.6104.0",
+    "postcss-nested": "6.2.0",
     "tailwindcss": "4.3.2"
   },
   "devDependencies": {
@@ -45,7 +52,11 @@
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
     "postcss-preset-env": "^9.1.0",
-    "sass": "^1.63.4"
+    "sass": "^1.63.4",
+    "tailwindcss-v3": "npm:tailwindcss@3.4.16"
+  },
+  "peerDependencies": {
+    "postcss": "^8.4.32"
   },
   "publishConfig": {
     "access": "public"

package/postcss/tailwind-v4-compat.cjs

@@ -0,0 +1,420 @@
+const {
+  importantMarker,
+} = require('../tailwind/compatibility/important');
+const {
+  legacySpacingAliasEntries,
+} = require('../tailwind/compatibility/legacy-spacing');
+const postcss = require('postcss');
+const postcssNested = require('postcss-nested');
+const spacing = require('../tailwind.config.preset.v4').theme.spacing;
+const screens = require('../screens.json');
+
+const legacySpacingAliases = legacySpacingAliasEntries(spacing)
+  .sort(([, left], [, right]) => right.length - left.length);
+const legacySpacingUtilityPattern = /^-?(?:p(?:[xytrblse])?|m(?:[xytrblse])?|gap(?:-[xy])?|w|h|min-[wh]|max-[wh])-/;
+const responsiveVariantOrder = new Map(
+  ['xs', ...Object.keys(screens)].map((variant, index) => [variant, index]),
+);
+const legacyCoreUtilities = new Map([
+  ['leading-none', [
+    ['line-height', '1'],
+  ]],
+  ['text-inherit', [
+    ['font-size', 'inherit'],
+    ['line-height', 'inherit'],
+    ['color', 'inherit'],
+  ]],
+  ['outline-none', [
+    ['outline', '2px solid transparent'],
+    ['outline-offset', '2px'],
+  ]],
+  ['transition-transform', [
+    ['transition-property', 'transform'],
+  ]],
+  ['max-w-none', [
+    ['max-width', 'none'],
+  ]],
+  ['max-h-none', [
+    ['max-height', 'none'],
+  ]],
+]);
+const legacyCoreReplacementProps = new Map([
+  ['leading-none', new Set(['--tw-leading', 'line-height'])],
+  ['text-inherit', new Set(['font-size', 'line-height', 'color'])],
+  ['outline-none', new Set([
+    '--tw-outline-style',
+    'outline',
+    'outline-offset',
+    'outline-style',
+  ])],
+  ['transition-transform', new Set([
+    'transition-property',
+    'transition-timing-function',
+    'transition-duration',
+  ])],
+  ['max-w-none', new Set(['max-width'])],
+  ['max-h-none', new Set(['max-height'])],
+]);
+
+function tailwindV4Compat() {
+  return {
+    postcssPlugin: 'onereach-tailwind-v4-compat',
+    async OnceExit(root) {
+      utilityLayers(root).forEach(restoreNestedChildrenVariantOrder);
+      await flattenUtilityLayers(root);
+
+      utilityLayers(root).forEach((layer) => {
+        restoreStackedVariantOrder(layer);
+        restoreLegacySpacingClassNames(layer);
+        restoreImportantDeclarations(layer);
+        restoreLegacyCoreUtilities(layer);
+        restoreArbitraryValueOrder(layer);
+        reorderResponsiveVariantSiblings(layer);
+      });
+    },
+  };
+}
+
+function restoreNestedChildrenVariantOrder(root) {
+  root.walkRules((candidateRule) => {
+    const candidate = classNames(candidateRule.selector)
+      .find((className) => className.split(':').includes('children'));
+
+    if (!candidate) return;
+
+    const segments = candidate.split(':');
+    const variantDepth = segments.length - 1;
+
+    const paths = nestedContainerPaths(candidateRule, variantDepth);
+
+    if (paths.length === 0) return;
+
+    candidateRule.removeAll();
+    candidateRule.append(paths.map(({ containers, nodes }) => {
+      let content = nodes.map((node) => node.clone());
+
+      containers.forEach((container) => {
+        const wrapper = container.clone();
+
+        wrapper.removeAll();
+        wrapper.append(content);
+        content = wrapper;
+      });
+
+      return content;
+    }));
+  });
+}
+
+function nestedContainerPaths(container, depth, containers = []) {
+  if (depth === 0) {
+    return [{
+      containers,
+      nodes: container.nodes,
+    }];
+  }
+
+  return container.nodes
+    .filter((node) => ['atrule', 'rule'].includes(node.type))
+    .flatMap((child) => nestedContainerPaths(child, depth - 1, [
+      ...containers,
+      child,
+    ]));
+}
+
+async function flattenUtilityLayers(root) {
+  const layers = utilityLayers(root);
+
+  for (const layer of layers) {
+    const isolatedRoot = postcss.root();
+
+    isolatedRoot.append(layer.clone());
+    await postcss([postcssNested()]).process(isolatedRoot, { from: undefined });
+    layer.replaceWith(isolatedRoot.first);
+  }
+}
+
+function utilityLayers(root) {
+  const layers = [];
+
+  root.walkAtRules('layer', (layer) => {
+    if (layer.params.trim() === 'utilities') layers.push(layer);
+  });
+
+  return layers;
+}
+
+function restoreStackedVariantOrder(root) {
+  root.walkRules((rule) => {
+    const candidate = classNames(rule.selector)
+      .find((className) => (
+        className.split(':').includes('children')
+        && ['first', 'last'].some((variant) => className.split(':').includes(variant))
+      ));
+
+    if (!candidate) return;
+
+    const variants = candidate.split(':');
+    const childIndex = variants.indexOf('children');
+    const position = variants.includes('first') ? 'first' : 'last';
+    const positionIndex = variants.indexOf(position);
+
+    if (childIndex < positionIndex) {
+      rule.selector = rule.selector.replace(
+        new RegExp(`\\s*>\\s*\\*:${position}-child`, 'g'),
+        `:${position}-child > *`,
+      );
+    } else {
+      rule.selector = rule.selector.replace(
+        new RegExp(`:${position}-child\\s*>\\s*\\*`, 'g'),
+        ` > *:${position}-child`,
+      );
+    }
+  });
+}
+
+function restoreLegacySpacingClassNames(root) {
+  root.walkRules((rule) => {
+    let restoredLegacyClass = false;
+
+    rule.selector = rule.selector.replace(
+      /\.((?:\\.|[^\s.#>+~,[\]()=:])+)/g,
+      (selector, escapedClassName) => {
+        const utility = baseUtility(unescapeClassName(escapedClassName));
+        const aliasEntry = legacySpacingAliases.find(([, alias]) => (
+          utility.endsWith(`-${alias}`)
+          && legacySpacingUtilityPattern.test(utility)
+        ));
+
+        if (!aliasEntry) return selector;
+
+        const [legacyName, alias] = aliasEntry;
+        const aliasStart = escapedClassName.lastIndexOf(`-${alias}`);
+
+        restoredLegacyClass = true;
+
+        return `.${escapedClassName.slice(0, aliasStart)}-${escapeClassName(legacyName)}${escapedClassName.slice(aliasStart + alias.length + 1)}`;
+      },
+    );
+
+    if (restoredLegacyClass) {
+      restoreLegacyAxisDeclarations(rule);
+    }
+  });
+}
+
+function restoreLegacyAxisDeclarations(rule) {
+  const physicalAxis = classNames(rule.selector)
+    .map(baseUtility)
+    .map((utility) => utility.match(/^-?(px|py|mx|my)-.*[+*]/)?.[1])
+    .find(Boolean);
+  const declarationMap = {
+    px: ['padding-inline', 'padding-left', 'padding-right'],
+    py: ['padding-block', 'padding-top', 'padding-bottom'],
+    mx: ['margin-inline', 'margin-left', 'margin-right'],
+    my: ['margin-block', 'margin-top', 'margin-bottom'],
+  };
+
+  if (!physicalAxis) return;
+
+  const [logicalProperty, firstProperty, secondProperty] = declarationMap[physicalAxis];
+
+  rule.walkDecls(logicalProperty, (declaration) => {
+    declaration.cloneBefore({ prop: firstProperty });
+    declaration.cloneBefore({ prop: secondProperty });
+    declaration.remove();
+  });
+}
+
+function escapeClassName(className) {
+  return className.replace(/([!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~])/g, '\\$1');
+}
+
+function unescapeClassName(className) {
+  return className.replace(/\\(.)/g, '$1');
+}
+
+function restoreImportantDeclarations(root) {
+  root.walkDecls(importantMarker, (marker) => {
+    marker.parent.nodes
+      .filter((node) => node.type === 'decl' && node !== marker)
+      .forEach((declaration) => {
+        declaration.important = true;
+      });
+
+    marker.remove();
+  });
+}
+
+function restoreLegacyCoreUtilities(root) {
+  const restoredContainers = new WeakSet();
+
+  root.walkRules((candidateRule) => {
+    const utility = classNames(candidateRule.selector)
+      .map(baseUtility)
+      .find((className) => legacyCoreUtilities.has(className));
+
+    if (!utility) return;
+
+    const declarations = legacyCoreUtilities.get(utility);
+    const replacedProps = legacyCoreReplacementProps.get(utility);
+
+    [candidateRule, ...descendantContainers(candidateRule)]
+      .filter((container) => directDeclarations(container).length > 0)
+      .forEach((container) => {
+        if (restoredContainers.has(container)) return;
+
+        const important = directDeclarations(container)
+          .some((declaration) => declaration.important);
+
+        directDeclarations(container)
+          .filter((declaration) => replacedProps.has(declaration.prop))
+          .forEach((declaration) => declaration.remove());
+        declarations.slice().reverse().forEach(([prop, value]) => {
+          container.prepend({ prop, value, important });
+        });
+        restoredContainers.add(container);
+      });
+  });
+}
+
+function classNames(selector) {
+  const names = [];
+
+  for (let index = 0; index < selector.length; index += 1) {
+    if (selector[index] !== '.' || selector[index - 1] === '\\') continue;
+
+    let name = '';
+    index += 1;
+
+    while (index < selector.length) {
+      const character = selector[index];
+
+      if (character === '\\' && index + 1 < selector.length) {
+        name += selector[index + 1];
+        index += 2;
+        continue;
+      }
+
+      if (/[\s.#>+~,[\]()=:]/.test(character)) break;
+
+      name += character;
+      index += 1;
+    }
+
+    if (name) names.push(name);
+    index -= 1;
+  }
+
+  return names;
+}
+
+function baseUtility(className) {
+  return className.split(':').at(-1).replace(/^!|!$/g, '');
+}
+
+function descendantContainers(rule) {
+  const containers = [];
+
+  rule.walk((node) => {
+    if (node !== rule && node.nodes) containers.push(node);
+  });
+
+  return containers;
+}
+
+function directDeclarations(container) {
+  return container.nodes?.filter((node) => node.type === 'decl') ?? [];
+}
+
+function restoreArbitraryValueOrder(root) {
+  reorderArbitraryValueSiblings(root);
+
+  root.each((node) => {
+    if (node.nodes) restoreArbitraryValueOrder(node);
+  });
+}
+
+function reorderArbitraryValueSiblings(container) {
+  const groups = new Map();
+
+  container.nodes?.forEach((node, index) => {
+    if (node.type !== 'rule') return;
+
+    const candidate = classNames(node.selector)
+      .find((className) => className.includes('[') && className.includes(']'));
+
+    if (!candidate) return;
+
+    const normalizedCandidate = candidate.replace(/\[[^\]]*]/g, '[]');
+    const declarationSignature = [];
+
+    node.walkDecls((declaration) => {
+      declarationSignature.push(declaration.prop);
+    });
+    declarationSignature.sort();
+
+    const key = `${normalizedCandidate}\0${declarationSignature.join('\0')}`;
+    const group = groups.get(key) ?? [];
+
+    group.push({ candidate, index, node });
+    groups.set(key, group);
+  });
+
+  groups.forEach((group) => {
+    if (group.length < 2) return;
+
+    const sorted = [...group].sort((left, right) => {
+      if (left.candidate === right.candidate) return 0;
+
+      return left.candidate < right.candidate ? -1 : 1;
+    });
+
+    group.forEach(({ index }, sortedIndex) => {
+      const node = sorted[sortedIndex].node;
+
+      container.nodes[index] = node;
+      node.parent = container;
+    });
+  });
+}
+
+function reorderResponsiveVariantSiblings(container) {
+  const nodes = container.nodes ?? [];
+  const responsiveNodes = nodes.flatMap((node) => {
+    const variant = responsiveVariantForNode(node);
+
+    if (!variant) return [];
+
+    return [{
+      node,
+      order: responsiveVariantOrder.get(variant),
+    }];
+  });
+  const sorted = [...responsiveNodes].sort((left, right) => left.order - right.order);
+  const responsiveSet = new Set(responsiveNodes.map(({ node }) => node));
+
+  container.nodes = [
+    ...nodes.filter((node) => !responsiveSet.has(node)),
+    ...sorted.map(({ node }) => node),
+  ];
+  container.nodes.forEach((node) => {
+    node.parent = container;
+  });
+}
+
+function responsiveVariantForNode(node) {
+  const selectors = [];
+
+  if (node.type === 'rule') selectors.push(node.selector);
+  node.walkRules?.((rule) => selectors.push(rule.selector));
+
+  return selectors
+    .flatMap(classNames)
+    .flatMap((className) => className.split(':'))
+    .find((segment) => responsiveVariantOrder.has(segment));
+}
+
+tailwindV4Compat.postcss = true;
+
+module.exports = tailwindV4Compat;

package/rollup-plugin-tailwindcss-cli.css

@@ -1,5 +1,6 @@
 /* stylelint-disable scss/at-rule-no-unknown */
-@import "tailwindcss";
+@import "tailwindcss/theme";
+@import "tailwindcss/utilities";
 @import "./dist/index.css";
 
 @config "./tailwind.config.js";

package/tailwind/compatibility/important.js

@@ -0,0 +1,13 @@
+const importantMarker = '--or-tailwind-v3-important';
+
+function markImportant(declarations) {
+  return {
+    ...declarations,
+    [importantMarker]: '1',
+  };
+}
+
+module.exports = {
+  importantMarker,
+  markImportant,
+};

package/tailwind/compatibility/legacy-spacing.js

@@ -0,0 +1,133 @@
+const spacingUtilities = [
+  'p',
+  'px',
+  'py',
+  'pt',
+  'pr',
+  'pb',
+  'pl',
+  'ps',
+  'pe',
+  'm',
+  'mx',
+  'my',
+  'mt',
+  'mr',
+  'mb',
+  'ml',
+  'ms',
+  'me',
+  'gap',
+  'gap-x',
+  'gap-y',
+  'w',
+  'h',
+  'min-w',
+  'min-h',
+  'max-w',
+  'max-h',
+];
+
+const childrenUtilities = spacingUtilities.filter((utility) => (
+  /^(?:p[trblxyse]?|m[trblxyse]?)$/.test(utility)
+));
+const firstLastChildrenUtilities = ['ms', 'me'];
+const negativeUtilities = ['m', 'mx', 'my', 'mt', 'mr', 'mb', 'ml', 'ms', 'me'];
+const stateVariants = ['dark', 'hover', 'mobile', 'desktop'];
+
+function generateLegacyCompatibilityCss({ spacing, screens }) {
+  const candidates = new Set();
+
+  legacySpacingAliasEntries(spacing).forEach(([, alias]) => {
+    spacingUtilities.forEach((utility) => {
+      addCandidateVariants(candidates, `${utility}-${alias}`, screens);
+    });
+
+    negativeUtilities.forEach((utility) => {
+      addCandidateVariants(candidates, `-${utility}-${alias}`, screens);
+    });
+
+    childrenUtilities.forEach((utility) => {
+      addChildrenCandidateVariants(candidates, `${utility}-${alias}`, screens);
+    });
+
+    firstLastChildrenUtilities.forEach((utility) => {
+      addPositionalChildrenCandidateVariants(
+        candidates,
+        `${utility}-${alias}`,
+        screens,
+      );
+    });
+
+  });
+
+  return `@source inline("${[...candidates].join(' ')}");`;
+}
+
+function withLegacySpacingAliases(spacing) {
+  return Object.fromEntries([
+    ...Object.entries(spacing),
+    ...legacySpacingAliasEntries(spacing)
+      .map(([legacyName, alias]) => [alias, spacing[legacyName]]),
+  ]);
+}
+
+function legacySpacingAliasEntries(spacing) {
+  return Object.keys(spacing)
+    .filter((name) => /[+*]/.test(name))
+    .map((name) => [name, legacySpacingAlias(name)]);
+}
+
+function legacySpacingAlias(name) {
+  const encodedName = name
+    .replaceAll('+', '-b')
+    .replaceAll('*', '-a');
+
+  return `or-tw4-legacy-${encodedName}`;
+}
+
+function addCandidateVariants(candidates, className, screens) {
+  addImportantCandidates(candidates, className);
+  stateVariants.forEach((variant) => {
+    addImportantCandidates(candidates, `${variant}:${className}`);
+  });
+  Object.keys(screens).forEach((screen) => {
+    addImportantCandidates(candidates, `${screen}:${className}`);
+  });
+}
+
+function addChildrenCandidateVariants(candidates, className, screens) {
+  addImportantCandidates(candidates, `children:${className}`);
+  addImportantCandidates(candidates, `activated:children:${className}`);
+  Object.keys(screens).forEach((screen) => {
+    addImportantCandidates(candidates, `${screen}:children:${className}`);
+  });
+}
+
+function addPositionalChildrenCandidateVariants(candidates, className, screens) {
+  ['first', 'last'].forEach((position) => {
+    addImportantCandidates(candidates, `${position}:children:${className}`);
+    Object.keys(screens).forEach((screen) => {
+      addImportantCandidates(
+        candidates,
+        `${screen}:${position}:children:${className}`,
+      );
+    });
+  });
+}
+
+function addImportantCandidates(candidates, className) {
+  const segments = className.split(':');
+  const utility = segments.pop();
+  const variants = segments.length > 0 ? `${segments.join(':')}:` : '';
+
+  candidates.add(className);
+  candidates.add(`${variants}!${utility}`);
+  candidates.add(`${className}!`);
+}
+
+module.exports = {
+  generateLegacyCompatibilityCss,
+  legacySpacingAliasEntries,
+  withLegacySpacingAliases,
+};

package/tailwind/plugins/theme-background.js

@@ -1,5 +1,6 @@
 const plugin = require('tailwindcss/plugin');
 
+const { markImportant } = require('../compatibility/important');
 const { resolveThemeValue } = require('../utils');
 
 const { variants } = require('./core');
@@ -203,9 +204,9 @@ module.exports = {
         return {
           backgroundColor: resolveThemeValue(theme, `backgroundColor.${token}` + suffix, token),
 
-          [variants['disabled']]: ['white', 'black', 'transparent'].includes(token) ? null : {
-            backgroundColor: `${resolveThemeValue(theme, 'backgroundColor.disabled' + suffix)} !important`,
-          },
+          [variants['disabled']]: ['white', 'black', 'transparent'].includes(token) ? null : markImportant({
+            backgroundColor: resolveThemeValue(theme, 'backgroundColor.disabled' + suffix),
+          }),
 
           transitionProperty: 'color, background-color, border-color, outline-color',
           transitionDuration: theme('transitionDuration.short'),

package/tailwind/plugins/theme-border.js

@@ -1,5 +1,6 @@
 const plugin = require('tailwindcss/plugin');
 
+const { markImportant } = require('../compatibility/important');
 const { resolveThemeValue } = require('../utils');
 
 const { variants } = require('./core');
@@ -54,9 +55,9 @@ module.exports = {
           borderStyle: 'solid',
           borderColor: resolveThemeValue(theme, `borderColor.${token}` + suffix, token),
 
-          [variants['disabled']]: ['transparent'].includes(token) ? null : {
-            borderColor: `${resolveThemeValue(theme, 'borderColor.disabled' + suffix)} !important`,
-          },
+          [variants['disabled']]: ['transparent'].includes(token) ? null : markImportant({
+            borderColor: resolveThemeValue(theme, 'borderColor.disabled' + suffix),
+          }),
 
           transitionProperty: 'color, background-color, border-color, outline-color',
           transitionDuration: theme('transitionDuration.short'),