tailwindcss 0.0.0-oxide-insiders.2a40326 → 0.0.0-oxide-insiders.9e34619

package/CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `--watch=always` option to prevent exit when stdin closes ([#9966](https://github.com/tailwindlabs/tailwindcss/pull/9966))
 - Add standalone CLI build for 64-bit Windows on ARM (`node16-win-arm64`) ([#10001](https://github.com/tailwindlabs/tailwindcss/pull/10001))
 - Add `delay-0` and `duration-0` by default ([#10294](https://github.com/tailwindlabs/tailwindcss/pull/10294))
+- Add logical properties support for inline direction ([#10166](https://github.com/tailwindlabs/tailwindcss/pull/10166))
 
 ### Fixed
 

package/lib/corePlugins.js

@@ -15,6 +15,7 @@ _export(exports, {
 const _fs = /*#__PURE__*/ _interopRequireDefault(require("fs"));
 const _path = /*#__PURE__*/ _interopRequireWildcard(require("path"));
 const _postcss = /*#__PURE__*/ _interopRequireDefault(require("postcss"));
+const _sharedState = require("./lib/sharedState");
 const _createUtilityPlugin = /*#__PURE__*/ _interopRequireDefault(require("./util/createUtilityPlugin"));
 const _buildMediaQuery = /*#__PURE__*/ _interopRequireDefault(require("./util/buildMediaQuery"));
 const _escapeClassName = /*#__PURE__*/ _interopRequireDefault(require("./util/escapeClassName"));
@@ -650,6 +651,18 @@ let corePlugins = {
             ]
         ],
         [
+            [
+                "start",
+                [
+                    "inset-inline-start"
+                ]
+            ],
+            [
+                "end",
+                [
+                    "inset-inline-end"
+                ]
+            ],
             [
                 "top",
                 [
@@ -802,6 +815,18 @@ let corePlugins = {
             ]
         ],
         [
+            [
+                "ms",
+                [
+                    "margin-inline-start"
+                ]
+            ],
+            [
+                "me",
+                [
+                    "margin-inline-end"
+                ]
+            ],
             [
                 "mt",
                 [
@@ -1416,6 +1441,18 @@ let corePlugins = {
             ]
         ],
         [
+            [
+                "scroll-ms",
+                [
+                    "scroll-margin-inline-start"
+                ]
+            ],
+            [
+                "scroll-me",
+                [
+                    "scroll-margin-inline-end"
+                ]
+            ],
             [
                 "scroll-mt",
                 [
@@ -1468,6 +1505,18 @@ let corePlugins = {
             ]
         ],
         [
+            [
+                "scroll-ps",
+                [
+                    "scroll-padding-inline-start"
+                ]
+            ],
+            [
+                "scroll-pe",
+                [
+                    "scroll-padding-inline-end"
+                ]
+            ],
             [
                 "scroll-pt",
                 [
@@ -1834,6 +1883,15 @@ let corePlugins = {
         matchUtilities({
             "space-x": (value)=>{
                 value = value === "0" ? "0px" : value;
+                if (_sharedState.env.OXIDE) {
+                    return {
+                        "& > :not([hidden]) ~ :not([hidden])": {
+                            "--tw-space-x-reverse": "0",
+                            "margin-inline-end": `calc(${value} * var(--tw-space-x-reverse))`,
+                            "margin-inline-start": `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`
+                        }
+                    };
+                }
                 return {
                     "& > :not([hidden]) ~ :not([hidden])": {
                         "--tw-space-x-reverse": "0",
@@ -1869,6 +1927,16 @@ let corePlugins = {
         matchUtilities({
             "divide-x": (value)=>{
                 value = value === "0" ? "0px" : value;
+                if (_sharedState.env.OXIDE) {
+                    return {
+                        "& > :not([hidden]) ~ :not([hidden])": {
+                            "@defaults border-width": {},
+                            "--tw-divide-x-reverse": "0",
+                            "border-inline-end-width": `calc(${value} * var(--tw-divide-x-reverse))`,
+                            "border-inline-start-width": `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`
+                        }
+                    };
+                }
                 return {
                     "& > :not([hidden]) ~ :not([hidden])": {
                         "@defaults border-width": {},
@@ -2178,6 +2246,20 @@ let corePlugins = {
             ]
         ],
         [
+            [
+                "rounded-s",
+                [
+                    "border-start-start-radius",
+                    "border-end-start-radius"
+                ]
+            ],
+            [
+                "rounded-e",
+                [
+                    "border-start-end-radius",
+                    "border-end-end-radius"
+                ]
+            ],
             [
                 "rounded-t",
                 [
@@ -2208,6 +2290,30 @@ let corePlugins = {
             ]
         ],
         [
+            [
+                "rounded-ss",
+                [
+                    "border-start-start-radius"
+                ]
+            ],
+            [
+                "rounded-se",
+                [
+                    "border-start-end-radius"
+                ]
+            ],
+            [
+                "rounded-ee",
+                [
+                    "border-end-end-radius"
+                ]
+            ],
+            [
+                "rounded-es",
+                [
+                    "border-end-start-radius"
+                ]
+            ],
             [
                 "rounded-tl",
                 [
@@ -2270,6 +2376,26 @@ let corePlugins = {
             ]
         ],
         [
+            [
+                "border-s",
+                [
+                    [
+                        "@defaults border-width",
+                        {}
+                    ],
+                    "border-inline-start-width"
+                ]
+            ],
+            [
+                "border-e",
+                [
+                    [
+                        "@defaults border-width",
+                        {}
+                    ],
+                    "border-inline-end-width"
+                ]
+            ],
             [
                 "border-t",
                 [
@@ -2401,6 +2527,30 @@ let corePlugins = {
             ]
         });
         matchUtilities({
+            "border-s": (value)=>{
+                if (!corePlugins("borderOpacity")) {
+                    return {
+                        "border-inline-start-color": (0, _toColorValue.default)(value)
+                    };
+                }
+                return (0, _withAlphaVariable.default)({
+                    color: value,
+                    property: "border-inline-start-color",
+                    variable: "--tw-border-opacity"
+                });
+            },
+            "border-e": (value)=>{
+                if (!corePlugins("borderOpacity")) {
+                    return {
+                        "border-inline-end-color": (0, _toColorValue.default)(value)
+                    };
+                }
+                return (0, _withAlphaVariable.default)({
+                    color: value,
+                    property: "border-inline-end-color",
+                    variable: "--tw-border-opacity"
+                });
+            },
             "border-t": (value)=>{
                 if (!corePlugins("borderOpacity")) {
                     return {
@@ -2756,6 +2906,18 @@ let corePlugins = {
             ]
         ],
         [
+            [
+                "ps",
+                [
+                    "padding-inline-start"
+                ]
+            ],
+            [
+                "pe",
+                [
+                    "padding-inline-end"
+                ]
+            ],
             [
                 "pt",
                 [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "0.0.0-oxide-insiders.2a40326",
+  "version": "0.0.0-oxide-insiders.9e34619",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -23,7 +23,7 @@
     "rebuild-fixtures": "npm run build && node -r @swc/register scripts/rebuildFixtures.js",
     "style": "eslint .",
     "pretest": "npm run generate",
-    "test": "jest",
+    "test": "jest && OXIDE=1 jest",
     "test:integrations": "npm run test --prefix ./integrations",
     "install:integrations": "node scripts/install-integrations.js",
     "generate:plugin-list": "node -r @swc/register scripts/create-plugin-list.js",
@@ -59,7 +59,7 @@
     "concurrently": "^7.5.0",
     "cssnano": "^5.1.14",
     "esbuild": "^0.16.10",
-    "eslint": "^8.30.0",
+    "eslint": "^8.31.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-prettier": "^4.2.1",
     "jest": "^28.1.3",
@@ -73,7 +73,7 @@
     "postcss": "^8.0.9"
   },
   "dependencies": {
-    "@tailwindcss/oxide": "0.0.0-oxide-insiders.2a40326",
+    "@tailwindcss/oxide": "0.0.0-oxide-insiders.9e34619",
     "arg": "^5.0.2",
     "browserslist": "^4.21.4",
     "chokidar": "^3.5.3",
@@ -90,7 +90,7 @@
     "normalize-path": "^3.0.0",
     "object-hash": "^3.0.0",
     "picocolors": "^1.0.0",
-    "postcss": "^8.0.9",
+    "postcss": "^8.4.21",
     "postcss-import": "^14.1.0",
     "postcss-js": "^4.0.0",
     "postcss-load-config": "^3.1.4",

package/peers/index.js

@@ -3248,7 +3248,7 @@ var require_input = __commonJS({
         if (line && typeof line === "object") {
           let start = line;
           let end = column;
-          if (typeof line.offset === "number") {
+          if (typeof start.offset === "number") {
             let pos = this.fromOffset(start.offset);
             line = pos.line;
             column = pos.col;
@@ -5577,7 +5577,7 @@ var require_processor = __commonJS({
     var Root = require_root();
     var Processor = class {
       constructor(plugins = []) {
-        this.version = "8.4.20";
+        this.version = "8.4.21";
         this.plugins = this.normalize(plugins);
       }
       use(plugin) {

package/src/corePlugins.js

@@ -1,6 +1,7 @@
 import fs from 'fs'
 import * as path from 'path'
 import postcss from 'postcss'
+import { env } from './lib/sharedState'
 import createUtilityPlugin from './util/createUtilityPlugin'
 import buildMediaQuery from './util/buildMediaQuery'
 import escapeClassName from './util/escapeClassName'
@@ -623,6 +624,8 @@ export let corePlugins = {
         ['inset-y', ['top', 'bottom']],
       ],
       [
+        ['start', ['inset-inline-start']],
+        ['end', ['inset-inline-end']],
         ['top', ['top']],
         ['right', ['right']],
         ['bottom', ['bottom']],
@@ -674,6 +677,8 @@ export let corePlugins = {
         ['my', ['margin-top', 'margin-bottom']],
       ],
       [
+        ['ms', ['margin-inline-start']],
+        ['me', ['margin-inline-end']],
         ['mt', ['margin-top']],
         ['mr', ['margin-right']],
         ['mb', ['margin-bottom']],
@@ -1022,6 +1027,8 @@ export let corePlugins = {
         ['scroll-my', ['scroll-margin-top', 'scroll-margin-bottom']],
       ],
       [
+        ['scroll-ms', ['scroll-margin-inline-start']],
+        ['scroll-me', ['scroll-margin-inline-end']],
         ['scroll-mt', ['scroll-margin-top']],
         ['scroll-mr', ['scroll-margin-right']],
         ['scroll-mb', ['scroll-margin-bottom']],
@@ -1038,6 +1045,8 @@ export let corePlugins = {
       ['scroll-py', ['scroll-padding-top', 'scroll-padding-bottom']],
     ],
     [
+      ['scroll-ps', ['scroll-padding-inline-start']],
+      ['scroll-pe', ['scroll-padding-inline-end']],
       ['scroll-pt', ['scroll-padding-top']],
       ['scroll-pr', ['scroll-padding-right']],
       ['scroll-pb', ['scroll-padding-bottom']],
@@ -1211,6 +1220,16 @@ export let corePlugins = {
         'space-x': (value) => {
           value = value === '0' ? '0px' : value
 
+          if (env.OXIDE) {
+            return {
+              '& > :not([hidden]) ~ :not([hidden])': {
+                '--tw-space-x-reverse': '0',
+                'margin-inline-end': `calc(${value} * var(--tw-space-x-reverse))`,
+                'margin-inline-start': `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`,
+              },
+            }
+          }
+
           return {
             '& > :not([hidden]) ~ :not([hidden])': {
               '--tw-space-x-reverse': '0',
@@ -1246,6 +1265,17 @@ export let corePlugins = {
         'divide-x': (value) => {
           value = value === '0' ? '0px' : value
 
+          if (env.OXIDE) {
+            return {
+              '& > :not([hidden]) ~ :not([hidden])': {
+                '@defaults border-width': {},
+                '--tw-divide-x-reverse': '0',
+                'border-inline-end-width': `calc(${value} * var(--tw-divide-x-reverse))`,
+                'border-inline-start-width': `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`,
+              },
+            }
+          }
+
           return {
             '& > :not([hidden]) ~ :not([hidden])': {
               '@defaults border-width': {},
@@ -1435,12 +1465,18 @@ export let corePlugins = {
   borderRadius: createUtilityPlugin('borderRadius', [
     ['rounded', ['border-radius']],
     [
+      ['rounded-s', ['border-start-start-radius', 'border-end-start-radius']],
+      ['rounded-e', ['border-start-end-radius', 'border-end-end-radius']],
       ['rounded-t', ['border-top-left-radius', 'border-top-right-radius']],
       ['rounded-r', ['border-top-right-radius', 'border-bottom-right-radius']],
       ['rounded-b', ['border-bottom-right-radius', 'border-bottom-left-radius']],
       ['rounded-l', ['border-top-left-radius', 'border-bottom-left-radius']],
     ],
     [
+      ['rounded-ss', ['border-start-start-radius']],
+      ['rounded-se', ['border-start-end-radius']],
+      ['rounded-ee', ['border-end-end-radius']],
+      ['rounded-es', ['border-end-start-radius']],
       ['rounded-tl', ['border-top-left-radius']],
       ['rounded-tr', ['border-top-right-radius']],
       ['rounded-br', ['border-bottom-right-radius']],
@@ -1457,6 +1493,8 @@ export let corePlugins = {
         ['border-y', [['@defaults border-width', {}], 'border-top-width', 'border-bottom-width']],
       ],
       [
+        ['border-s', [['@defaults border-width', {}], 'border-inline-start-width']],
+        ['border-e', [['@defaults border-width', {}], 'border-inline-end-width']],
         ['border-t', [['@defaults border-width', {}], 'border-top-width']],
         ['border-r', [['@defaults border-width', {}], 'border-right-width']],
         ['border-b', [['@defaults border-width', {}], 'border-bottom-width']],
@@ -1539,6 +1577,32 @@ export let corePlugins = {
 
     matchUtilities(
       {
+        'border-s': (value) => {
+          if (!corePlugins('borderOpacity')) {
+            return {
+              'border-inline-start-color': toColorValue(value),
+            }
+          }
+
+          return withAlphaVariable({
+            color: value,
+            property: 'border-inline-start-color',
+            variable: '--tw-border-opacity',
+          })
+        },
+        'border-e': (value) => {
+          if (!corePlugins('borderOpacity')) {
+            return {
+              'border-inline-end-color': toColorValue(value),
+            }
+          }
+
+          return withAlphaVariable({
+            color: value,
+            property: 'border-inline-end-color',
+            variable: '--tw-border-opacity',
+          })
+        },
         'border-t': (value) => {
           if (!corePlugins('borderOpacity')) {
             return {
@@ -1775,6 +1839,8 @@ export let corePlugins = {
       ['py', ['padding-top', 'padding-bottom']],
     ],
     [
+      ['ps', ['padding-inline-start']],
+      ['pe', ['padding-inline-end']],
       ['pt', ['padding-top']],
       ['pr', ['padding-right']],
       ['pb', ['padding-bottom']],