diff --git a/.github/ISSUE_TEMPLATE/css-issue.yml b/.github/ISSUE_TEMPLATE/css-issue.yml
index 135995ae7..fe6bba441 100644
--- a/.github/ISSUE_TEMPLATE/css-issue.yml
+++ b/.github/ISSUE_TEMPLATE/css-issue.yml
@@ -87,6 +87,7 @@ body:
- PostCSS Is Pseudo Class
- PostCSS Lab Function
- PostCSS Logical
+ - PostCSS Logical Float and Clear
- PostCSS Media Queries Aspect-Ratio Number Values
- PostCSS Media Query Ranges
- PostCSS Nested Calc
diff --git a/.github/ISSUE_TEMPLATE/plugin-issue.yml b/.github/ISSUE_TEMPLATE/plugin-issue.yml
index 2fa9f2915..5cdc390d7 100644
--- a/.github/ISSUE_TEMPLATE/plugin-issue.yml
+++ b/.github/ISSUE_TEMPLATE/plugin-issue.yml
@@ -89,6 +89,7 @@ body:
- PostCSS Is Pseudo Class
- PostCSS Lab Function
- PostCSS Logical
+ - PostCSS Logical Float and Clear
- PostCSS Media Queries Aspect-Ratio Number Values
- PostCSS Media Query Ranges
- PostCSS Nested Calc
diff --git a/.github/labeler.yml b/.github/labeler.yml
index c874c1372..cc4115330 100644
--- a/.github/labeler.yml
+++ b/.github/labeler.yml
@@ -136,6 +136,10 @@
- plugins/postcss-logical/**
- experimental/postcss-logical/**
+"plugins/postcss-logical-float-and-clear":
+ - plugins/postcss-logical-float-and-clear/**
+ - experimental/postcss-logical-float-and-clear/**
+
"plugins/media-queries-aspect-ratio-number-values":
- plugins/postcss-media-queries-aspect-ratio-number-values/**
- experimental/postcss-media-queries-aspect-ratio-number-values/**
diff --git a/package-lock.json b/package-lock.json
index 3da2d370d..150fbf7e9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1960,6 +1960,10 @@
"resolved": "plugins/postcss-is-pseudo-class",
"link": true
},
+ "node_modules/@csstools/postcss-logical-float-and-clear": {
+ "resolved": "plugins/postcss-logical-float-and-clear",
+ "link": true
+ },
"node_modules/@csstools/postcss-media-queries-aspect-ratio-number-values": {
"resolved": "plugins/postcss-media-queries-aspect-ratio-number-values",
"link": true
@@ -7747,6 +7751,20 @@
"postcss": "^8.4"
}
},
+ "plugins/postcss-logical-float-and-clear": {
+ "version": "1.0.0",
+ "license": "CC0-1.0",
+ "engines": {
+ "node": "^14 || ^16 || >=18"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/csstools"
+ },
+ "peerDependencies": {
+ "postcss": "^8.4"
+ }
+ },
"plugins/postcss-media-queries-aspect-ratio-number-values": {
"name": "@csstools/postcss-media-queries-aspect-ratio-number-values",
"version": "1.0.0",
@@ -9368,6 +9386,10 @@
"puppeteer": "^19.0.0"
}
},
+ "@csstools/postcss-logical-float-and-clear": {
+ "version": "file:plugins/postcss-logical-float-and-clear",
+ "requires": {}
+ },
"@csstools/postcss-media-queries-aspect-ratio-number-values": {
"version": "file:plugins/postcss-media-queries-aspect-ratio-number-values",
"requires": {
diff --git a/plugins/postcss-logical-float-and-clear/.gitignore b/plugins/postcss-logical-float-and-clear/.gitignore
new file mode 100644
index 000000000..e5b28db4a
--- /dev/null
+++ b/plugins/postcss-logical-float-and-clear/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+package-lock.json
+yarn.lock
+*.result.css
+*.result.css.map
+*.result.html
diff --git a/plugins/postcss-logical-float-and-clear/.nvmrc b/plugins/postcss-logical-float-and-clear/.nvmrc
new file mode 100644
index 000000000..39e593ebe
--- /dev/null
+++ b/plugins/postcss-logical-float-and-clear/.nvmrc
@@ -0,0 +1 @@
+v18.8.0
diff --git a/plugins/postcss-logical-float-and-clear/.tape.mjs b/plugins/postcss-logical-float-and-clear/.tape.mjs
new file mode 100644
index 000000000..68721bc51
--- /dev/null
+++ b/plugins/postcss-logical-float-and-clear/.tape.mjs
@@ -0,0 +1,29 @@
+import postcssTape from '../../packages/postcss-tape/dist/index.mjs';
+import plugin from '@csstools/postcss-logical-float-and-clear';
+
+postcssTape(plugin)({
+ basic: {
+ message: "supports basic usage",
+ },
+ 'basic:hebrew': {
+ message: "supports { inlineDirection: 'right-to-left' }",
+ options: {
+ inlineDirection: 'right-to-left'
+ }
+ },
+ 'basic:vertical': {
+ message: "supports { inlineDirection: 'top-to-bottom' }",
+ options: {
+ inlineDirection: 'top-to-bottom'
+ }
+ },
+ 'examples/example': {
+ message: 'minimal example',
+ },
+ 'examples/example:hebrew': {
+ message: 'minimal example',
+ options: {
+ inlineDirection: 'right-to-left'
+ }
+ },
+});
diff --git a/plugins/postcss-logical-float-and-clear/CHANGELOG.md b/plugins/postcss-logical-float-and-clear/CHANGELOG.md
new file mode 100644
index 000000000..0651b1397
--- /dev/null
+++ b/plugins/postcss-logical-float-and-clear/CHANGELOG.md
@@ -0,0 +1,5 @@
+# Changes to PostCSS Logical Float And Clear
+
+### 1.0.0 (Unreleased)
+
+- Initial version
diff --git a/plugins/postcss-logical-float-and-clear/INSTALL.md b/plugins/postcss-logical-float-and-clear/INSTALL.md
new file mode 100644
index 000000000..9e6a50871
--- /dev/null
+++ b/plugins/postcss-logical-float-and-clear/INSTALL.md
@@ -0,0 +1,260 @@
+# Installing PostCSS Logical Float And Clear
+
+[PostCSS Logical Float And Clear] runs in all Node environments, with special instructions for:
+
+- [Node](#node)
+- [PostCSS CLI](#postcss-cli)
+- [PostCSS Load Config](#postcss-load-config)
+- [Webpack](#webpack)
+- [Create React App](#create-react-app)
+- [Next.js](#nextjs)
+- [Gulp](#gulp)
+- [Grunt](#grunt)
+
+
+
+## Node
+
+Add [PostCSS Logical Float And Clear] to your project:
+
+```bash
+npm install postcss @csstools/postcss-logical-float-and-clear --save-dev
+```
+
+Use it as a [PostCSS] plugin:
+
+```js
+// commonjs
+const postcss = require('postcss');
+const postcssLogicalFloatAndClear = require('@csstools/postcss-logical-float-and-clear');
+
+postcss([
+ postcssLogicalFloatAndClear(/* pluginOptions */)
+]).process(YOUR_CSS /*, processOptions */);
+```
+
+```js
+// esm
+import postcss from 'postcss';
+import postcssLogicalFloatAndClear from '@csstools/postcss-logical-float-and-clear';
+
+postcss([
+ postcssLogicalFloatAndClear(/* pluginOptions */)
+]).process(YOUR_CSS /*, processOptions */);
+```
+
+## PostCSS CLI
+
+Add [PostCSS CLI] to your project:
+
+```bash
+npm install postcss-cli @csstools/postcss-logical-float-and-clear --save-dev
+```
+
+Use [PostCSS Logical Float And Clear] in your `postcss.config.js` configuration file:
+
+```js
+const postcssLogicalFloatAndClear = require('@csstools/postcss-logical-float-and-clear');
+
+module.exports = {
+ plugins: [
+ postcssLogicalFloatAndClear(/* pluginOptions */)
+ ]
+}
+```
+
+## PostCSS Load Config
+
+If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config).
+
+```bash
+npm install @csstools/postcss-logical-float-and-clear --save-dev
+```
+
+`package.json`:
+
+```json
+{
+ "postcss": {
+ "plugins": {
+ "@csstools/postcss-logical-float-and-clear": {}
+ }
+ }
+}
+```
+
+`.postcssrc.json`:
+
+```json
+{
+ "plugins": {
+ "@csstools/postcss-logical-float-and-clear": {}
+ }
+}
+```
+
+_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._
+
+## Webpack
+
+_Webpack version 5_
+
+Add [PostCSS Loader] to your project:
+
+```bash
+npm install postcss-loader @csstools/postcss-logical-float-and-clear --save-dev
+```
+
+Use [PostCSS Logical Float And Clear] in your Webpack configuration:
+
+```js
+module.exports = {
+ module: {
+ rules: [
+ {
+ test: /\.css$/i,
+ use: [
+ "style-loader",
+ {
+ loader: "css-loader",
+ options: { importLoaders: 1 },
+ },
+ {
+ loader: "postcss-loader",
+ options: {
+ postcssOptions: {
+ plugins: [
+ // Other plugins,
+ [
+ "@csstools/postcss-logical-float-and-clear",
+ {
+ // Options
+ },
+ ],
+ ],
+ },
+ },
+ },
+ ],
+ },
+ ],
+ },
+};
+```
+
+## Create React App
+
+Add [React App Rewired] and [React App Rewire PostCSS] to your project:
+
+```bash
+npm install react-app-rewired react-app-rewire-postcss @csstools/postcss-logical-float-and-clear --save-dev
+```
+
+Use [React App Rewire PostCSS] and [PostCSS Logical Float And Clear] in your
+`config-overrides.js` file:
+
+```js
+const reactAppRewirePostcss = require('react-app-rewire-postcss');
+const postcssLogicalFloatAndClear = require('@csstools/postcss-logical-float-and-clear');
+
+module.exports = config => reactAppRewirePostcss(config, {
+ plugins: () => [
+ postcssLogicalFloatAndClear(/* pluginOptions */)
+ ]
+});
+```
+
+## Next.js
+
+Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config)
+
+```bash
+npm install @csstools/postcss-logical-float-and-clear --save-dev
+```
+
+Use [PostCSS Logical Float And Clear] in your `postcss.config.json` file:
+
+```json
+{
+ "plugins": [
+ "@csstools/postcss-logical-float-and-clear"
+ ]
+}
+```
+
+```json5
+{
+ "plugins": [
+ [
+ "@csstools/postcss-logical-float-and-clear",
+ {
+ // Optionally add plugin options
+ }
+ ]
+ ]
+}
+```
+
+## Gulp
+
+Add [Gulp PostCSS] to your project:
+
+```bash
+npm install gulp-postcss @csstools/postcss-logical-float-and-clear --save-dev
+```
+
+Use [PostCSS Logical Float And Clear] in your Gulpfile:
+
+```js
+const postcss = require('gulp-postcss');
+const postcssLogicalFloatAndClear = require('@csstools/postcss-logical-float-and-clear');
+
+gulp.task('css', function () {
+ var plugins = [
+ postcssLogicalFloatAndClear(/* pluginOptions */)
+ ];
+
+ return gulp.src('./src/*.css')
+ .pipe(postcss(plugins))
+ .pipe(gulp.dest('.'));
+});
+```
+
+## Grunt
+
+Add [Grunt PostCSS] to your project:
+
+```bash
+npm install grunt-postcss @csstools/postcss-logical-float-and-clear --save-dev
+```
+
+Use [PostCSS Logical Float And Clear] in your Gruntfile:
+
+```js
+const postcssLogicalFloatAndClear = require('@csstools/postcss-logical-float-and-clear');
+
+grunt.loadNpmTasks('grunt-postcss');
+
+grunt.initConfig({
+ postcss: {
+ options: {
+ processors: [
+ postcssLogicalFloatAndClear(/* pluginOptions */)
+ ]
+ },
+ dist: {
+ src: '*.css'
+ }
+ }
+});
+```
+
+[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
+[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
+[PostCSS]: https://github.com/postcss/postcss
+[PostCSS CLI]: https://github.com/postcss/postcss-cli
+[PostCSS Loader]: https://github.com/postcss/postcss-loader
+[PostCSS Logical Float And Clear]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-float-and-clear
+[React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss
+[React App Rewired]: https://github.com/timarney/react-app-rewired
+[Next.js]: https://nextjs.org
diff --git a/plugins/postcss-logical-float-and-clear/LICENSE.md b/plugins/postcss-logical-float-and-clear/LICENSE.md
new file mode 100644
index 000000000..0bc1fa706
--- /dev/null
+++ b/plugins/postcss-logical-float-and-clear/LICENSE.md
@@ -0,0 +1,108 @@
+# CC0 1.0 Universal
+
+## Statement of Purpose
+
+The laws of most jurisdictions throughout the world automatically confer
+exclusive Copyright and Related Rights (defined below) upon the creator and
+subsequent owner(s) (each and all, an “owner”) of an original work of
+authorship and/or a database (each, a “Work”).
+
+Certain owners wish to permanently relinquish those rights to a Work for the
+purpose of contributing to a commons of creative, cultural and scientific works
+(“Commons”) that the public can reliably and without fear of later claims of
+infringement build upon, modify, incorporate in other works, reuse and
+redistribute as freely as possible in any form whatsoever and for any purposes,
+including without limitation commercial purposes. These owners may contribute
+to the Commons to promote the ideal of a free culture and the further
+production of creative, cultural and scientific works, or to gain reputation or
+greater distribution for their Work in part through the use and efforts of
+others.
+
+For these and/or other purposes and motivations, and without any expectation of
+additional consideration or compensation, the person associating CC0 with a
+Work (the “Affirmer”), to the extent that he or she is an owner of Copyright
+and Related Rights in the Work, voluntarily elects to apply CC0 to the Work and
+publicly distribute the Work under its terms, with knowledge of his or her
+Copyright and Related Rights in the Work and the meaning and intended legal
+effect of CC0 on those rights.
+
+1. Copyright and Related Rights. A Work made available under CC0 may be
+ protected by copyright and related or neighboring rights (“Copyright and
+ Related Rights”). Copyright and Related Rights include, but are not limited
+ to, the following:
+ 1. the right to reproduce, adapt, distribute, perform, display, communicate,
+ and translate a Work;
+ 2. moral rights retained by the original author(s) and/or performer(s);
+ 3. publicity and privacy rights pertaining to a person’s image or likeness
+ depicted in a Work;
+ 4. rights protecting against unfair competition in regards to a Work,
+ subject to the limitations in paragraph 4(i), below;
+ 5. rights protecting the extraction, dissemination, use and reuse of data in
+ a Work;
+ 6. database rights (such as those arising under Directive 96/9/EC of the
+ European Parliament and of the Council of 11 March 1996 on the legal
+ protection of databases, and under any national implementation thereof,
+ including any amended or successor version of such directive); and
+ 7. other similar, equivalent or corresponding rights throughout the world
+ based on applicable law or treaty, and any national implementations
+ thereof.
+
+2. Waiver. To the greatest extent permitted by, but not in contravention of,
+ applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and
+ unconditionally waives, abandons, and surrenders all of Affirmer’s Copyright
+ and Related Rights and associated claims and causes of action, whether now
+ known or unknown (including existing as well as future claims and causes of
+ action), in the Work (i) in all territories worldwide, (ii) for the maximum
+ duration provided by applicable law or treaty (including future time
+ extensions), (iii) in any current or future medium and for any number of
+ copies, and (iv) for any purpose whatsoever, including without limitation
+ commercial, advertising or promotional purposes (the “Waiver”). Affirmer
+ makes the Waiver for the benefit of each member of the public at large and
+ to the detriment of Affirmer’s heirs and successors, fully intending that
+ such Waiver shall not be subject to revocation, rescission, cancellation,
+ termination, or any other legal or equitable action to disrupt the quiet
+ enjoyment of the Work by the public as contemplated by Affirmer’s express
+ Statement of Purpose.
+
+3. Public License Fallback. Should any part of the Waiver for any reason be
+ judged legally invalid or ineffective under applicable law, then the Waiver
+ shall be preserved to the maximum extent permitted taking into account
+ Affirmer’s express Statement of Purpose. In addition, to the extent the
+ Waiver is so judged Affirmer hereby grants to each affected person a
+ royalty-free, non transferable, non sublicensable, non exclusive,
+ irrevocable and unconditional license to exercise Affirmer’s Copyright and
+ Related Rights in the Work (i) in all territories worldwide, (ii) for the
+ maximum duration provided by applicable law or treaty (including future time
+ extensions), (iii) in any current or future medium and for any number of
+ copies, and (iv) for any purpose whatsoever, including without limitation
+ commercial, advertising or promotional purposes (the “License”). The License
+ shall be deemed effective as of the date CC0 was applied by Affirmer to the
+ Work. Should any part of the License for any reason be judged legally
+ invalid or ineffective under applicable law, such partial invalidity or
+ ineffectiveness shall not invalidate the remainder of the License, and in
+ such case Affirmer hereby affirms that he or she will not (i) exercise any
+ of his or her remaining Copyright and Related Rights in the Work or (ii)
+ assert any associated claims and causes of action with respect to the Work,
+ in either case contrary to Affirmer’s express Statement of Purpose.
+
+4. Limitations and Disclaimers.
+ 1. No trademark or patent rights held by Affirmer are waived, abandoned,
+ surrendered, licensed or otherwise affected by this document.
+ 2. Affirmer offers the Work as-is and makes no representations or warranties
+ of any kind concerning the Work, express, implied, statutory or
+ otherwise, including without limitation warranties of title,
+ merchantability, fitness for a particular purpose, non infringement, or
+ the absence of latent or other defects, accuracy, or the present or
+ absence of errors, whether or not discoverable, all to the greatest
+ extent permissible under applicable law.
+ 3. Affirmer disclaims responsibility for clearing rights of other persons
+ that may apply to the Work or any use thereof, including without
+ limitation any person’s Copyright and Related Rights in the Work.
+ Further, Affirmer disclaims responsibility for obtaining any necessary
+ consents, permissions or other rights required for any use of the Work.
+ 4. Affirmer understands and acknowledges that Creative Commons is not a
+ party to this document and has no duty or obligation with respect to this
+ CC0 or use of the Work.
+
+For more information, please see
+http://creativecommons.org/publicdomain/zero/1.0/.
diff --git a/plugins/postcss-logical-float-and-clear/README.md b/plugins/postcss-logical-float-and-clear/README.md
new file mode 100644
index 000000000..d0d7b7bc4
--- /dev/null
+++ b/plugins/postcss-logical-float-and-clear/README.md
@@ -0,0 +1,96 @@
+# PostCSS Logical Float And Clear [
][PostCSS]
+
+[
][npm-url] [
][css-url] [
][cli-url] [
][discord]
+
+[PostCSS Logical Float And Clear] lets you use logical, rather than physical, direction and dimension mappings in CSS, following the [CSS Logical Properties and Values] specification.
+
+```pcss
+.element {
+ clear: inline-start;
+ float: inline-end;
+}
+
+/* becomes */
+
+.element {
+ clear: left;
+ float: right;
+}
+```
+
+## Usage
+
+Add [PostCSS Logical Float And Clear] to your project:
+
+```bash
+npm install postcss @csstools/postcss-logical-float-and-clear --save-dev
+```
+
+Use it as a [PostCSS] plugin:
+
+```js
+const postcss = require('postcss');
+const postcssLogicalFloatAndClear = require('@csstools/postcss-logical-float-and-clear');
+
+postcss([
+ postcssLogicalFloatAndClear(/* pluginOptions */)
+]).process(YOUR_CSS /*, processOptions */);
+```
+
+[PostCSS Logical Float And Clear] runs in all Node environments, with special
+instructions for:
+
+- [Node](INSTALL.md#node)
+- [PostCSS CLI](INSTALL.md#postcss-cli)
+- [PostCSS Load Config](INSTALL.md#postcss-load-config)
+- [Webpack](INSTALL.md#webpack)
+- [Create React App](INSTALL.md#create-react-app)
+- [Next.js](INSTALL.md#nextjs)
+- [Gulp](INSTALL.md#gulp)
+- [Grunt](INSTALL.md#grunt)
+
+## Options
+
+### inlineDirection
+
+The `inlineDirection` option allows you to specify the direction of the inline axe. The default value is `left-to-right` respectively which would match any latin language.
+
+You might want to tweak these value if you are using a different writing system, such as Arabic, Hebrew or Chinese for example.
+
+```js
+postcssLogicalFloatAndClear({
+ inlineDirection: 'right-to-left'
+})
+```
+
+```pcss
+.element {
+ clear: inline-start;
+ float: inline-end;
+}
+
+/* becomes */
+
+.element {
+ clear: right;
+ float: left;
+}
+```
+
+Each direction must be one of the following:
+
+- `top-to-bottom`
+- `bottom-to-top`
+- `left-to-right`
+- `right-to-left`
+
+Please do not that transformations won't run if `inlineDirection` becomes vertical.
+
+[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
+[css-url]: https://cssdb.org/#float-clear-logical-values
+[discord]: https://discord.gg/bUadyRwkJS
+[npm-url]: https://www.npmjs.com/package/@csstools/postcss-logical-float-and-clear
+
+[PostCSS]: https://github.com/postcss/postcss
+[PostCSS Logical Float And Clear]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-float-and-clear
+[CSS Logical Properties and Values]: https://www.w3.org/TR/css-logical-1/#float-clear
diff --git a/plugins/postcss-logical-float-and-clear/dist/index.cjs b/plugins/postcss-logical-float-and-clear/dist/index.cjs
new file mode 100644
index 000000000..c073727d7
--- /dev/null
+++ b/plugins/postcss-logical-float-and-clear/dist/index.cjs
@@ -0,0 +1 @@
+"use strict";const t="inline-start",o="inline-end";var e,i;function directionFlowToAxes(t){switch(t){case e.TopToBottom:return[i.Top,i.Bottom];case e.BottomToTop:return[i.Bottom,i.Top];case e.RightToLeft:return[i.Right,i.Left];case e.LeftToRight:return[i.Left,i.Right]}}function cloneDeclaration(t,o,e){t.parent&&t.parent.some((t=>"decl"==t.type&&t.prop===e&&t.value===o))||t.cloneBefore({value:o,prop:e})}!function(t){t.TopToBottom="top-to-bottom",t.BottomToTop="bottom-to-top",t.RightToLeft="right-to-left",t.LeftToRight="left-to-right"}(e||(e={})),function(t){t.Top="top",t.Right="right",t.Bottom="bottom",t.Left="left"}(i||(i={}));const creator=i=>{const n=Object.assign({inlineDirection:e.LeftToRight},i),c=Object.values(e);if(!c.includes(n.inlineDirection))throw new Error(`[postcss-logical-float-and-clear] "inlineDirection" must be one of ${c.join(", ")}`);if(![e.LeftToRight,e.RightToLeft].includes(n.inlineDirection))return{postcssPlugin:"postcss-logical-float-and-clear",Once(){}};const[r,l]=directionFlowToAxes(n.inlineDirection),makeTransform=e=>{const i=e.value.toLowerCase();if(![t,o].includes(i))return;cloneDeclaration(e,i===t?r:l,e.prop),e.remove()};return{postcssPlugin:"postcss-logical-float-and-clear",Declaration:{float:makeTransform,clear:makeTransform}}};creator.postcss=!0,module.exports=creator;
diff --git a/plugins/postcss-logical-float-and-clear/dist/index.d.ts b/plugins/postcss-logical-float-and-clear/dist/index.d.ts
new file mode 100644
index 000000000..8faa333f6
--- /dev/null
+++ b/plugins/postcss-logical-float-and-clear/dist/index.d.ts
@@ -0,0 +1,9 @@
+import type { PluginCreator } from 'postcss';
+import { DirectionFlow } from './lib/types';
+/** postcss-logical-float-and-clear plugin options */
+export type pluginOptions = {
+ /** Sets the direction for inline. default: left-to-right */
+ inlineDirection?: DirectionFlow;
+};
+declare const creator: PluginCreator;
+export default creator;
diff --git a/plugins/postcss-logical-float-and-clear/dist/index.mjs b/plugins/postcss-logical-float-and-clear/dist/index.mjs
new file mode 100644
index 000000000..f05b65782
--- /dev/null
+++ b/plugins/postcss-logical-float-and-clear/dist/index.mjs
@@ -0,0 +1 @@
+const t="inline-start",o="inline-end";var e,n;function directionFlowToAxes(t){switch(t){case e.TopToBottom:return[n.Top,n.Bottom];case e.BottomToTop:return[n.Bottom,n.Top];case e.RightToLeft:return[n.Right,n.Left];case e.LeftToRight:return[n.Left,n.Right]}}function cloneDeclaration(t,o,e){t.parent&&t.parent.some((t=>"decl"==t.type&&t.prop===e&&t.value===o))||t.cloneBefore({value:o,prop:e})}!function(t){t.TopToBottom="top-to-bottom",t.BottomToTop="bottom-to-top",t.RightToLeft="right-to-left",t.LeftToRight="left-to-right"}(e||(e={})),function(t){t.Top="top",t.Right="right",t.Bottom="bottom",t.Left="left"}(n||(n={}));const creator=n=>{const i=Object.assign({inlineDirection:e.LeftToRight},n),c=Object.values(e);if(!c.includes(i.inlineDirection))throw new Error(`[postcss-logical-float-and-clear] "inlineDirection" must be one of ${c.join(", ")}`);if(![e.LeftToRight,e.RightToLeft].includes(i.inlineDirection))return{postcssPlugin:"postcss-logical-float-and-clear",Once(){}};const[r,l]=directionFlowToAxes(i.inlineDirection),makeTransform=e=>{const n=e.value.toLowerCase();if(![t,o].includes(n))return;cloneDeclaration(e,n===t?r:l,e.prop),e.remove()};return{postcssPlugin:"postcss-logical-float-and-clear",Declaration:{float:makeTransform,clear:makeTransform}}};creator.postcss=!0;export{creator as default};
diff --git a/plugins/postcss-logical-float-and-clear/dist/lib/clone-declaration.d.ts b/plugins/postcss-logical-float-and-clear/dist/lib/clone-declaration.d.ts
new file mode 100644
index 000000000..1503bf6f1
--- /dev/null
+++ b/plugins/postcss-logical-float-and-clear/dist/lib/clone-declaration.d.ts
@@ -0,0 +1,2 @@
+import type { Declaration } from 'postcss';
+export declare function cloneDeclaration(declaration: Declaration, value: string, prop: string): void;
diff --git a/plugins/postcss-logical-float-and-clear/dist/lib/types.d.ts b/plugins/postcss-logical-float-and-clear/dist/lib/types.d.ts
new file mode 100644
index 000000000..2b3c47f9b
--- /dev/null
+++ b/plugins/postcss-logical-float-and-clear/dist/lib/types.d.ts
@@ -0,0 +1,18 @@
+export declare const DirectionValues: {
+ BlockStart: string;
+ BlockEnd: string;
+ InlineStart: string;
+ InlineEnd: string;
+};
+export declare enum DirectionFlow {
+ TopToBottom = "top-to-bottom",
+ BottomToTop = "bottom-to-top",
+ RightToLeft = "right-to-left",
+ LeftToRight = "left-to-right"
+}
+export declare enum Axes {
+ Top = "top",
+ Right = "right",
+ Bottom = "bottom",
+ Left = "left"
+}
diff --git a/plugins/postcss-logical-float-and-clear/dist/utils/direction-flow-to-axes.d.ts b/plugins/postcss-logical-float-and-clear/dist/utils/direction-flow-to-axes.d.ts
new file mode 100644
index 000000000..2652d71d8
--- /dev/null
+++ b/plugins/postcss-logical-float-and-clear/dist/utils/direction-flow-to-axes.d.ts
@@ -0,0 +1,2 @@
+import { DirectionFlow, Axes } from '../lib/types';
+export declare function directionFlowToAxes(directionFlow: DirectionFlow): [Axes, Axes];
diff --git a/plugins/postcss-logical-float-and-clear/docs/README.md b/plugins/postcss-logical-float-and-clear/docs/README.md
new file mode 100644
index 000000000..b14f97731
--- /dev/null
+++ b/plugins/postcss-logical-float-and-clear/docs/README.md
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+[] lets you use logical, rather than physical, direction and dimension mappings in CSS, following the [CSS Logical Properties and Values] specification.
+
+```pcss
+
+
+/* becomes */
+
+
+```
+
+
+
+
+
+## Options
+
+### inlineDirection
+
+The `inlineDirection` option allows you to specify the direction of the inline axe. The default value is `left-to-right` respectively which would match any latin language.
+
+You might want to tweak these value if you are using a different writing system, such as Arabic, Hebrew or Chinese for example.
+
+```js
+({
+ inlineDirection: 'right-to-left'
+})
+```
+
+```pcss
+
+
+/* becomes */
+
+
+```
+
+Each direction must be one of the following:
+
+- `top-to-bottom`
+- `bottom-to-top`
+- `left-to-right`
+- `right-to-left`
+
+Please do note that transformations won't run if `inlineDirection` becomes vertical.
+
+
+[CSS Logical Properties and Values]:
diff --git a/plugins/postcss-logical-float-and-clear/package.json b/plugins/postcss-logical-float-and-clear/package.json
new file mode 100644
index 000000000..4e9105a3e
--- /dev/null
+++ b/plugins/postcss-logical-float-and-clear/package.json
@@ -0,0 +1,76 @@
+{
+ "name": "@csstools/postcss-logical-float-and-clear",
+ "description": "Use flow-relative (inline-start and inline-end) values for float and clear",
+ "version": "1.0.0",
+ "contributors": [
+ {
+ "name": "Antonio Laguna",
+ "email": "antonio@laguna.es",
+ "url": "https://antonio.laguna.es"
+ },
+ {
+ "name": "Romain Menke",
+ "email": "romainmenke@gmail.com"
+ }
+ ],
+ "license": "CC0-1.0",
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/csstools"
+ },
+ "engines": {
+ "node": "^14 || ^16 || >=18"
+ },
+ "main": "dist/index.cjs",
+ "module": "dist/index.mjs",
+ "types": "dist/index.d.ts",
+ "exports": {
+ ".": {
+ "import": "./dist/index.mjs",
+ "require": "./dist/index.cjs",
+ "default": "./dist/index.mjs"
+ }
+ },
+ "files": [
+ "CHANGELOG.md",
+ "LICENSE.md",
+ "README.md",
+ "dist"
+ ],
+ "peerDependencies": {
+ "postcss": "^8.4"
+ },
+ "scripts": {
+ "prebuild": "npm run clean",
+ "build": "rollup -c ../../rollup/default.mjs",
+ "clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true }); fs.mkdirSync('./dist');\"",
+ "docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs",
+ "lint": "npm run lint:eslint && npm run lint:package-json",
+ "lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern",
+ "lint:package-json": "node ../../.github/bin/format-package-json.mjs",
+ "prepublishOnly": "npm run clean && npm run build && npm run test",
+ "stryker": "stryker run --logLevel error",
+ "test": "node .tape.mjs && npm run test:exports",
+ "test:exports": "node ./test/_import.mjs && node ./test/_require.cjs",
+ "test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/csstools/postcss-plugins.git",
+ "directory": "plugins/postcss-logical-float-and-clear"
+ },
+ "keywords": [
+ "postcss-plugin"
+ ],
+ "csstools": {
+ "cssdbId": "float-clear-logical-values",
+ "exportName": "postcssLogicalFloatAndClear",
+ "humanReadableName": "PostCSS Logical Float And Clear",
+ "specUrl": "https://www.w3.org/TR/css-logical-1/#float-clear"
+ },
+ "volta": {
+ "extends": "../../package.json"
+ },
+ "homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-float-and-clear#readme",
+ "bugs": "https://github.com/csstools/postcss-plugins/issues"
+}
diff --git a/plugins/postcss-logical-float-and-clear/src/index.ts b/plugins/postcss-logical-float-and-clear/src/index.ts
new file mode 100644
index 000000000..29caabf91
--- /dev/null
+++ b/plugins/postcss-logical-float-and-clear/src/index.ts
@@ -0,0 +1,63 @@
+import type { PluginCreator, Declaration } from 'postcss';
+import { DirectionFlow, DirectionValues } from './lib/types';
+import { directionFlowToAxes } from './utils/direction-flow-to-axes';
+import { cloneDeclaration } from './lib/clone-declaration';
+
+/** postcss-logical-float-and-clear plugin options */
+export type pluginOptions = {
+ /** Sets the direction for inline. default: left-to-right */
+ inlineDirection?: DirectionFlow,
+};
+
+const creator: PluginCreator = (opts?: pluginOptions) => {
+ const options = Object.assign(
+ // Default options
+ {
+ inlineDirection: DirectionFlow.LeftToRight,
+ },
+ // Provided options
+ opts,
+ );
+
+ const directionValues = Object.values(DirectionFlow);
+ if (!directionValues.includes(options.inlineDirection)) {
+ throw new Error(`[postcss-logical-float-and-clear] "inlineDirection" must be one of ${directionValues.join(', ')}`);
+ }
+
+ const isHorizontal = [DirectionFlow.LeftToRight, DirectionFlow.RightToLeft].includes(options.inlineDirection);
+
+ if (!isHorizontal) {
+ return {
+ postcssPlugin: 'postcss-logical-float-and-clear',
+ Once() {
+ // noop
+ },
+ };
+ }
+
+ const [inlineStart, inlineEnd] = directionFlowToAxes(options.inlineDirection);
+ const makeTransform = (decl: Declaration) => {
+ const value = decl.value.toLowerCase();
+ const possibleValues = [DirectionValues.InlineStart, DirectionValues.InlineEnd];
+
+ if (!possibleValues.includes(value)) {
+ return;
+ }
+
+ const newValue = value === DirectionValues.InlineStart ? inlineStart : inlineEnd;
+ cloneDeclaration(decl, newValue, decl.prop);
+ decl.remove();
+ };
+
+ return {
+ postcssPlugin: 'postcss-logical-float-and-clear',
+ Declaration: {
+ 'float': makeTransform,
+ 'clear': makeTransform,
+ },
+ };
+};
+
+creator.postcss = true;
+
+export default creator;
diff --git a/plugins/postcss-logical-float-and-clear/src/lib/clone-declaration.ts b/plugins/postcss-logical-float-and-clear/src/lib/clone-declaration.ts
new file mode 100644
index 000000000..e78433f98
--- /dev/null
+++ b/plugins/postcss-logical-float-and-clear/src/lib/clone-declaration.ts
@@ -0,0 +1,15 @@
+import type { Declaration } from 'postcss';
+
+export function cloneDeclaration(
+ declaration: Declaration,
+ value: string,
+ prop: string,
+): void {
+ if (declaration.parent && declaration.parent.some((childNode) => {
+ return childNode.type == 'decl' && childNode.prop === prop && childNode.value === value;
+ })) {
+ return;
+ }
+
+ declaration.cloneBefore({ value, prop });
+}
diff --git a/plugins/postcss-logical-float-and-clear/src/lib/types.ts b/plugins/postcss-logical-float-and-clear/src/lib/types.ts
new file mode 100644
index 000000000..06807b9c0
--- /dev/null
+++ b/plugins/postcss-logical-float-and-clear/src/lib/types.ts
@@ -0,0 +1,19 @@
+export const DirectionValues = {
+ BlockStart: 'block-start',
+ BlockEnd: 'block-end',
+ InlineStart: 'inline-start',
+ InlineEnd: 'inline-end',
+};
+export enum DirectionFlow {
+ TopToBottom = 'top-to-bottom',
+ BottomToTop = 'bottom-to-top',
+ RightToLeft = 'right-to-left',
+ LeftToRight = 'left-to-right',
+}
+
+export enum Axes {
+ Top = 'top',
+ Right = 'right',
+ Bottom = 'bottom',
+ Left = 'left',
+}
diff --git a/plugins/postcss-logical-float-and-clear/src/utils/direction-flow-to-axes.ts b/plugins/postcss-logical-float-and-clear/src/utils/direction-flow-to-axes.ts
new file mode 100644
index 000000000..627a44479
--- /dev/null
+++ b/plugins/postcss-logical-float-and-clear/src/utils/direction-flow-to-axes.ts
@@ -0,0 +1,17 @@
+import { DirectionFlow, Axes } from '../lib/types';
+
+export function directionFlowToAxes(directionFlow: DirectionFlow): [Axes, Axes] {
+ switch (directionFlow) {
+ case DirectionFlow.TopToBottom:
+ return [Axes.Top, Axes.Bottom];
+
+ case DirectionFlow.BottomToTop:
+ return [Axes.Bottom, Axes.Top];
+
+ case DirectionFlow.RightToLeft:
+ return [Axes.Right, Axes.Left];
+
+ case DirectionFlow.LeftToRight:
+ return [Axes.Left, Axes.Right];
+ }
+}
diff --git a/plugins/postcss-logical-float-and-clear/test/_import.mjs b/plugins/postcss-logical-float-and-clear/test/_import.mjs
new file mode 100644
index 000000000..d7a7b04ab
--- /dev/null
+++ b/plugins/postcss-logical-float-and-clear/test/_import.mjs
@@ -0,0 +1,6 @@
+import assert from 'assert';
+import plugin from '@csstools/postcss-logical-float-and-clear';
+plugin();
+
+assert.ok(plugin.postcss, 'should have "postcss flag"');
+assert.equal(typeof plugin, 'function', 'should return a function');
diff --git a/plugins/postcss-logical-float-and-clear/test/_require.cjs b/plugins/postcss-logical-float-and-clear/test/_require.cjs
new file mode 100644
index 000000000..9db181ef0
--- /dev/null
+++ b/plugins/postcss-logical-float-and-clear/test/_require.cjs
@@ -0,0 +1,6 @@
+const assert = require('assert');
+const plugin = require('@csstools/postcss-logical-float-and-clear');
+plugin();
+
+assert.ok(plugin.postcss, 'should have "postcss flag"');
+assert.equal(typeof plugin, 'function', 'should return a function');
diff --git a/plugins/postcss-logical-float-and-clear/test/basic.css b/plugins/postcss-logical-float-and-clear/test/basic.css
new file mode 100644
index 000000000..0652e759b
--- /dev/null
+++ b/plugins/postcss-logical-float-and-clear/test/basic.css
@@ -0,0 +1,19 @@
+.foo {
+ clear: inline-start;
+ float: inline-end;
+}
+
+.foo {
+ clear: iNlInE-eNd;
+ float: iNlInE-sTaRt;
+}
+
+.foo {
+ clear: var(--inline-start);
+ float: var(--inline-end);
+}
+
+.foo {
+ clear: page;
+ float: contour;
+}
diff --git a/plugins/postcss-logical-float-and-clear/test/basic.expect.css b/plugins/postcss-logical-float-and-clear/test/basic.expect.css
new file mode 100644
index 000000000..a60b3c3ed
--- /dev/null
+++ b/plugins/postcss-logical-float-and-clear/test/basic.expect.css
@@ -0,0 +1,19 @@
+.foo {
+ clear: left;
+ float: right;
+}
+
+.foo {
+ clear: right;
+ float: left;
+}
+
+.foo {
+ clear: var(--inline-start);
+ float: var(--inline-end);
+}
+
+.foo {
+ clear: page;
+ float: contour;
+}
diff --git a/plugins/postcss-logical-float-and-clear/test/basic.hebrew.expect.css b/plugins/postcss-logical-float-and-clear/test/basic.hebrew.expect.css
new file mode 100644
index 000000000..b03e5b7fd
--- /dev/null
+++ b/plugins/postcss-logical-float-and-clear/test/basic.hebrew.expect.css
@@ -0,0 +1,19 @@
+.foo {
+ clear: right;
+ float: left;
+}
+
+.foo {
+ clear: left;
+ float: right;
+}
+
+.foo {
+ clear: var(--inline-start);
+ float: var(--inline-end);
+}
+
+.foo {
+ clear: page;
+ float: contour;
+}
diff --git a/plugins/postcss-logical-float-and-clear/test/basic.vertical.expect.css b/plugins/postcss-logical-float-and-clear/test/basic.vertical.expect.css
new file mode 100644
index 000000000..0652e759b
--- /dev/null
+++ b/plugins/postcss-logical-float-and-clear/test/basic.vertical.expect.css
@@ -0,0 +1,19 @@
+.foo {
+ clear: inline-start;
+ float: inline-end;
+}
+
+.foo {
+ clear: iNlInE-eNd;
+ float: iNlInE-sTaRt;
+}
+
+.foo {
+ clear: var(--inline-start);
+ float: var(--inline-end);
+}
+
+.foo {
+ clear: page;
+ float: contour;
+}
diff --git a/plugins/postcss-logical-float-and-clear/test/examples/example.css b/plugins/postcss-logical-float-and-clear/test/examples/example.css
new file mode 100644
index 000000000..86360cb3f
--- /dev/null
+++ b/plugins/postcss-logical-float-and-clear/test/examples/example.css
@@ -0,0 +1,4 @@
+.element {
+ clear: inline-start;
+ float: inline-end;
+}
diff --git a/plugins/postcss-logical-float-and-clear/test/examples/example.expect.css b/plugins/postcss-logical-float-and-clear/test/examples/example.expect.css
new file mode 100644
index 000000000..8cf546267
--- /dev/null
+++ b/plugins/postcss-logical-float-and-clear/test/examples/example.expect.css
@@ -0,0 +1,4 @@
+.element {
+ clear: left;
+ float: right;
+}
diff --git a/plugins/postcss-logical-float-and-clear/test/examples/example.hebrew.expect.css b/plugins/postcss-logical-float-and-clear/test/examples/example.hebrew.expect.css
new file mode 100644
index 000000000..d117dfb1f
--- /dev/null
+++ b/plugins/postcss-logical-float-and-clear/test/examples/example.hebrew.expect.css
@@ -0,0 +1,4 @@
+.element {
+ clear: right;
+ float: left;
+}
diff --git a/plugins/postcss-logical-float-and-clear/tsconfig.json b/plugins/postcss-logical-float-and-clear/tsconfig.json
new file mode 100644
index 000000000..e0d06239c
--- /dev/null
+++ b/plugins/postcss-logical-float-and-clear/tsconfig.json
@@ -0,0 +1,9 @@
+{
+ "extends": "../../tsconfig.json",
+ "compilerOptions": {
+ "outDir": "dist",
+ "declarationDir": "."
+ },
+ "include": ["./src/**/*"],
+ "exclude": ["dist"],
+}
diff --git a/plugins/postcss-logical/.tape.mjs b/plugins/postcss-logical/.tape.mjs
index a3b68dac4..7a830f62b 100644
--- a/plugins/postcss-logical/.tape.mjs
+++ b/plugins/postcss-logical/.tape.mjs
@@ -41,16 +41,6 @@ postcssTape(plugin)({
inlineDirection: 'top-to-bottom'
},
},
- 'float-and-clear': {
- message: 'supports logical "float" & "clear" properties',
- },
- 'float-and-clear:chinese ': {
- message: 'supports logical "float" & "clear" properties { blockDirection: "right-to-left", inlineDirection: "top-to-bottom" }',
- options: {
- blockDirection: 'right-to-left',
- inlineDirection: 'top-to-bottom'
- },
- },
'text-align': {
message: 'supports logical "text-align" property',
},
diff --git a/plugins/postcss-logical/CHANGELOG.md b/plugins/postcss-logical/CHANGELOG.md
index fc4b806b1..1245c8e58 100644
--- a/plugins/postcss-logical/CHANGELOG.md
+++ b/plugins/postcss-logical/CHANGELOG.md
@@ -7,6 +7,7 @@
- Added: Support for `block-size`, `inline-size` and `caption-side`.
- Removed: Support for the `logical` keyword within `margin`, `padding`, `border-width`, `border-style`, `border-color` properties. (major)
- Removed support for `preserve` option. Changes are no longer preserved (major).
+- Removed support for transforming `float` and `clear` properties. (major)
- Updated: The plugin now requires block and inline direction to be configured (uses `top-to-bottom` and `left-to-right` respectively) and no longer introduces `:dir` (major).
### 5.0.4 (February 5, 2022)
diff --git a/plugins/postcss-logical/README.md b/plugins/postcss-logical/README.md
index da937dabd..85e5b51ba 100644
--- a/plugins/postcss-logical/README.md
+++ b/plugins/postcss-logical/README.md
@@ -111,13 +111,7 @@ Each direction must be one of the following:
You can't mix two vertical directions or two horizontal directions so for example `top-to-bottom` and `right-to-left` are valid, but `top-to-bottom` and `bottom-to-top` are not.
-Please do not that some properties won't be transformed if `inlineDirection` becomes vertical.
-
-These are:
-
-* `float`
-* `clear`
-* `text-align`
+Please do not that `text-align` won't be transformed if `inlineDirection` becomes vertical.
[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
[css-url]: https://cssdb.org/#logical-properties-and-values
diff --git a/plugins/postcss-logical/dist/index.cjs b/plugins/postcss-logical/dist/index.cjs
index fcef23f36..443bbf5c3 100644
--- a/plugins/postcss-logical/dist/index.cjs
+++ b/plugins/postcss-logical/dist/index.cjs
@@ -1 +1 @@
-"use strict";var r,o,n=require("postcss-value-parser");!function(r){r.Block="block",r.Inline="inline"}(r||(r={})),function(r){r.Start="start",r.End="end"}(o||(o={}));const t={BlockStart:"block-start",BlockEnd:"block-end",InlineStart:"inline-start",InlineEnd:"inline-end"};var e,i;function cloneDeclaration(r,o,n){r.parent&&r.parent.some((r=>"decl"==r.type&&r.prop===n&&r.value===o))||r.cloneBefore({value:o,prop:n})}function parseValueCouple(r){const o=n(r.value).nodes.filter((r=>"space"!==r.type));if(o.length>2){const n=`[postcss-logical] Invalid number of values for ${r.prop}. Found ${o.length} values, expected 1 or 2.`;throw r.error(n)}let t,e;return 1===o.length&&(t=n.stringify(o[0]),e=t),2===o.length&&(t=n.stringify(o[0]),e=n.stringify(o[1])),[t,e]}function transformBorder(r,o){return n=>(cloneDeclaration(n,n.value,`border-${o}-${r}`),!0)}function transformBorderProperty(r,o){return n=>{const[t,e]=o,[i,l]=parseValueCouple(n);return cloneDeclaration(n,i,`border-${t}-${r}`),cloneDeclaration(n,l,`border-${e}-${r}`),!0}}function transformBorderShorthand(r){return o=>(r.forEach((r=>cloneDeclaration(o,o.value,`border-${r}`))),!0)}function transformBorderRadius(r){return o=>{let n;switch(o.prop.toLowerCase()){case"border-start-start-radius":n=`border-${r.inlineIsHorizontal?`${r.block[0]}-${r.inline[0]}`:`${r.inline[0]}-${r.block[0]}`}-radius`;break;case"border-start-end-radius":n=`border-${r.inlineIsHorizontal?`${r.block[0]}-${r.inline[1]}`:`${r.inline[1]}-${r.block[0]}`}-radius`;break;case"border-end-start-radius":n=`border-${r.inlineIsHorizontal?`${r.block[1]}-${r.inline[0]}`:`${r.inline[0]}-${r.block[1]}`}-radius`;break;case"border-end-end-radius":n=`border-${r.inlineIsHorizontal?`${r.block[1]}-${r.inline[1]}`:`${r.inline[1]}-${r.block[1]}`}-radius`;break}return cloneDeclaration(o,o.value,n),!0}}function transformLogicalSize(r){return o=>{const{value:n}=o,t=r.inlineIsHorizontal?"width":"height",e=r.inlineIsHorizontal?"height":"width";return cloneDeclaration(o,n,"block-size"===o.prop?e:t),!0}}function transformOffset(r){return o=>(cloneDeclaration(o,o.value,r),!0)}function transformOffsetShorthand(r){return o=>{const[n,t]=r,[e,i]=parseValueCouple(o);return cloneDeclaration(o,e,n),cloneDeclaration(o,i,t),!0}}function transformResize(r){return o=>{const{prop:t,value:e}=o,i=n(e),l=r.inlineIsHorizontal?"horizontal":"vertical",a=r.inlineIsHorizontal?"vertical":"horizontal";i.nodes.forEach((r=>{if("word"===r.type){const o=r.value.toLowerCase();if("inline"===o)return void(r.value=l);"block"===o&&(r.value=a)}}));const s=i.toString();return s!==e&&(cloneDeclaration(o,s,t),!0)}}function transformSide(r,o){return n=>(cloneDeclaration(n,n.value,`${r}-${o}`),!0)}function transformSideShorthand(r,o){return n=>{const[t,e]=o,[i,l]=parseValueCouple(n);return cloneDeclaration(n,i,`${r}-${t}`),cloneDeclaration(n,l,`${r}-${e}`),!0}}function logicalToPhysical(r,o){const[n,e]=o.block,[i,l]=o.inline;switch(r){case t.BlockStart:return n;case t.BlockEnd:return e;case t.InlineStart:return i;case t.InlineEnd:return l}}function doTransform(r,o,t){const{prop:e,value:i}=r,l=n(i);l.nodes.forEach((r=>{if("word"===r.type){const n=r.value.toLowerCase();o.includes(n)&&(r.value=logicalToPhysical(n,t))}}));const a=l.toString();return a!==i&&(cloneDeclaration(r,a,e),!0)}function transformValueWithSingleDirection(o,n){return e=>{let i;return i=o===r.Block?[t.BlockStart,t.BlockEnd]:[t.InlineStart,t.InlineEnd],doTransform(e,i,n)}}function directionFlowToAxes(r){switch(r){case e.TopToBottom:return[i.Top,i.Bottom];case e.BottomToTop:return[i.Bottom,i.Top];case e.RightToLeft:return[i.Right,i.Left];case e.LeftToRight:return[i.Left,i.Right]}}!function(r){r.TopToBottom="top-to-bottom",r.BottomToTop="bottom-to-top",r.RightToLeft="right-to-left",r.LeftToRight="left-to-right"}(e||(e={})),function(r){r.Top="top",r.Right="right",r.Bottom="bottom",r.Left="left"}(i||(i={}));const creator=l=>{const a=Object.assign({blockDirection:e.TopToBottom,inlineDirection:e.LeftToRight},l),s=Object.values(e);if(!s.includes(a.blockDirection))throw new Error(`[postcss-logical] "blockDirection" must be one of ${s.join(", ")}`);if(!s.includes(a.inlineDirection))throw new Error(`[postcss-logical] "inlineDirection" must be one of ${s.join(", ")}`);const[c,d]=directionFlowToAxes(a.blockDirection),[f,u]=directionFlowToAxes(a.inlineDirection);if(!Object.values(i).every((r=>[c,d,f,u].includes(r))))throw new Error('[postcss-logical] "blockDirection" and "inlineDirection" must be on separate axes');const b={block:[c,d],inline:[f,u],inlineIsHorizontal:[e.LeftToRight,e.RightToLeft].includes(a.inlineDirection)},makeTransform=r=>(o,{result:n})=>{if(!r)return;let t=!1;try{t=r(o)}catch(r){return void o.warn(n,r.message)}t&&o.remove()};return{postcssPlugin:"postcss-logical",Declaration:{"caption-side":makeTransform((h=b,r=>doTransform(r,Object.values(t),h))),float:makeTransform(b.inlineIsHorizontal?transformValueWithSingleDirection(r.Inline,b):null),clear:makeTransform(b.inlineIsHorizontal?transformValueWithSingleDirection(r.Inline,b):null),"text-align":makeTransform(b.inlineIsHorizontal?(m=b.inline,r=>{const{prop:t,value:e}=r,i=n(e),[l,a]=m;i.nodes.forEach((r=>{if("word"===r.type){const n=r.value.toLowerCase();if(n===o.End)return void(r.value=a);n===o.Start&&(r.value=l)}}));const s=i.toString();return s!==e&&(cloneDeclaration(r,s,t),!0)}):null),resize:makeTransform(transformResize(b)),"block-size":makeTransform(transformLogicalSize(b)),"inline-size":makeTransform(transformLogicalSize(b)),"margin-block-start":makeTransform(transformSide("margin",c)),"margin-block-end":makeTransform(transformSide("margin",d)),"margin-inline-start":makeTransform(transformSide("margin",f)),"margin-inline-end":makeTransform(transformSide("margin",u)),"margin-block":makeTransform(transformSideShorthand("margin",b.block)),"margin-inline":makeTransform(transformSideShorthand("margin",b.inline)),"inset-block":makeTransform(transformOffsetShorthand(b.block)),"inset-block-start":makeTransform(transformOffset(c)),"inset-block-end":makeTransform(transformOffset(d)),"inset-inline":makeTransform(transformOffsetShorthand(b.inline)),"inset-inline-start":makeTransform(transformOffset(f)),"inset-inline-end":makeTransform(transformOffset(u)),inset:makeTransform((r=>{const o=n(r.value).nodes.filter((r=>"space"!==r.type&&"comment"!==r.type));if(o.length>4){const n=`[postcss-logical] Invalid number of values for ${r.prop}. Found ${o.length} values, expected up to 4 values.`;throw r.error(n)}const t={top:"",right:"",bottom:"",left:""};return 1===o.length&&(t.top=n.stringify(o[0]),t.right=t.top,t.bottom=t.top,t.left=t.top),2===o.length&&(t.top=n.stringify(o[0]),t.right=n.stringify(o[1]),t.bottom=t.top,t.left=t.right),3===o.length&&(t.top=n.stringify(o[0]),t.right=n.stringify(o[1]),t.left=t.right,t.bottom=n.stringify(o[2])),4===o.length&&(t.top=n.stringify(o[0]),t.right=n.stringify(o[1]),t.bottom=n.stringify(o[2]),t.left=n.stringify(o[3])),Object.keys(t).forEach((o=>{cloneDeclaration(r,t[o],o)})),!0})),"padding-block-start":makeTransform(transformSide("padding",c)),"padding-block-end":makeTransform(transformSide("padding",d)),"padding-inline-start":makeTransform(transformSide("padding",f)),"padding-inline-end":makeTransform(transformSide("padding",u)),"padding-block":makeTransform(transformSideShorthand("padding",b.block)),"padding-inline":makeTransform(transformSideShorthand("padding",b.inline)),"border-block-start-width":makeTransform(transformBorder("width",c)),"border-block-end-width":makeTransform(transformBorder("width",d)),"border-inline-start-width":makeTransform(transformBorder("width",f)),"border-inline-end-width":makeTransform(transformBorder("width",u)),"border-block-width":makeTransform(transformBorderProperty("width",b.block)),"border-inline-width":makeTransform(transformBorderProperty("width",b.inline)),"border-block-start-style":makeTransform(transformBorder("style",c)),"border-block-end-style":makeTransform(transformBorder("style",d)),"border-inline-start-style":makeTransform(transformBorder("style",f)),"border-inline-end-style":makeTransform(transformBorder("style",u)),"border-block-style":makeTransform(transformBorderProperty("style",b.block)),"border-inline-style":makeTransform(transformBorderProperty("style",b.inline)),"border-block-start-color":makeTransform(transformBorder("color",c)),"border-block-end-color":makeTransform(transformBorder("color",d)),"border-inline-start-color":makeTransform(transformBorder("color",f)),"border-inline-end-color":makeTransform(transformBorder("color",u)),"border-block-color":makeTransform(transformBorderProperty("color",b.block)),"border-inline-color":makeTransform(transformBorderProperty("color",b.inline)),"border-block":makeTransform(transformBorderShorthand(b.block)),"border-block-start":makeTransform(transformBorderShorthand([c])),"border-block-end":makeTransform(transformBorderShorthand([d])),"border-inline":makeTransform(transformBorderShorthand(b.inline)),"border-inline-start":makeTransform(transformBorderShorthand([f])),"border-inline-end":makeTransform(transformBorderShorthand([u])),"border-start-start-radius":makeTransform(transformBorderRadius(b)),"border-start-end-radius":makeTransform(transformBorderRadius(b)),"border-end-start-radius":makeTransform(transformBorderRadius(b)),"border-end-end-radius":makeTransform(transformBorderRadius(b))}};var m,h};creator.postcss=!0,module.exports=creator;
+"use strict";var r,o,n=require("postcss-value-parser");!function(r){r.Block="block",r.Inline="inline"}(r||(r={})),function(r){r.Start="start",r.End="end"}(o||(o={}));const t={BlockStart:"block-start",BlockEnd:"block-end",InlineStart:"inline-start",InlineEnd:"inline-end"};var e,i;function cloneDeclaration(r,o,n){r.parent&&r.parent.some((r=>"decl"==r.type&&r.prop===n&&r.value===o))||r.cloneBefore({value:o,prop:n})}function parseValueCouple(r){const o=n(r.value).nodes.filter((r=>"space"!==r.type));if(o.length>2){const n=`[postcss-logical] Invalid number of values for ${r.prop}. Found ${o.length} values, expected 1 or 2.`;throw r.error(n)}let t,e;return 1===o.length&&(t=n.stringify(o[0]),e=t),2===o.length&&(t=n.stringify(o[0]),e=n.stringify(o[1])),[t,e]}function transformBorder(r,o){return n=>(cloneDeclaration(n,n.value,`border-${o}-${r}`),!0)}function transformBorderProperty(r,o){return n=>{const[t,e]=o,[i,a]=parseValueCouple(n);return cloneDeclaration(n,i,`border-${t}-${r}`),cloneDeclaration(n,a,`border-${e}-${r}`),!0}}function transformBorderShorthand(r){return o=>(r.forEach((r=>cloneDeclaration(o,o.value,`border-${r}`))),!0)}function transformBorderRadius(r){return o=>{let n;switch(o.prop.toLowerCase()){case"border-start-start-radius":n=`border-${r.inlineIsHorizontal?`${r.block[0]}-${r.inline[0]}`:`${r.inline[0]}-${r.block[0]}`}-radius`;break;case"border-start-end-radius":n=`border-${r.inlineIsHorizontal?`${r.block[0]}-${r.inline[1]}`:`${r.inline[1]}-${r.block[0]}`}-radius`;break;case"border-end-start-radius":n=`border-${r.inlineIsHorizontal?`${r.block[1]}-${r.inline[0]}`:`${r.inline[0]}-${r.block[1]}`}-radius`;break;case"border-end-end-radius":n=`border-${r.inlineIsHorizontal?`${r.block[1]}-${r.inline[1]}`:`${r.inline[1]}-${r.block[1]}`}-radius`;break}return cloneDeclaration(o,o.value,n),!0}}function transformLogicalSize(r){return o=>{const{value:n}=o,t=r.inlineIsHorizontal?"width":"height",e=r.inlineIsHorizontal?"height":"width";return cloneDeclaration(o,n,"block-size"===o.prop?e:t),!0}}function transformOffset(r){return o=>(cloneDeclaration(o,o.value,r),!0)}function transformOffsetShorthand(r){return o=>{const[n,t]=r,[e,i]=parseValueCouple(o);return cloneDeclaration(o,e,n),cloneDeclaration(o,i,t),!0}}function transformResize(r){return o=>{const{prop:t,value:e}=o,i=n(e),a=r.inlineIsHorizontal?"horizontal":"vertical",l=r.inlineIsHorizontal?"vertical":"horizontal";i.nodes.forEach((r=>{if("word"===r.type){const o=r.value.toLowerCase();if("inline"===o)return void(r.value=a);"block"===o&&(r.value=l)}}));const s=i.toString();return s!==e&&(cloneDeclaration(o,s,t),!0)}}function transformSide(r,o){return n=>(cloneDeclaration(n,n.value,`${r}-${o}`),!0)}function transformSideShorthand(r,o){return n=>{const[t,e]=o,[i,a]=parseValueCouple(n);return cloneDeclaration(n,i,`${r}-${t}`),cloneDeclaration(n,a,`${r}-${e}`),!0}}function logicalToPhysical(r,o){const[n,e]=o.block,[i,a]=o.inline;switch(r){case t.BlockStart:return n;case t.BlockEnd:return e;case t.InlineStart:return i;case t.InlineEnd:return a}}function doTransform(r,o,t){const{prop:e,value:i}=r,a=n(i);a.nodes.forEach((r=>{if("word"===r.type){const n=r.value.toLowerCase();o.includes(n)&&(r.value=logicalToPhysical(n,t))}}));const l=a.toString();return l!==i&&(cloneDeclaration(r,l,e),!0)}function directionFlowToAxes(r){switch(r){case e.TopToBottom:return[i.Top,i.Bottom];case e.BottomToTop:return[i.Bottom,i.Top];case e.RightToLeft:return[i.Right,i.Left];case e.LeftToRight:return[i.Left,i.Right]}}!function(r){r.TopToBottom="top-to-bottom",r.BottomToTop="bottom-to-top",r.RightToLeft="right-to-left",r.LeftToRight="left-to-right"}(e||(e={})),function(r){r.Top="top",r.Right="right",r.Bottom="bottom",r.Left="left"}(i||(i={}));const creator=r=>{const a=Object.assign({blockDirection:e.TopToBottom,inlineDirection:e.LeftToRight},r),l=Object.values(e);if(!l.includes(a.blockDirection))throw new Error(`[postcss-logical] "blockDirection" must be one of ${l.join(", ")}`);if(!l.includes(a.inlineDirection))throw new Error(`[postcss-logical] "inlineDirection" must be one of ${l.join(", ")}`);const[s,c]=directionFlowToAxes(a.blockDirection),[d,f]=directionFlowToAxes(a.inlineDirection);if(!Object.values(i).every((r=>[s,c,d,f].includes(r))))throw new Error('[postcss-logical] "blockDirection" and "inlineDirection" must be on separate axes');const u={block:[s,c],inline:[d,f],inlineIsHorizontal:[e.LeftToRight,e.RightToLeft].includes(a.inlineDirection)},makeTransform=r=>(o,{result:n})=>{if(!r)return;let t=!1;try{t=r(o)}catch(r){return void o.warn(n,r.message)}t&&o.remove()};return{postcssPlugin:"postcss-logical",Declaration:{"caption-side":makeTransform((m=u,r=>doTransform(r,Object.values(t),m))),"text-align":makeTransform(u.inlineIsHorizontal?(b=u.inline,r=>{const{prop:t,value:e}=r,i=n(e),[a,l]=b;i.nodes.forEach((r=>{if("word"===r.type){const n=r.value.toLowerCase();if(n===o.End)return void(r.value=l);n===o.Start&&(r.value=a)}}));const s=i.toString();return s!==e&&(cloneDeclaration(r,s,t),!0)}):null),resize:makeTransform(transformResize(u)),"block-size":makeTransform(transformLogicalSize(u)),"inline-size":makeTransform(transformLogicalSize(u)),"margin-block-start":makeTransform(transformSide("margin",s)),"margin-block-end":makeTransform(transformSide("margin",c)),"margin-inline-start":makeTransform(transformSide("margin",d)),"margin-inline-end":makeTransform(transformSide("margin",f)),"margin-block":makeTransform(transformSideShorthand("margin",u.block)),"margin-inline":makeTransform(transformSideShorthand("margin",u.inline)),"inset-block":makeTransform(transformOffsetShorthand(u.block)),"inset-block-start":makeTransform(transformOffset(s)),"inset-block-end":makeTransform(transformOffset(c)),"inset-inline":makeTransform(transformOffsetShorthand(u.inline)),"inset-inline-start":makeTransform(transformOffset(d)),"inset-inline-end":makeTransform(transformOffset(f)),inset:makeTransform((r=>{const o=n(r.value).nodes.filter((r=>"space"!==r.type&&"comment"!==r.type));if(o.length>4){const n=`[postcss-logical] Invalid number of values for ${r.prop}. Found ${o.length} values, expected up to 4 values.`;throw r.error(n)}const t={top:"",right:"",bottom:"",left:""};return 1===o.length&&(t.top=n.stringify(o[0]),t.right=t.top,t.bottom=t.top,t.left=t.top),2===o.length&&(t.top=n.stringify(o[0]),t.right=n.stringify(o[1]),t.bottom=t.top,t.left=t.right),3===o.length&&(t.top=n.stringify(o[0]),t.right=n.stringify(o[1]),t.left=t.right,t.bottom=n.stringify(o[2])),4===o.length&&(t.top=n.stringify(o[0]),t.right=n.stringify(o[1]),t.bottom=n.stringify(o[2]),t.left=n.stringify(o[3])),Object.keys(t).forEach((o=>{cloneDeclaration(r,t[o],o)})),!0})),"padding-block-start":makeTransform(transformSide("padding",s)),"padding-block-end":makeTransform(transformSide("padding",c)),"padding-inline-start":makeTransform(transformSide("padding",d)),"padding-inline-end":makeTransform(transformSide("padding",f)),"padding-block":makeTransform(transformSideShorthand("padding",u.block)),"padding-inline":makeTransform(transformSideShorthand("padding",u.inline)),"border-block-start-width":makeTransform(transformBorder("width",s)),"border-block-end-width":makeTransform(transformBorder("width",c)),"border-inline-start-width":makeTransform(transformBorder("width",d)),"border-inline-end-width":makeTransform(transformBorder("width",f)),"border-block-width":makeTransform(transformBorderProperty("width",u.block)),"border-inline-width":makeTransform(transformBorderProperty("width",u.inline)),"border-block-start-style":makeTransform(transformBorder("style",s)),"border-block-end-style":makeTransform(transformBorder("style",c)),"border-inline-start-style":makeTransform(transformBorder("style",d)),"border-inline-end-style":makeTransform(transformBorder("style",f)),"border-block-style":makeTransform(transformBorderProperty("style",u.block)),"border-inline-style":makeTransform(transformBorderProperty("style",u.inline)),"border-block-start-color":makeTransform(transformBorder("color",s)),"border-block-end-color":makeTransform(transformBorder("color",c)),"border-inline-start-color":makeTransform(transformBorder("color",d)),"border-inline-end-color":makeTransform(transformBorder("color",f)),"border-block-color":makeTransform(transformBorderProperty("color",u.block)),"border-inline-color":makeTransform(transformBorderProperty("color",u.inline)),"border-block":makeTransform(transformBorderShorthand(u.block)),"border-block-start":makeTransform(transformBorderShorthand([s])),"border-block-end":makeTransform(transformBorderShorthand([c])),"border-inline":makeTransform(transformBorderShorthand(u.inline)),"border-inline-start":makeTransform(transformBorderShorthand([d])),"border-inline-end":makeTransform(transformBorderShorthand([f])),"border-start-start-radius":makeTransform(transformBorderRadius(u)),"border-start-end-radius":makeTransform(transformBorderRadius(u)),"border-end-start-radius":makeTransform(transformBorderRadius(u)),"border-end-end-radius":makeTransform(transformBorderRadius(u))}};var b,m};creator.postcss=!0,module.exports=creator;
diff --git a/plugins/postcss-logical/dist/index.d.ts b/plugins/postcss-logical/dist/index.d.ts
index 19120b2c4..8e84fd80d 100644
--- a/plugins/postcss-logical/dist/index.d.ts
+++ b/plugins/postcss-logical/dist/index.d.ts
@@ -1,6 +1,6 @@
import type { PluginCreator } from 'postcss';
import { DirectionFlow } from './lib/types';
-/** postcss-overflow-shorthand plugin options */
+/** postcss-logical plugin options */
export type pluginOptions = {
/** Sets the direction for block. default: top-to-bottom */
blockDirection?: DirectionFlow;
diff --git a/plugins/postcss-logical/dist/index.mjs b/plugins/postcss-logical/dist/index.mjs
index 316e23dbd..6526aaeae 100644
--- a/plugins/postcss-logical/dist/index.mjs
+++ b/plugins/postcss-logical/dist/index.mjs
@@ -1 +1 @@
-import r from"postcss-value-parser";var o,n;!function(r){r.Block="block",r.Inline="inline"}(o||(o={})),function(r){r.Start="start",r.End="end"}(n||(n={}));const t={BlockStart:"block-start",BlockEnd:"block-end",InlineStart:"inline-start",InlineEnd:"inline-end"};var e,i;function cloneDeclaration(r,o,n){r.parent&&r.parent.some((r=>"decl"==r.type&&r.prop===n&&r.value===o))||r.cloneBefore({value:o,prop:n})}function parseValueCouple(o){const n=r(o.value).nodes.filter((r=>"space"!==r.type));if(n.length>2){const r=`[postcss-logical] Invalid number of values for ${o.prop}. Found ${n.length} values, expected 1 or 2.`;throw o.error(r)}let t,e;return 1===n.length&&(t=r.stringify(n[0]),e=t),2===n.length&&(t=r.stringify(n[0]),e=r.stringify(n[1])),[t,e]}function transformBorder(r,o){return n=>(cloneDeclaration(n,n.value,`border-${o}-${r}`),!0)}function transformBorderProperty(r,o){return n=>{const[t,e]=o,[i,l]=parseValueCouple(n);return cloneDeclaration(n,i,`border-${t}-${r}`),cloneDeclaration(n,l,`border-${e}-${r}`),!0}}function transformBorderShorthand(r){return o=>(r.forEach((r=>cloneDeclaration(o,o.value,`border-${r}`))),!0)}function transformBorderRadius(r){return o=>{let n;switch(o.prop.toLowerCase()){case"border-start-start-radius":n=`border-${r.inlineIsHorizontal?`${r.block[0]}-${r.inline[0]}`:`${r.inline[0]}-${r.block[0]}`}-radius`;break;case"border-start-end-radius":n=`border-${r.inlineIsHorizontal?`${r.block[0]}-${r.inline[1]}`:`${r.inline[1]}-${r.block[0]}`}-radius`;break;case"border-end-start-radius":n=`border-${r.inlineIsHorizontal?`${r.block[1]}-${r.inline[0]}`:`${r.inline[0]}-${r.block[1]}`}-radius`;break;case"border-end-end-radius":n=`border-${r.inlineIsHorizontal?`${r.block[1]}-${r.inline[1]}`:`${r.inline[1]}-${r.block[1]}`}-radius`;break}return cloneDeclaration(o,o.value,n),!0}}function transformLogicalSize(r){return o=>{const{value:n}=o,t=r.inlineIsHorizontal?"width":"height",e=r.inlineIsHorizontal?"height":"width";return cloneDeclaration(o,n,"block-size"===o.prop?e:t),!0}}function transformOffset(r){return o=>(cloneDeclaration(o,o.value,r),!0)}function transformOffsetShorthand(r){return o=>{const[n,t]=r,[e,i]=parseValueCouple(o);return cloneDeclaration(o,e,n),cloneDeclaration(o,i,t),!0}}function transformResize(o){return n=>{const{prop:t,value:e}=n,i=r(e),l=o.inlineIsHorizontal?"horizontal":"vertical",a=o.inlineIsHorizontal?"vertical":"horizontal";i.nodes.forEach((r=>{if("word"===r.type){const o=r.value.toLowerCase();if("inline"===o)return void(r.value=l);"block"===o&&(r.value=a)}}));const s=i.toString();return s!==e&&(cloneDeclaration(n,s,t),!0)}}function transformSide(r,o){return n=>(cloneDeclaration(n,n.value,`${r}-${o}`),!0)}function transformSideShorthand(r,o){return n=>{const[t,e]=o,[i,l]=parseValueCouple(n);return cloneDeclaration(n,i,`${r}-${t}`),cloneDeclaration(n,l,`${r}-${e}`),!0}}function logicalToPhysical(r,o){const[n,e]=o.block,[i,l]=o.inline;switch(r){case t.BlockStart:return n;case t.BlockEnd:return e;case t.InlineStart:return i;case t.InlineEnd:return l}}function doTransform(o,n,t){const{prop:e,value:i}=o,l=r(i);l.nodes.forEach((r=>{if("word"===r.type){const o=r.value.toLowerCase();n.includes(o)&&(r.value=logicalToPhysical(o,t))}}));const a=l.toString();return a!==i&&(cloneDeclaration(o,a,e),!0)}function transformValueWithSingleDirection(r,n){return e=>{let i;return i=r===o.Block?[t.BlockStart,t.BlockEnd]:[t.InlineStart,t.InlineEnd],doTransform(e,i,n)}}function directionFlowToAxes(r){switch(r){case e.TopToBottom:return[i.Top,i.Bottom];case e.BottomToTop:return[i.Bottom,i.Top];case e.RightToLeft:return[i.Right,i.Left];case e.LeftToRight:return[i.Left,i.Right]}}!function(r){r.TopToBottom="top-to-bottom",r.BottomToTop="bottom-to-top",r.RightToLeft="right-to-left",r.LeftToRight="left-to-right"}(e||(e={})),function(r){r.Top="top",r.Right="right",r.Bottom="bottom",r.Left="left"}(i||(i={}));const creator=l=>{const a=Object.assign({blockDirection:e.TopToBottom,inlineDirection:e.LeftToRight},l),s=Object.values(e);if(!s.includes(a.blockDirection))throw new Error(`[postcss-logical] "blockDirection" must be one of ${s.join(", ")}`);if(!s.includes(a.inlineDirection))throw new Error(`[postcss-logical] "inlineDirection" must be one of ${s.join(", ")}`);const[c,d]=directionFlowToAxes(a.blockDirection),[f,u]=directionFlowToAxes(a.inlineDirection);if(!Object.values(i).every((r=>[c,d,f,u].includes(r))))throw new Error('[postcss-logical] "blockDirection" and "inlineDirection" must be on separate axes');const b={block:[c,d],inline:[f,u],inlineIsHorizontal:[e.LeftToRight,e.RightToLeft].includes(a.inlineDirection)},makeTransform=r=>(o,{result:n})=>{if(!r)return;let t=!1;try{t=r(o)}catch(r){return void o.warn(n,r.message)}t&&o.remove()};return{postcssPlugin:"postcss-logical",Declaration:{"caption-side":makeTransform((h=b,r=>doTransform(r,Object.values(t),h))),float:makeTransform(b.inlineIsHorizontal?transformValueWithSingleDirection(o.Inline,b):null),clear:makeTransform(b.inlineIsHorizontal?transformValueWithSingleDirection(o.Inline,b):null),"text-align":makeTransform(b.inlineIsHorizontal?(m=b.inline,o=>{const{prop:t,value:e}=o,i=r(e),[l,a]=m;i.nodes.forEach((r=>{if("word"===r.type){const o=r.value.toLowerCase();if(o===n.End)return void(r.value=a);o===n.Start&&(r.value=l)}}));const s=i.toString();return s!==e&&(cloneDeclaration(o,s,t),!0)}):null),resize:makeTransform(transformResize(b)),"block-size":makeTransform(transformLogicalSize(b)),"inline-size":makeTransform(transformLogicalSize(b)),"margin-block-start":makeTransform(transformSide("margin",c)),"margin-block-end":makeTransform(transformSide("margin",d)),"margin-inline-start":makeTransform(transformSide("margin",f)),"margin-inline-end":makeTransform(transformSide("margin",u)),"margin-block":makeTransform(transformSideShorthand("margin",b.block)),"margin-inline":makeTransform(transformSideShorthand("margin",b.inline)),"inset-block":makeTransform(transformOffsetShorthand(b.block)),"inset-block-start":makeTransform(transformOffset(c)),"inset-block-end":makeTransform(transformOffset(d)),"inset-inline":makeTransform(transformOffsetShorthand(b.inline)),"inset-inline-start":makeTransform(transformOffset(f)),"inset-inline-end":makeTransform(transformOffset(u)),inset:makeTransform((o=>{const n=r(o.value).nodes.filter((r=>"space"!==r.type&&"comment"!==r.type));if(n.length>4){const r=`[postcss-logical] Invalid number of values for ${o.prop}. Found ${n.length} values, expected up to 4 values.`;throw o.error(r)}const t={top:"",right:"",bottom:"",left:""};return 1===n.length&&(t.top=r.stringify(n[0]),t.right=t.top,t.bottom=t.top,t.left=t.top),2===n.length&&(t.top=r.stringify(n[0]),t.right=r.stringify(n[1]),t.bottom=t.top,t.left=t.right),3===n.length&&(t.top=r.stringify(n[0]),t.right=r.stringify(n[1]),t.left=t.right,t.bottom=r.stringify(n[2])),4===n.length&&(t.top=r.stringify(n[0]),t.right=r.stringify(n[1]),t.bottom=r.stringify(n[2]),t.left=r.stringify(n[3])),Object.keys(t).forEach((r=>{cloneDeclaration(o,t[r],r)})),!0})),"padding-block-start":makeTransform(transformSide("padding",c)),"padding-block-end":makeTransform(transformSide("padding",d)),"padding-inline-start":makeTransform(transformSide("padding",f)),"padding-inline-end":makeTransform(transformSide("padding",u)),"padding-block":makeTransform(transformSideShorthand("padding",b.block)),"padding-inline":makeTransform(transformSideShorthand("padding",b.inline)),"border-block-start-width":makeTransform(transformBorder("width",c)),"border-block-end-width":makeTransform(transformBorder("width",d)),"border-inline-start-width":makeTransform(transformBorder("width",f)),"border-inline-end-width":makeTransform(transformBorder("width",u)),"border-block-width":makeTransform(transformBorderProperty("width",b.block)),"border-inline-width":makeTransform(transformBorderProperty("width",b.inline)),"border-block-start-style":makeTransform(transformBorder("style",c)),"border-block-end-style":makeTransform(transformBorder("style",d)),"border-inline-start-style":makeTransform(transformBorder("style",f)),"border-inline-end-style":makeTransform(transformBorder("style",u)),"border-block-style":makeTransform(transformBorderProperty("style",b.block)),"border-inline-style":makeTransform(transformBorderProperty("style",b.inline)),"border-block-start-color":makeTransform(transformBorder("color",c)),"border-block-end-color":makeTransform(transformBorder("color",d)),"border-inline-start-color":makeTransform(transformBorder("color",f)),"border-inline-end-color":makeTransform(transformBorder("color",u)),"border-block-color":makeTransform(transformBorderProperty("color",b.block)),"border-inline-color":makeTransform(transformBorderProperty("color",b.inline)),"border-block":makeTransform(transformBorderShorthand(b.block)),"border-block-start":makeTransform(transformBorderShorthand([c])),"border-block-end":makeTransform(transformBorderShorthand([d])),"border-inline":makeTransform(transformBorderShorthand(b.inline)),"border-inline-start":makeTransform(transformBorderShorthand([f])),"border-inline-end":makeTransform(transformBorderShorthand([u])),"border-start-start-radius":makeTransform(transformBorderRadius(b)),"border-start-end-radius":makeTransform(transformBorderRadius(b)),"border-end-start-radius":makeTransform(transformBorderRadius(b)),"border-end-end-radius":makeTransform(transformBorderRadius(b))}};var m,h};creator.postcss=!0;export{creator as default};
+import r from"postcss-value-parser";var o,n;!function(r){r.Block="block",r.Inline="inline"}(o||(o={})),function(r){r.Start="start",r.End="end"}(n||(n={}));const t={BlockStart:"block-start",BlockEnd:"block-end",InlineStart:"inline-start",InlineEnd:"inline-end"};var e,i;function cloneDeclaration(r,o,n){r.parent&&r.parent.some((r=>"decl"==r.type&&r.prop===n&&r.value===o))||r.cloneBefore({value:o,prop:n})}function parseValueCouple(o){const n=r(o.value).nodes.filter((r=>"space"!==r.type));if(n.length>2){const r=`[postcss-logical] Invalid number of values for ${o.prop}. Found ${n.length} values, expected 1 or 2.`;throw o.error(r)}let t,e;return 1===n.length&&(t=r.stringify(n[0]),e=t),2===n.length&&(t=r.stringify(n[0]),e=r.stringify(n[1])),[t,e]}function transformBorder(r,o){return n=>(cloneDeclaration(n,n.value,`border-${o}-${r}`),!0)}function transformBorderProperty(r,o){return n=>{const[t,e]=o,[i,a]=parseValueCouple(n);return cloneDeclaration(n,i,`border-${t}-${r}`),cloneDeclaration(n,a,`border-${e}-${r}`),!0}}function transformBorderShorthand(r){return o=>(r.forEach((r=>cloneDeclaration(o,o.value,`border-${r}`))),!0)}function transformBorderRadius(r){return o=>{let n;switch(o.prop.toLowerCase()){case"border-start-start-radius":n=`border-${r.inlineIsHorizontal?`${r.block[0]}-${r.inline[0]}`:`${r.inline[0]}-${r.block[0]}`}-radius`;break;case"border-start-end-radius":n=`border-${r.inlineIsHorizontal?`${r.block[0]}-${r.inline[1]}`:`${r.inline[1]}-${r.block[0]}`}-radius`;break;case"border-end-start-radius":n=`border-${r.inlineIsHorizontal?`${r.block[1]}-${r.inline[0]}`:`${r.inline[0]}-${r.block[1]}`}-radius`;break;case"border-end-end-radius":n=`border-${r.inlineIsHorizontal?`${r.block[1]}-${r.inline[1]}`:`${r.inline[1]}-${r.block[1]}`}-radius`;break}return cloneDeclaration(o,o.value,n),!0}}function transformLogicalSize(r){return o=>{const{value:n}=o,t=r.inlineIsHorizontal?"width":"height",e=r.inlineIsHorizontal?"height":"width";return cloneDeclaration(o,n,"block-size"===o.prop?e:t),!0}}function transformOffset(r){return o=>(cloneDeclaration(o,o.value,r),!0)}function transformOffsetShorthand(r){return o=>{const[n,t]=r,[e,i]=parseValueCouple(o);return cloneDeclaration(o,e,n),cloneDeclaration(o,i,t),!0}}function transformResize(o){return n=>{const{prop:t,value:e}=n,i=r(e),a=o.inlineIsHorizontal?"horizontal":"vertical",l=o.inlineIsHorizontal?"vertical":"horizontal";i.nodes.forEach((r=>{if("word"===r.type){const o=r.value.toLowerCase();if("inline"===o)return void(r.value=a);"block"===o&&(r.value=l)}}));const s=i.toString();return s!==e&&(cloneDeclaration(n,s,t),!0)}}function transformSide(r,o){return n=>(cloneDeclaration(n,n.value,`${r}-${o}`),!0)}function transformSideShorthand(r,o){return n=>{const[t,e]=o,[i,a]=parseValueCouple(n);return cloneDeclaration(n,i,`${r}-${t}`),cloneDeclaration(n,a,`${r}-${e}`),!0}}function logicalToPhysical(r,o){const[n,e]=o.block,[i,a]=o.inline;switch(r){case t.BlockStart:return n;case t.BlockEnd:return e;case t.InlineStart:return i;case t.InlineEnd:return a}}function doTransform(o,n,t){const{prop:e,value:i}=o,a=r(i);a.nodes.forEach((r=>{if("word"===r.type){const o=r.value.toLowerCase();n.includes(o)&&(r.value=logicalToPhysical(o,t))}}));const l=a.toString();return l!==i&&(cloneDeclaration(o,l,e),!0)}function directionFlowToAxes(r){switch(r){case e.TopToBottom:return[i.Top,i.Bottom];case e.BottomToTop:return[i.Bottom,i.Top];case e.RightToLeft:return[i.Right,i.Left];case e.LeftToRight:return[i.Left,i.Right]}}!function(r){r.TopToBottom="top-to-bottom",r.BottomToTop="bottom-to-top",r.RightToLeft="right-to-left",r.LeftToRight="left-to-right"}(e||(e={})),function(r){r.Top="top",r.Right="right",r.Bottom="bottom",r.Left="left"}(i||(i={}));const creator=o=>{const a=Object.assign({blockDirection:e.TopToBottom,inlineDirection:e.LeftToRight},o),l=Object.values(e);if(!l.includes(a.blockDirection))throw new Error(`[postcss-logical] "blockDirection" must be one of ${l.join(", ")}`);if(!l.includes(a.inlineDirection))throw new Error(`[postcss-logical] "inlineDirection" must be one of ${l.join(", ")}`);const[s,c]=directionFlowToAxes(a.blockDirection),[d,f]=directionFlowToAxes(a.inlineDirection);if(!Object.values(i).every((r=>[s,c,d,f].includes(r))))throw new Error('[postcss-logical] "blockDirection" and "inlineDirection" must be on separate axes');const u={block:[s,c],inline:[d,f],inlineIsHorizontal:[e.LeftToRight,e.RightToLeft].includes(a.inlineDirection)},makeTransform=r=>(o,{result:n})=>{if(!r)return;let t=!1;try{t=r(o)}catch(r){return void o.warn(n,r.message)}t&&o.remove()};return{postcssPlugin:"postcss-logical",Declaration:{"caption-side":makeTransform((m=u,r=>doTransform(r,Object.values(t),m))),"text-align":makeTransform(u.inlineIsHorizontal?(b=u.inline,o=>{const{prop:t,value:e}=o,i=r(e),[a,l]=b;i.nodes.forEach((r=>{if("word"===r.type){const o=r.value.toLowerCase();if(o===n.End)return void(r.value=l);o===n.Start&&(r.value=a)}}));const s=i.toString();return s!==e&&(cloneDeclaration(o,s,t),!0)}):null),resize:makeTransform(transformResize(u)),"block-size":makeTransform(transformLogicalSize(u)),"inline-size":makeTransform(transformLogicalSize(u)),"margin-block-start":makeTransform(transformSide("margin",s)),"margin-block-end":makeTransform(transformSide("margin",c)),"margin-inline-start":makeTransform(transformSide("margin",d)),"margin-inline-end":makeTransform(transformSide("margin",f)),"margin-block":makeTransform(transformSideShorthand("margin",u.block)),"margin-inline":makeTransform(transformSideShorthand("margin",u.inline)),"inset-block":makeTransform(transformOffsetShorthand(u.block)),"inset-block-start":makeTransform(transformOffset(s)),"inset-block-end":makeTransform(transformOffset(c)),"inset-inline":makeTransform(transformOffsetShorthand(u.inline)),"inset-inline-start":makeTransform(transformOffset(d)),"inset-inline-end":makeTransform(transformOffset(f)),inset:makeTransform((o=>{const n=r(o.value).nodes.filter((r=>"space"!==r.type&&"comment"!==r.type));if(n.length>4){const r=`[postcss-logical] Invalid number of values for ${o.prop}. Found ${n.length} values, expected up to 4 values.`;throw o.error(r)}const t={top:"",right:"",bottom:"",left:""};return 1===n.length&&(t.top=r.stringify(n[0]),t.right=t.top,t.bottom=t.top,t.left=t.top),2===n.length&&(t.top=r.stringify(n[0]),t.right=r.stringify(n[1]),t.bottom=t.top,t.left=t.right),3===n.length&&(t.top=r.stringify(n[0]),t.right=r.stringify(n[1]),t.left=t.right,t.bottom=r.stringify(n[2])),4===n.length&&(t.top=r.stringify(n[0]),t.right=r.stringify(n[1]),t.bottom=r.stringify(n[2]),t.left=r.stringify(n[3])),Object.keys(t).forEach((r=>{cloneDeclaration(o,t[r],r)})),!0})),"padding-block-start":makeTransform(transformSide("padding",s)),"padding-block-end":makeTransform(transformSide("padding",c)),"padding-inline-start":makeTransform(transformSide("padding",d)),"padding-inline-end":makeTransform(transformSide("padding",f)),"padding-block":makeTransform(transformSideShorthand("padding",u.block)),"padding-inline":makeTransform(transformSideShorthand("padding",u.inline)),"border-block-start-width":makeTransform(transformBorder("width",s)),"border-block-end-width":makeTransform(transformBorder("width",c)),"border-inline-start-width":makeTransform(transformBorder("width",d)),"border-inline-end-width":makeTransform(transformBorder("width",f)),"border-block-width":makeTransform(transformBorderProperty("width",u.block)),"border-inline-width":makeTransform(transformBorderProperty("width",u.inline)),"border-block-start-style":makeTransform(transformBorder("style",s)),"border-block-end-style":makeTransform(transformBorder("style",c)),"border-inline-start-style":makeTransform(transformBorder("style",d)),"border-inline-end-style":makeTransform(transformBorder("style",f)),"border-block-style":makeTransform(transformBorderProperty("style",u.block)),"border-inline-style":makeTransform(transformBorderProperty("style",u.inline)),"border-block-start-color":makeTransform(transformBorder("color",s)),"border-block-end-color":makeTransform(transformBorder("color",c)),"border-inline-start-color":makeTransform(transformBorder("color",d)),"border-inline-end-color":makeTransform(transformBorder("color",f)),"border-block-color":makeTransform(transformBorderProperty("color",u.block)),"border-inline-color":makeTransform(transformBorderProperty("color",u.inline)),"border-block":makeTransform(transformBorderShorthand(u.block)),"border-block-start":makeTransform(transformBorderShorthand([s])),"border-block-end":makeTransform(transformBorderShorthand([c])),"border-inline":makeTransform(transformBorderShorthand(u.inline)),"border-inline-start":makeTransform(transformBorderShorthand([d])),"border-inline-end":makeTransform(transformBorderShorthand([f])),"border-start-start-radius":makeTransform(transformBorderRadius(u)),"border-start-end-radius":makeTransform(transformBorderRadius(u)),"border-end-start-radius":makeTransform(transformBorderRadius(u)),"border-end-end-radius":makeTransform(transformBorderRadius(u))}};var b,m};creator.postcss=!0;export{creator as default};
diff --git a/plugins/postcss-logical/dist/lib/transform-value.d.ts b/plugins/postcss-logical/dist/lib/transform-value.d.ts
index e4841ee44..7bec316fe 100644
--- a/plugins/postcss-logical/dist/lib/transform-value.d.ts
+++ b/plugins/postcss-logical/dist/lib/transform-value.d.ts
@@ -1,4 +1,3 @@
import type { Declaration } from 'postcss';
-import { DirectionConfig, Direction } from './types';
+import { DirectionConfig } from './types';
export declare function transformValue(config: DirectionConfig): (declaration: Declaration) => boolean;
-export declare function transformValueWithSingleDirection(direction: Direction, config: DirectionConfig): (declaration: Declaration) => boolean;
diff --git a/plugins/postcss-logical/docs/README.md b/plugins/postcss-logical/docs/README.md
index 2473e5715..107098e7a 100644
--- a/plugins/postcss-logical/docs/README.md
+++ b/plugins/postcss-logical/docs/README.md
@@ -62,13 +62,7 @@ Each direction must be one of the following:
You can't mix two vertical directions or two horizontal directions so for example `top-to-bottom` and `right-to-left` are valid, but `top-to-bottom` and `bottom-to-top` are not.
-Please do not that some properties won't be transformed if `inlineDirection` becomes vertical.
-
-These are:
-
-* `float`
-* `clear`
-* `text-align`
+Please do note that `text-align` won't be transformed if `inlineDirection` becomes vertical.
[CSS Logical Properties and Values]:
diff --git a/plugins/postcss-logical/src/index.ts b/plugins/postcss-logical/src/index.ts
index 60e72a711..75a0e9a40 100644
--- a/plugins/postcss-logical/src/index.ts
+++ b/plugins/postcss-logical/src/index.ts
@@ -1,5 +1,5 @@
import type { Declaration, PluginCreator, Result } from 'postcss';
-import { Axes, Direction, DirectionConfig, DirectionFlow } from './lib/types';
+import { Axes, DirectionConfig, DirectionFlow } from './lib/types';
import {
transformBorder,
transformBorderProperty,
@@ -18,13 +18,10 @@ import {
transformSideShorthand,
} from './lib/transform-side';
import { transformTextAlign } from './lib/transform-text-align';
-import {
- transformValue,
- transformValueWithSingleDirection,
-} from './lib/transform-value';
+import { transformValue } from './lib/transform-value';
import { directionFlowToAxes } from './utils/direction-flow-to-axes';
-/** postcss-overflow-shorthand plugin options */
+/** postcss-logical plugin options */
export type pluginOptions = {
/** Sets the direction for block. default: top-to-bottom */
blockDirection?: DirectionFlow,
@@ -98,17 +95,6 @@ const creator: PluginCreator = (opts?: pluginOptions) => {
Declaration: {
// 2.1 Caption
'caption-side': makeTransform(transformValue(directionConfig)),
- // 2.2 Float & Clear
- 'float': makeTransform(
- directionConfig.inlineIsHorizontal
- ? transformValueWithSingleDirection(Direction.Inline, directionConfig)
- : null,
- ),
- 'clear': makeTransform(
- directionConfig.inlineIsHorizontal
- ? transformValueWithSingleDirection(Direction.Inline, directionConfig)
- : null,
- ),
// 2.3 Text Align
'text-align': makeTransform(
directionConfig.inlineIsHorizontal
diff --git a/plugins/postcss-logical/src/lib/transform-value.ts b/plugins/postcss-logical/src/lib/transform-value.ts
index 93d480d36..3c4a35971 100644
--- a/plugins/postcss-logical/src/lib/transform-value.ts
+++ b/plugins/postcss-logical/src/lib/transform-value.ts
@@ -1,6 +1,6 @@
import type { Declaration } from 'postcss';
import valueParser from 'postcss-value-parser';
-import { DirectionConfig, DirectionValues, Direction } from './types';
+import { DirectionConfig, DirectionValues } from './types';
import { logicalToPhysical } from '../utils/logical-to-physical';
import { cloneDeclaration } from './clone-declaration';
@@ -33,20 +33,3 @@ export function transformValue(
return doTransform(declaration, Object.values(DirectionValues), config);
};
}
-
-export function transformValueWithSingleDirection(
- direction: Direction,
- config: DirectionConfig,
-): (declaration: Declaration) => boolean {
- return (declaration: Declaration) => {
- let directionValues;
-
- if (direction === Direction.Block) {
- directionValues = [DirectionValues.BlockStart, DirectionValues.BlockEnd];
- } else {
- directionValues = [DirectionValues.InlineStart, DirectionValues.InlineEnd];
- }
-
- return doTransform(declaration, directionValues, config);
- };
-}
diff --git a/plugins/postcss-logical/test/abstract.bt.expect.css b/plugins/postcss-logical/test/abstract.bt.expect.css
index 23cb31b06..5a4366ec3 100644
--- a/plugins/postcss-logical/test/abstract.bt.expect.css
+++ b/plugins/postcss-logical/test/abstract.bt.expect.css
@@ -5,11 +5,6 @@
margin-left: inline-start;
}
-.abstract {
- float: left;
- clear: right;
-}
-
.abstract {
border-bottom-left-radius: block-start inline-start;
border-bottom-right-radius: block-start inline-end;
diff --git a/plugins/postcss-logical/test/abstract.chinese.expect.css b/plugins/postcss-logical/test/abstract.chinese.expect.css
index 3e5226d68..0f2fafce9 100644
--- a/plugins/postcss-logical/test/abstract.chinese.expect.css
+++ b/plugins/postcss-logical/test/abstract.chinese.expect.css
@@ -5,11 +5,6 @@
margin-top: inline-start;
}
-.abstract {
- float: inline-start;
- clear: inline-end;
-}
-
.abstract {
border-top-right-radius: block-start inline-start;
border-bottom-right-radius: block-start inline-end;
diff --git a/plugins/postcss-logical/test/abstract.css b/plugins/postcss-logical/test/abstract.css
index 12cb658a4..5182aec43 100644
--- a/plugins/postcss-logical/test/abstract.css
+++ b/plugins/postcss-logical/test/abstract.css
@@ -5,11 +5,6 @@
margin-inline-start: inline-start;
}
-.abstract {
- float: inline-start;
- clear: inline-end;
-}
-
.abstract {
border-start-start-radius: block-start inline-start;
border-start-end-radius: block-start inline-end;
diff --git a/plugins/postcss-logical/test/abstract.expect.css b/plugins/postcss-logical/test/abstract.expect.css
index 127e3a88f..f83781218 100644
--- a/plugins/postcss-logical/test/abstract.expect.css
+++ b/plugins/postcss-logical/test/abstract.expect.css
@@ -5,11 +5,6 @@
margin-left: inline-start;
}
-.abstract {
- float: left;
- clear: right;
-}
-
.abstract {
border-top-left-radius: block-start inline-start;
border-top-right-radius: block-start inline-end;
diff --git a/plugins/postcss-logical/test/abstract.rtl-and-bt.expect.css b/plugins/postcss-logical/test/abstract.rtl-and-bt.expect.css
index dc7042c3b..37bb6092f 100644
--- a/plugins/postcss-logical/test/abstract.rtl-and-bt.expect.css
+++ b/plugins/postcss-logical/test/abstract.rtl-and-bt.expect.css
@@ -5,11 +5,6 @@
margin-right: inline-start;
}
-.abstract {
- float: right;
- clear: left;
-}
-
.abstract {
border-bottom-right-radius: block-start inline-start;
border-bottom-left-radius: block-start inline-end;
diff --git a/plugins/postcss-logical/test/abstract.rtl.expect.css b/plugins/postcss-logical/test/abstract.rtl.expect.css
index f5fe70c96..182990843 100644
--- a/plugins/postcss-logical/test/abstract.rtl.expect.css
+++ b/plugins/postcss-logical/test/abstract.rtl.expect.css
@@ -5,11 +5,6 @@
margin-right: inline-start;
}
-.abstract {
- float: right;
- clear: left;
-}
-
.abstract {
border-top-right-radius: block-start inline-start;
border-top-left-radius: block-start inline-end;
diff --git a/plugins/postcss-logical/test/float-and-clear.chinese .expect.css b/plugins/postcss-logical/test/float-and-clear.chinese .expect.css
deleted file mode 100644
index 64eaf3ace..000000000
--- a/plugins/postcss-logical/test/float-and-clear.chinese .expect.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.float {
- float: inline-start;
-}
-
-.clear {
- clear: inline-end;
-}
-
-.ignore {
- float: block-start;
- clear: block-end;
-}
diff --git a/plugins/postcss-logical/test/float-and-clear.css b/plugins/postcss-logical/test/float-and-clear.css
deleted file mode 100644
index 64eaf3ace..000000000
--- a/plugins/postcss-logical/test/float-and-clear.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.float {
- float: inline-start;
-}
-
-.clear {
- clear: inline-end;
-}
-
-.ignore {
- float: block-start;
- clear: block-end;
-}
diff --git a/plugins/postcss-logical/test/float-and-clear.expect.css b/plugins/postcss-logical/test/float-and-clear.expect.css
deleted file mode 100644
index 8a7efe438..000000000
--- a/plugins/postcss-logical/test/float-and-clear.expect.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.float {
- float: left;
-}
-
-.clear {
- clear: right;
-}
-
-.ignore {
- float: block-start;
- clear: block-end;
-}
diff --git a/rollup/configs/externals.mjs b/rollup/configs/externals.mjs
index e5bc6eef0..cb9377987 100644
--- a/rollup/configs/externals.mjs
+++ b/rollup/configs/externals.mjs
@@ -93,6 +93,7 @@ export const externalsForPlugin = [
'@csstools/postcss-hwb-function',
'@csstools/postcss-ic-unit',
'@csstools/postcss-is-pseudo-class',
+ '@csstools/postcss-logical-float-and-clear',
'@csstools/postcss-media-queries-aspect-ratio-number-values',
'@csstools/postcss-nested-calc',
'@csstools/postcss-normalize-display-values',