@onereach/styles 27.0.2-beta.6095.0 → 27.0.2-beta.6097.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.6095.0",
+  "version": "27.0.2-beta.6097.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.6095.0",
+    "@onereach/font-icons": "^27.0.2-beta.6097.0",
     "tailwindcss": "4.3.2"
   },
   "devDependencies": {

package/tailwind/plugins/legacy-spacing.js

@@ -108,10 +108,13 @@ module.exports = {
       });
 
       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[`${toSelector(`first:children:!${utility}-${name}`)} > :first-child`] = important(toRule(properties, value));
-        utilities[`${toSelector(`last:children:!${utility}-${name}`)} > :last-child`] = important(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) => {
@@ -141,22 +144,19 @@ module.exports = {
 
     const responsiveUtilities = {};
 
-    Object.entries(screens).forEach(([screen, width]) => {
-      const screenUtilities = {};
-
+    Object.entries(screens).forEach(([screen]) => {
       Object.entries(utilities).forEach(([selector, rule]) => {
         const responsiveSelector = `.${escapeClassName(`${screen}:`)}${selector.slice(1)}`;
-        screenUtilities[responsiveSelector] = rule;
         responsiveUtilities[`${responsiveSelector}[force-screen~="${screen}"]`] = rule;
         responsiveUtilities[`[force-screen~="${screen}"] ${responsiveSelector}`] = rule;
       });
-
-      responsiveUtilities[`@media (min-width: ${width})`] = screenUtilities;
     });
 
     addBase({
-      ...utilities,
-      ...responsiveUtilities,
+      '@layer utilities': {
+        ...utilities,
+        ...responsiveUtilities,
+      },
     });
   }),
 };