@onereach/styles 27.0.2-beta.6094.0 → 27.0.2-beta.6096.0

package/main-v3.css

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/styles",
-  "version": "27.0.2-beta.6094.0",
+  "version": "27.0.2-beta.6096.0",
   "description": "Styles for or-ui-next",
   "license": "Apache-2.0",
   "files": [
@@ -10,6 +10,7 @@
     "tailwind/**",
     "base.layer.css",
     "font.css",
+    "legacy-utilities.layer.css",
     "legacy-ui-warning.scss",
     "main-v3.css",
     "preflight-revert.css",
@@ -34,7 +35,7 @@
     "lint": "stylelint '**/*.scss'"
   },
   "dependencies": {
-    "@onereach/font-icons": "^27.0.2-beta.6094.0",
+    "@onereach/font-icons": "^27.0.2-beta.6096.0",
     "tailwindcss": "4.3.2"
   },
   "devDependencies": {

package/tailwind/plugins/legacy-spacing.js

@@ -0,0 +1,162 @@
+const plugin = require('tailwindcss/plugin');
+
+const screens = require('../../screens.json');
+
+const spacingUtilities = {
+  p: ['padding'],
+  px: ['paddingInline'],
+  py: ['paddingBlock'],
+  pt: ['paddingTop'],
+  pr: ['paddingRight'],
+  pb: ['paddingBottom'],
+  pl: ['paddingLeft'],
+  ps: ['paddingInlineStart'],
+  pe: ['paddingInlineEnd'],
+  m: ['margin'],
+  mx: ['marginInline'],
+  my: ['marginBlock'],
+  mt: ['marginTop'],
+  mr: ['marginRight'],
+  mb: ['marginBottom'],
+  ml: ['marginLeft'],
+  ms: ['marginInlineStart'],
+  me: ['marginInlineEnd'],
+  gap: ['gap'],
+  w: ['width'],
+  h: ['height'],
+  'min-w': ['minWidth'],
+  'min-h': ['minHeight'],
+  'max-w': ['maxWidth'],
+  'max-h': ['maxHeight'],
+};
+
+const childrenUtilities = {
+  p: ['padding'],
+  px: ['paddingInline'],
+  py: ['paddingBlock'],
+  pt: ['paddingTop'],
+  pr: ['paddingRight'],
+  pb: ['paddingBottom'],
+  pl: ['paddingLeft'],
+  ps: ['paddingInlineStart'],
+  pe: ['paddingInlineEnd'],
+  m: ['margin'],
+  mx: ['marginInline'],
+  my: ['marginBlock'],
+  mt: ['marginTop'],
+  mr: ['marginRight'],
+  mb: ['marginBottom'],
+  ml: ['marginLeft'],
+  ms: ['marginInlineStart'],
+  me: ['marginInlineEnd'],
+};
+
+const firstLastChildrenUtilities = {
+  ms: ['marginInlineStart'],
+  me: ['marginInlineEnd'],
+};
+
+const escapeClassName = (className) => className
+  .replace(/!/g, '\\!')
+  .replace(/:/g, '\\:')
+  .replace(/\[/g, '\\[')
+  .replace(/\]/g, '\\]')
+  .replace(/\+/g, '\\+')
+  .replace(/\*/g, '\\*');
+
+const toSelector = (className) => `.${escapeClassName(className)}`;
+
+const toRule = (properties, value) => properties.reduce((rule, property) => {
+  rule[property] = value;
+  return rule;
+}, {});
+
+const important = (rule) => Object.fromEntries(
+  Object.entries(rule).map(([property, value]) => [property, `${value} !important`]),
+);
+
+const negate = (value) => `calc(${value} * -1)`;
+
+const childSelector = (className) => `${toSelector(className)} > *`;
+
+const addChildUtility = (utilities, className, rule) => {
+  utilities[childSelector(className)] = rule;
+};
+
+const addStateChildUtility = (utilities, state, className, rule) => {
+  utilities[`${toSelector(`${state}:children:${className}`)}:is([${state}]:not([${state}="false"])) > *`] = rule;
+  utilities[`${toSelector(`${state}:children:${className}`)}[force-state~="${state}"] > *`] = rule;
+};
+
+module.exports = {
+  plugin: plugin(({ addBase, theme }) => {
+    const spacing = theme('spacing');
+    const spacingEntries = Object.entries(spacing);
+
+    const utilities = {};
+
+    spacingEntries.forEach(([name, value]) => {
+      Object.entries(spacingUtilities).forEach(([utility, properties]) => {
+        utilities[toSelector(`${utility}-${name}`)] = toRule(properties, value);
+        utilities[toSelector(`!${utility}-${name}`)] = important(toRule(properties, value));
+      });
+
+      Object.entries(childrenUtilities).forEach(([utility, properties]) => {
+        addChildUtility(utilities, `children:${utility}-${name}`, toRule(properties, value));
+        addChildUtility(utilities, `children:!${utility}-${name}`, important(toRule(properties, value)));
+        addStateChildUtility(utilities, 'activated', `${utility}-${name}`, toRule(properties, value));
+      });
+
+      Object.entries(firstLastChildrenUtilities).forEach(([utility, properties]) => {
+        const firstImportantSelector = toSelector(`first:children:!${utility}-${name}`);
+        const lastImportantSelector = toSelector(`last:children:!${utility}-${name}`);
+
+        utilities[`${toSelector(`first:children:${utility}-${name}`)} > :first-child`] = toRule(properties, value);
+        utilities[`${toSelector(`last:children:${utility}-${name}`)} > :last-child`] = toRule(properties, value);
+        utilities[`${firstImportantSelector} > :first-child`] = important(toRule(properties, value));
+        utilities[`${lastImportantSelector} > :last-child`] = important(toRule(properties, value));
+      });
+
+      ['m', 'mx', 'my', 'mt', 'mr', 'mb', 'ml', 'ms', 'me'].forEach((utility) => {
+        utilities[toSelector(`-${utility}-${name}`)] = toRule(spacingUtilities[utility], negate(value));
+        utilities[toSelector(`!-${utility}-${name}`)] = important(toRule(spacingUtilities[utility], negate(value)));
+      });
+    });
+
+    addChildUtility(utilities, 'children:outline-none', { outlineStyle: 'none' });
+    addChildUtility(utilities, 'children:min-h-[46px]', { minHeight: '46px' });
+    addChildUtility(utilities, 'children:min-h-[34px]', { minHeight: '34px' });
+    addChildUtility(utilities, 'children:min-h-[30px]', { minHeight: '30px' });
+    addChildUtility(utilities, 'children:relative', { position: 'relative' });
+    addChildUtility(utilities, 'children:z-10', { zIndex: '10' });
+    addStateChildUtility(utilities, 'active', 'z-10', { zIndex: '10' });
+    addChildUtility(utilities, 'children:grow', { flexGrow: '1' });
+    addChildUtility(utilities, 'children:rounded-l-0', {
+      borderTopLeftRadius: '0',
+      borderBottomLeftRadius: '0',
+    });
+    addChildUtility(utilities, 'children:rounded-r-0', {
+      borderTopRightRadius: '0',
+      borderBottomRightRadius: '0',
+    });
+    addChildUtility(utilities, 'children:-ml-[1px]', { marginLeft: '-1px' });
+    utilities[toSelector('m-[10px]')] = { margin: '10px' };
+
+    const responsiveUtilities = {};
+
+    Object.entries(screens).forEach(([screen]) => {
+      Object.entries(utilities).forEach(([selector, rule]) => {
+        const responsiveSelector = `.${escapeClassName(`${screen}:`)}${selector.slice(1)}`;
+        responsiveUtilities[`${responsiveSelector}[force-screen~="${screen}"]`] = rule;
+        responsiveUtilities[`[force-screen~="${screen}"] ${responsiveSelector}`] = rule;
+      });
+    });
+
+    addBase({
+      '@layer utilities': {
+        ...utilities,
+        ...responsiveUtilities,
+      },
+    });
+  }),
+};

package/tailwind.config.preset.js

@@ -13,6 +13,7 @@ const { plugin: core } = require('./tailwind/plugins/core');
 const { plugin: iconography } = require('./tailwind/plugins/iconography');
 const { plugin: interactivity } = require('./tailwind/plugins/interactivity');
 const { plugin: layout } = require('./tailwind/plugins/layout');
+const { plugin: legacySpacing } = require('./tailwind/plugins/legacy-spacing');
 const { plugin: themeResponsive } = require('./tailwind/plugins/responsive');
 const { plugin: scrollbar } = require('./tailwind/plugins/scrollbar');
 const { plugin: themeBackground } = require('./tailwind/plugins/theme-background');
@@ -214,6 +215,7 @@ module.exports = {
     interactivity,
     typography,
     iconography,
+    legacySpacing,
 
     animationDelay,