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

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'),

package/tailwind/plugins/theme-divider.js

@@ -1,5 +1,6 @@
 const plugin = require('tailwindcss/plugin');
 
+const { markImportant } = require('../compatibility/important');
 const { resolveThemeValue } = require('../utils');
 
 const { variants } = require('./core');
@@ -52,9 +53,9 @@ module.exports = {
 
         return {
           [variants['children']]: {
-            '&:not(:first-child)': {
-              borderInlineStartStyle: 'none !important',
-            },
+            '&:not(:first-child)': markImportant({
+              borderInlineStartStyle: 'none',
+            }),
 
             '&:not(:last-child)': {
               borderInlineEndStyle: 'solid',
@@ -69,9 +70,9 @@ module.exports = {
 
           [variants['disabled']]: ['transparent'].includes(token) ? null : {
             [variants['children']]: {
-              '&:not(:last-child)': {
-                borderInlineEndColor: `${resolveThemeValue(theme, 'borderColor.disabled' + suffix)} !important`,
-              },
+              '&:not(:last-child)': markImportant({
+                borderInlineEndColor: resolveThemeValue(theme, 'borderColor.disabled' + suffix),
+              }),
             },
           },
         };

package/tailwind/plugins/theme-foreground.js

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

package/tailwind/plugins/theme-outline.js

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

package/tailwind/plugins/theme-preset.js

@@ -1,5 +1,6 @@
 const plugin = require('tailwindcss/plugin');
 
+const { markImportant } = require('../compatibility/important');
 const { resolveThemeValue } = require('../utils');
 
 const { variants } = require('./core');
@@ -58,10 +59,10 @@ module.exports = {
             },
           },
 
-          [variants['disabled']]: {
-            color: `${resolveThemeValue(theme, 'textColor.on-disabled' + suffix)} !important`,
-            backgroundColor: `${resolveThemeValue(theme, 'backgroundColor.disabled' + suffix)} !important`,
-          },
+          [variants['disabled']]: markImportant({
+            color: resolveThemeValue(theme, 'textColor.on-disabled' + suffix),
+            backgroundColor: resolveThemeValue(theme, 'backgroundColor.disabled' + suffix),
+          }),
 
           transitionProperty: 'color, background-color, border-color, outline-color',
           transitionDuration: theme('transitionDuration.short'),
@@ -98,10 +99,10 @@ module.exports = {
             },
           },
 
-          [variants['disabled']]: {
-            color: `${resolveThemeValue(theme, 'textColor.on-disabled' + suffix)} !important`,
-            backgroundColor: `${resolveThemeValue(theme, 'backgroundColor.disabled' + suffix)} !important`,
-          },
+          [variants['disabled']]: markImportant({
+            color: resolveThemeValue(theme, 'textColor.on-disabled' + suffix),
+            backgroundColor: resolveThemeValue(theme, 'backgroundColor.disabled' + suffix),
+          }),
 
           transitionProperty: 'color, background-color, border-color, outline-color',
           transitionDuration: theme('transitionDuration.short'),
@@ -138,10 +139,10 @@ module.exports = {
             },
           },
 
-          [variants['disabled']]: {
-            color: `${resolveThemeValue(theme, 'textColor.on-disabled' + suffix)} !important`,
-            backgroundColor: 'transparent !important',
-          },
+          [variants['disabled']]: markImportant({
+            color: resolveThemeValue(theme, 'textColor.on-disabled' + suffix),
+            backgroundColor: 'transparent',
+          }),
 
           transitionProperty: 'color, background-color, border-color, outline-color',
           transitionDuration: theme('transitionDuration.short'),
@@ -178,10 +179,10 @@ module.exports = {
             },
           },
 
-          [variants['disabled']]: {
-            color: `${resolveThemeValue(theme, 'textColor.on-disabled' + suffix)} !important`,
-            backgroundColor: 'transparent !important',
-          },
+          [variants['disabled']]: markImportant({
+            color: resolveThemeValue(theme, 'textColor.on-disabled' + suffix),
+            backgroundColor: 'transparent',
+          }),
 
           transitionProperty: 'color, background-color, border-color, outline-color',
           transitionDuration: theme('transitionDuration.short'),

package/tailwind.config.js

@@ -8,7 +8,5 @@ module.exports = {
     './node_modules/@onereach/auth-ui-module/dist/auto/**/*.{vue,js,mjs,ts,jsx,tsx}',
     './node_modules/@onereach/ui-components/dist/esm/**/*.{vue,js,mjs,ts,jsx,tsx}',
   ],
-  presets: [
-    require('@onereach/styles/tailwind.config.preset.js'),
-  ],
+  presets: [require('./tailwind.config.preset.v4.js')],
 };