diff --git a/.github/ISSUE_TEMPLATE/css-issue.yml b/.github/ISSUE_TEMPLATE/css-issue.yml index cb59d8ccd..1916f6fac 100644 --- a/.github/ISSUE_TEMPLATE/css-issue.yml +++ b/.github/ISSUE_TEMPLATE/css-issue.yml @@ -88,6 +88,7 @@ body: - PostCSS Lab Function - PostCSS Logical - PostCSS Logical Float and Clear + - PostCSS Logical Resize - PostCSS Logical Viewport Units - PostCSS Media Queries Aspect-Ratio Number Values - PostCSS Media Query Ranges diff --git a/.github/ISSUE_TEMPLATE/plugin-issue.yml b/.github/ISSUE_TEMPLATE/plugin-issue.yml index 6f23992ca..8be051246 100644 --- a/.github/ISSUE_TEMPLATE/plugin-issue.yml +++ b/.github/ISSUE_TEMPLATE/plugin-issue.yml @@ -90,6 +90,7 @@ body: - PostCSS Lab Function - PostCSS Logical - PostCSS Logical Float and Clear + - PostCSS Logical Resize - PostCSS Logical Viewport Units - PostCSS Media Queries Aspect-Ratio Number Values - PostCSS Media Query Ranges diff --git a/.github/labeler.yml b/.github/labeler.yml index 6bac0bd5e..324126e82 100644 --- a/.github/labeler.yml +++ b/.github/labeler.yml @@ -140,6 +140,10 @@ - plugins/postcss-logical-float-and-clear/** - experimental/postcss-logical-float-and-clear/** +"plugins/postcss-logical-resize": + - plugins/postcss-logical-resize/** + - experimental/postcss-logical-resize/** + "plugins/postcss-logical-viewport-units": - plugins/postcss-logical-viewport-units/** - experimental/postcss-logical-viewport-units/** diff --git a/package-lock.json b/package-lock.json index 99164e676..fde858590 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1852,6 +1852,10 @@ "resolved": "plugins/postcss-logical-float-and-clear", "link": true }, + "node_modules/@csstools/postcss-logical-resize": { + "resolved": "plugins/postcss-logical-resize", + "link": true + }, "node_modules/@csstools/postcss-logical-viewport-units": { "resolved": "plugins/postcss-logical-viewport-units", "link": true @@ -7569,6 +7573,23 @@ "postcss": "^8.4" } }, + "plugins/postcss-logical-resize": { + "version": "1.0.0", + "license": "CC0-1.0", + "dependencies": { + "postcss-value-parser": "^4.2.0" + }, + "engines": { + "node": "^14 || ^16 || >=18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, "plugins/postcss-logical-viewport-units": { "name": "@csstools/postcss-logical-viewport-units", "version": "1.0.0", @@ -8989,6 +9010,12 @@ "version": "file:plugins/postcss-logical-float-and-clear", "requires": {} }, + "@csstools/postcss-logical-resize": { + "version": "file:plugins/postcss-logical-resize", + "requires": { + "postcss-value-parser": "^4.2.0" + } + }, "@csstools/postcss-logical-viewport-units": { "version": "file:plugins/postcss-logical-viewport-units", "requires": { diff --git a/plugins/postcss-logical-float-and-clear/INSTALL.md b/plugins/postcss-logical-float-and-clear/INSTALL.md index 9e6a50871..c408c6744 100644 --- a/plugins/postcss-logical-float-and-clear/INSTALL.md +++ b/plugins/postcss-logical-float-and-clear/INSTALL.md @@ -6,7 +6,6 @@ - [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) @@ -142,28 +141,6 @@ module.exports = { }; ``` -## 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) @@ -255,6 +232,4 @@ grunt.initConfig({ [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/README.md b/plugins/postcss-logical-float-and-clear/README.md index d0d7b7bc4..268c30855 100644 --- a/plugins/postcss-logical-float-and-clear/README.md +++ b/plugins/postcss-logical-float-and-clear/README.md @@ -44,7 +44,6 @@ instructions for: - [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) @@ -84,7 +83,7 @@ Each direction must be one of the following: - `left-to-right` - `right-to-left` -Please do not that transformations won't run if `inlineDirection` becomes vertical. +Please do note 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 diff --git a/plugins/postcss-logical-float-and-clear/package.json b/plugins/postcss-logical-float-and-clear/package.json index 4e9105a3e..71b61d38b 100644 --- a/plugins/postcss-logical-float-and-clear/package.json +++ b/plugins/postcss-logical-float-and-clear/package.json @@ -49,17 +49,25 @@ "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" }, + "homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-float-and-clear#readme", "repository": { "type": "git", "url": "https://github.com/csstools/postcss-plugins.git", "directory": "plugins/postcss-logical-float-and-clear" }, + "bugs": "https://github.com/csstools/postcss-plugins/issues", "keywords": [ + "block", + "clear", + "css", + "float", + "inline", + "logical", + "postcss", "postcss-plugin" ], "csstools": { @@ -70,7 +78,5 @@ }, "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-resize/.gitignore b/plugins/postcss-logical-resize/.gitignore new file mode 100644 index 000000000..e5b28db4a --- /dev/null +++ b/plugins/postcss-logical-resize/.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-resize/.nvmrc b/plugins/postcss-logical-resize/.nvmrc new file mode 100644 index 000000000..39e593ebe --- /dev/null +++ b/plugins/postcss-logical-resize/.nvmrc @@ -0,0 +1 @@ +v18.8.0 diff --git a/plugins/postcss-logical-resize/.tape.mjs b/plugins/postcss-logical-resize/.tape.mjs new file mode 100644 index 000000000..49235294a --- /dev/null +++ b/plugins/postcss-logical-resize/.tape.mjs @@ -0,0 +1,44 @@ +import postcssTape from '../../packages/postcss-tape/dist/index.mjs'; +import plugin from '@csstools/postcss-logical-resize'; + +postcssTape(plugin)({ + 'basic': { + message: 'basic test with default setting', + }, + 'basic:rtl': { + message: 'basic test with rtl', + options: { + inlineDirection: 'right-to-left' + }, + }, + 'basic:bt': { + message: 'basic test with bt', + options: { + blockDirection: 'bottom-to-top' + }, + }, + 'basic:rtl-and-bt': { + message: 'basic test with rtl and bt', + options: { + blockDirection: 'bottom-to-top', + inlineDirection: 'right-to-left' + }, + }, + 'basic:chinese': { + message: 'basic test with rtl and bt', + options: { + blockDirection: 'right-to-left', + inlineDirection: 'top-to-bottom' + }, + }, + 'examples/example': { + message: 'minimal example', + }, + 'examples/example:chinese': { + message: 'minimal example', + options: { + blockDirection: 'right-to-left', + inlineDirection: 'top-to-bottom' + } + }, +}); diff --git a/plugins/postcss-logical-resize/CHANGELOG.md b/plugins/postcss-logical-resize/CHANGELOG.md new file mode 100644 index 000000000..c25aa1218 --- /dev/null +++ b/plugins/postcss-logical-resize/CHANGELOG.md @@ -0,0 +1,5 @@ +# Changes to PostCSS Logical Resize + +### 1.0.0 (Unreleased) + +- Initial version diff --git a/plugins/postcss-logical-resize/INSTALL.md b/plugins/postcss-logical-resize/INSTALL.md new file mode 100644 index 000000000..a6b00797e --- /dev/null +++ b/plugins/postcss-logical-resize/INSTALL.md @@ -0,0 +1,235 @@ +# Installing PostCSS Logical Resize + +[PostCSS Logical Resize] runs in all Node environments, with special instructions for: + +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) +- [Webpack](#webpack) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) + + + +## Node + +Add [PostCSS Logical Resize] to your project: + +```bash +npm install postcss @csstools/postcss-logical-resize --save-dev +``` + +Use it as a [PostCSS] plugin: + +```js +// commonjs +const postcss = require('postcss'); +const postcssLogicalResize = require('@csstools/postcss-logical-resize'); + +postcss([ + postcssLogicalResize(/* pluginOptions */) +]).process(YOUR_CSS /*, processOptions */); +``` + +```js +// esm +import postcss from 'postcss'; +import postcssLogicalResize from '@csstools/postcss-logical-resize'; + +postcss([ + postcssLogicalResize(/* pluginOptions */) +]).process(YOUR_CSS /*, processOptions */); +``` + +## PostCSS CLI + +Add [PostCSS CLI] to your project: + +```bash +npm install postcss-cli @csstools/postcss-logical-resize --save-dev +``` + +Use [PostCSS Logical Resize] in your `postcss.config.js` configuration file: + +```js +const postcssLogicalResize = require('@csstools/postcss-logical-resize'); + +module.exports = { + plugins: [ + postcssLogicalResize(/* 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-resize --save-dev +``` + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "@csstools/postcss-logical-resize": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "@csstools/postcss-logical-resize": {} + } +} +``` + +_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-resize --save-dev +``` + +Use [PostCSS Logical Resize] 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-resize", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, +}; +``` + +## 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-resize --save-dev +``` + +Use [PostCSS Logical Resize] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "@csstools/postcss-logical-resize" + ] +} +``` + +```json5 +{ + "plugins": [ + [ + "@csstools/postcss-logical-resize", + { + // Optionally add plugin options + } + ] + ] +} +``` + +## Gulp + +Add [Gulp PostCSS] to your project: + +```bash +npm install gulp-postcss @csstools/postcss-logical-resize --save-dev +``` + +Use [PostCSS Logical Resize] in your Gulpfile: + +```js +const postcss = require('gulp-postcss'); +const postcssLogicalResize = require('@csstools/postcss-logical-resize'); + +gulp.task('css', function () { + var plugins = [ + postcssLogicalResize(/* 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-resize --save-dev +``` + +Use [PostCSS Logical Resize] in your Gruntfile: + +```js +const postcssLogicalResize = require('@csstools/postcss-logical-resize'); + +grunt.loadNpmTasks('grunt-postcss'); + +grunt.initConfig({ + postcss: { + options: { + processors: [ + postcssLogicalResize(/* 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 Resize]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-resize +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-logical-resize/LICENSE.md b/plugins/postcss-logical-resize/LICENSE.md new file mode 100644 index 000000000..0bc1fa706 --- /dev/null +++ b/plugins/postcss-logical-resize/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-resize/README.md b/plugins/postcss-logical-resize/README.md new file mode 100644 index 000000000..3e0d3a242 --- /dev/null +++ b/plugins/postcss-logical-resize/README.md @@ -0,0 +1,108 @@ +# PostCSS Logical Resize [][PostCSS] + +[][npm-url] [][css-url] [][cli-url] [][discord] + +[PostCSS Logical Resize] lets you use logical, rather than physical, values for `resize`, following the [CSS Logical Properties and Values] specification. + +```pcss +.resize-block { + resize: block; +} + +.resize-inline { + resize: inline; +} + +/* becomes */ + +.resize-block { + resize: vertical; +} + +.resize-inline { + resize: horizontal; +} +``` + +## Usage + +Add [PostCSS Logical Resize] to your project: + +```bash +npm install postcss @csstools/postcss-logical-resize --save-dev +``` + +Use it as a [PostCSS] plugin: + +```js +const postcss = require('postcss'); +const postcssLogicalResize = require('@csstools/postcss-logical-resize'); + +postcss([ + postcssLogicalResize(/* pluginOptions */) +]).process(YOUR_CSS /*, processOptions */); +``` + +[PostCSS Logical Resize] 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) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt) + +## Options + +### blockDirection & inlineDirection + +The `blockDirection` and `inlineDirection` options allow you to specify the direction of the block and inline axes. The default values are `top-to-bottom` and `left-to-right` respectively which would match any latin language. + +You might want to tweak these values if you are using a different writing system, such as Arabic, Hebrew or Chinese for example. + +```js +postcssLogicalResize({ + blockDirection: 'right-to-left', + inlineDirection: 'top-to-bottom' +}) +``` + +```pcss +.resize-block { + resize: block; +} + +.resize-inline { + resize: inline; +} + +/* becomes */ + +.resize-block { + resize: horizontal; +} + +.resize-inline { + resize: vertical; +} +``` + +Each direction must be one of the following: + +- `top-to-bottom` +- `bottom-to-top` +- `left-to-right` +- `right-to-left` + +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. + +[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test +[css-url]: https://cssdb.org/#logical-resize +[discord]: https://discord.gg/bUadyRwkJS +[npm-url]: https://www.npmjs.com/package/@csstools/postcss-logical-resize + +[PostCSS]: https://github.com/postcss/postcss +[PostCSS Logical Resize]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-resize +[CSS Logical Properties and Values]: https://www.w3.org/TR/css-logical-1/ diff --git a/plugins/postcss-logical-resize/dist/index.cjs b/plugins/postcss-logical-resize/dist/index.cjs new file mode 100644 index 000000000..6c1aaad14 --- /dev/null +++ b/plugins/postcss-logical-resize/dist/index.cjs @@ -0,0 +1 @@ +"use strict";var o,t,e,i,n=require("postcss-value-parser");function cloneDeclaration(o,t,e){o.parent&&o.parent.some((o=>"decl"==o.type&&o.prop===e&&o.value===t))||o.cloneBefore({value:t,prop:e})}function transformResize(o){return t=>{const{prop:e,value:i}=t,r=n(i),c=o.inlineIsHorizontal?"horizontal":"vertical",s=o.inlineIsHorizontal?"vertical":"horizontal";r.nodes.forEach((o=>{if("word"===o.type){const t=o.value.toLowerCase();if("inline"===t)return void(o.value=c);"block"===t&&(o.value=s)}}));const l=r.toString();return l!==i&&(cloneDeclaration(t,l,e),!0)}}function directionFlowToAxes(o){switch(o){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(o){o.Block="block",o.Inline="inline"}(o||(o={})),function(o){o.Start="start",o.End="end"}(t||(t={})),function(o){o.TopToBottom="top-to-bottom",o.BottomToTop="bottom-to-top",o.RightToLeft="right-to-left",o.LeftToRight="left-to-right"}(e||(e={})),function(o){o.Top="top",o.Right="right",o.Bottom="bottom",o.Left="left"}(i||(i={}));const creator=o=>{const t=Object.assign({blockDirection:e.TopToBottom,inlineDirection:e.LeftToRight},o),n=Object.values(e);if(!n.includes(t.blockDirection))throw new Error(`[postcss-logical-resize] "blockDirection" must be one of ${n.join(", ")}`);if(!n.includes(t.inlineDirection))throw new Error(`[postcss-logical-resize] "inlineDirection" must be one of ${n.join(", ")}`);const[r,c]=directionFlowToAxes(t.blockDirection),[s,l]=directionFlowToAxes(t.inlineDirection);if(!Object.values(i).every((o=>[r,c,s,l].includes(o))))throw new Error('[postcss-logical-resize] "blockDirection" and "inlineDirection" must be on separate axes');const a={block:[r,c],inline:[s,l],inlineIsHorizontal:[e.LeftToRight,e.RightToLeft].includes(t.inlineDirection)};return{postcssPlugin:"postcss-logical-resize",Declaration:{resize:(u=transformResize(a),(o,{result:t})=>{if(!u)return;let e=!1;try{e=u(o)}catch(e){return void o.warn(t,e.message)}e&&o.remove()})}};var u};creator.postcss=!0,module.exports=creator; diff --git a/plugins/postcss-logical-resize/dist/index.d.ts b/plugins/postcss-logical-resize/dist/index.d.ts new file mode 100644 index 000000000..0cac31d03 --- /dev/null +++ b/plugins/postcss-logical-resize/dist/index.d.ts @@ -0,0 +1,11 @@ +import type { PluginCreator } from 'postcss'; +import { DirectionFlow } from './lib/types'; +/** postcss-logical-resize plugin options */ +export type pluginOptions = { + /** Sets the direction for block. default: top-to-bottom */ + blockDirection?: DirectionFlow; + /** Sets the direction for inline. default: left-to-right */ + inlineDirection?: DirectionFlow; +}; +declare const creator: PluginCreator; +export default creator; diff --git a/plugins/postcss-logical-resize/dist/index.mjs b/plugins/postcss-logical-resize/dist/index.mjs new file mode 100644 index 000000000..5cffc5e7b --- /dev/null +++ b/plugins/postcss-logical-resize/dist/index.mjs @@ -0,0 +1 @@ +import o from"postcss-value-parser";var t,e,i,n;function cloneDeclaration(o,t,e){o.parent&&o.parent.some((o=>"decl"==o.type&&o.prop===e&&o.value===t))||o.cloneBefore({value:t,prop:e})}function transformResize(t){return e=>{const{prop:i,value:n}=e,r=o(n),c=t.inlineIsHorizontal?"horizontal":"vertical",s=t.inlineIsHorizontal?"vertical":"horizontal";r.nodes.forEach((o=>{if("word"===o.type){const t=o.value.toLowerCase();if("inline"===t)return void(o.value=c);"block"===t&&(o.value=s)}}));const l=r.toString();return l!==n&&(cloneDeclaration(e,l,i),!0)}}function directionFlowToAxes(o){switch(o){case i.TopToBottom:return[n.Top,n.Bottom];case i.BottomToTop:return[n.Bottom,n.Top];case i.RightToLeft:return[n.Right,n.Left];case i.LeftToRight:return[n.Left,n.Right]}}!function(o){o.Block="block",o.Inline="inline"}(t||(t={})),function(o){o.Start="start",o.End="end"}(e||(e={})),function(o){o.TopToBottom="top-to-bottom",o.BottomToTop="bottom-to-top",o.RightToLeft="right-to-left",o.LeftToRight="left-to-right"}(i||(i={})),function(o){o.Top="top",o.Right="right",o.Bottom="bottom",o.Left="left"}(n||(n={}));const creator=o=>{const t=Object.assign({blockDirection:i.TopToBottom,inlineDirection:i.LeftToRight},o),e=Object.values(i);if(!e.includes(t.blockDirection))throw new Error(`[postcss-logical-resize] "blockDirection" must be one of ${e.join(", ")}`);if(!e.includes(t.inlineDirection))throw new Error(`[postcss-logical-resize] "inlineDirection" must be one of ${e.join(", ")}`);const[r,c]=directionFlowToAxes(t.blockDirection),[s,l]=directionFlowToAxes(t.inlineDirection);if(!Object.values(n).every((o=>[r,c,s,l].includes(o))))throw new Error('[postcss-logical-resize] "blockDirection" and "inlineDirection" must be on separate axes');const a={block:[r,c],inline:[s,l],inlineIsHorizontal:[i.LeftToRight,i.RightToLeft].includes(t.inlineDirection)};return{postcssPlugin:"postcss-logical-resize",Declaration:{resize:(u=transformResize(a),(o,{result:t})=>{if(!u)return;let e=!1;try{e=u(o)}catch(e){return void o.warn(t,e.message)}e&&o.remove()})}};var u};creator.postcss=!0;export{creator as default}; diff --git a/plugins/postcss-logical-resize/dist/lib/clone-declaration.d.ts b/plugins/postcss-logical-resize/dist/lib/clone-declaration.d.ts new file mode 100644 index 000000000..1503bf6f1 --- /dev/null +++ b/plugins/postcss-logical-resize/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/dist/lib/transform-resize.d.ts b/plugins/postcss-logical-resize/dist/lib/transform-resize.d.ts similarity index 100% rename from plugins/postcss-logical/dist/lib/transform-resize.d.ts rename to plugins/postcss-logical-resize/dist/lib/transform-resize.d.ts diff --git a/plugins/postcss-logical-resize/dist/lib/types.d.ts b/plugins/postcss-logical-resize/dist/lib/types.d.ts new file mode 100644 index 000000000..7f27fd46e --- /dev/null +++ b/plugins/postcss-logical-resize/dist/lib/types.d.ts @@ -0,0 +1,31 @@ +export declare enum Direction { + Block = "block", + Inline = "inline" +} +export declare enum DirectionValue { + Start = "start", + End = "end" +} +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" +} +export type DirectionConfig = { + [Direction.Block]: [Axes, Axes]; + [Direction.Inline]: [Axes, Axes]; + inlineIsHorizontal: boolean; +}; diff --git a/plugins/postcss-logical-resize/dist/utils/direction-flow-to-axes.d.ts b/plugins/postcss-logical-resize/dist/utils/direction-flow-to-axes.d.ts new file mode 100644 index 000000000..2652d71d8 --- /dev/null +++ b/plugins/postcss-logical-resize/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-resize/docs/README.md b/plugins/postcss-logical-resize/docs/README.md new file mode 100644 index 000000000..cb707a19d --- /dev/null +++ b/plugins/postcss-logical-resize/docs/README.md @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + +

+ +[] lets you use logical, rather than physical, values for `resize`, following the [CSS Logical Properties and Values] specification. + +```pcss + + +/* becomes */ + + +``` + + + + + +## Options + +### blockDirection & inlineDirection + +The `blockDirection` and `inlineDirection` options allow you to specify the direction of the block and inline axes. The default values are `top-to-bottom` and `left-to-right` respectively which would match any latin language. + +You might want to tweak these values if you are using a different writing system, such as Arabic, Hebrew or Chinese for example. + +```js +({ + blockDirection: 'right-to-left', + inlineDirection: 'top-to-bottom' +}) +``` + +```pcss + + +/* becomes */ + + +``` + +Each direction must be one of the following: + +- `top-to-bottom` +- `bottom-to-top` +- `left-to-right` +- `right-to-left` + +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. + + +[CSS Logical Properties and Values]: diff --git a/plugins/postcss-logical-resize/package.json b/plugins/postcss-logical-resize/package.json new file mode 100644 index 000000000..aa4b46051 --- /dev/null +++ b/plugins/postcss-logical-resize/package.json @@ -0,0 +1,84 @@ +{ + "name": "@csstools/postcss-logical-resize", + "description": "Use logical values in the resize property", + "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" + ], + "dependencies": { + "postcss-value-parser": "^4.2.0" + }, + "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", + "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" + }, + "homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-resize#readme", + "repository": { + "type": "git", + "url": "https://github.com/csstools/postcss-plugins.git", + "directory": "plugins/postcss-logical-resize" + }, + "bugs": "https://github.com/csstools/postcss-plugins/issues", + "keywords": [ + "block", + "css", + "inline", + "logical", + "postcss", + "postcss-plugin", + "resize" + ], + "csstools": { + "cssdbId": "logical-resize", + "exportName": "postcssLogicalResize", + "humanReadableName": "PostCSS Logical Resize", + "specUrl": "https://www.w3.org/TR/css-logical-1/" + }, + "volta": { + "extends": "../../package.json" + } +} diff --git a/plugins/postcss-logical-resize/src/index.ts b/plugins/postcss-logical-resize/src/index.ts new file mode 100644 index 000000000..2dc3a551b --- /dev/null +++ b/plugins/postcss-logical-resize/src/index.ts @@ -0,0 +1,86 @@ +import type { Declaration, PluginCreator, Result } from 'postcss'; +import { Axes, DirectionConfig, DirectionFlow } from './lib/types'; +import { transformResize } from './lib/transform-resize'; +import { directionFlowToAxes } from './utils/direction-flow-to-axes'; + +/** postcss-logical-resize plugin options */ +export type pluginOptions = { + /** Sets the direction for block. default: top-to-bottom */ + blockDirection?: DirectionFlow, + /** Sets the direction for inline. default: left-to-right */ + inlineDirection?: DirectionFlow, +}; + +const creator: PluginCreator = (opts?: pluginOptions) => { + const options = Object.assign( + // Default options + { + blockDirection: DirectionFlow.TopToBottom, + inlineDirection: DirectionFlow.LeftToRight, + }, + // Provided options + opts, + ); + const directionValues = Object.values(DirectionFlow); + + if (!directionValues.includes(options.blockDirection)) { + throw new Error(`[postcss-logical-resize] "blockDirection" must be one of ${directionValues.join(', ')}`); + } + + if (!directionValues.includes(options.inlineDirection)) { + throw new Error(`[postcss-logical-resize] "inlineDirection" must be one of ${directionValues.join(', ')}`); + } + + const [blockStart, blockEnd] = directionFlowToAxes(options.blockDirection); + const [inlineStart, inlineEnd] = directionFlowToAxes(options.inlineDirection); + const allAxesCovered = Object.values(Axes) + .every((axis) => [blockStart, blockEnd, inlineStart, inlineEnd].includes(axis)); + + if (!allAxesCovered) { + throw new Error('[postcss-logical-resize] "blockDirection" and "inlineDirection" must be on separate axes'); + } + + const directionConfig: DirectionConfig = { + block: [blockStart, blockEnd], + inline: [inlineStart, inlineEnd], + inlineIsHorizontal: [DirectionFlow.LeftToRight, DirectionFlow.RightToLeft].includes(options.inlineDirection), + }; + + const makeTransform = (transform: (decl: Declaration) => boolean | null) => { + return ( + decl: Declaration, + { result }: { result: Result }, + ) => { + if (!transform) { + return; + } + + let transformed = false; + + try { + transformed = transform(decl); + } catch (error) { + decl.warn(result, error.message); + return; + } + + if (!transformed) { + return; + } + + decl.remove(); + }; + }; + + return { + postcssPlugin: 'postcss-logical-resize', + Declaration: { + // 2.4 Resize + 'resize': makeTransform(transformResize(directionConfig)), + }, + }; +}; + +creator.postcss = true; + +export default creator; diff --git a/plugins/postcss-logical-resize/src/lib/clone-declaration.ts b/plugins/postcss-logical-resize/src/lib/clone-declaration.ts new file mode 100644 index 000000000..b738ea4a9 --- /dev/null +++ b/plugins/postcss-logical-resize/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((x) => { + return x.type == 'decl' && x.prop === prop && x.value === value; + })) { + return; + } + + declaration.cloneBefore({ value, prop }); +} diff --git a/plugins/postcss-logical/src/lib/transform-resize.ts b/plugins/postcss-logical-resize/src/lib/transform-resize.ts similarity index 100% rename from plugins/postcss-logical/src/lib/transform-resize.ts rename to plugins/postcss-logical-resize/src/lib/transform-resize.ts diff --git a/plugins/postcss-logical-resize/src/lib/types.ts b/plugins/postcss-logical-resize/src/lib/types.ts new file mode 100644 index 000000000..23dadd9d6 --- /dev/null +++ b/plugins/postcss-logical-resize/src/lib/types.ts @@ -0,0 +1,36 @@ +export enum Direction { + Block = 'block', + Inline = 'inline', +} + +export enum DirectionValue { + Start = 'start', + End = 'end', +} + +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', +} + +export type DirectionConfig = { + [Direction.Block]: [Axes, Axes]; + [Direction.Inline]: [Axes, Axes]; + inlineIsHorizontal: boolean; +}; diff --git a/plugins/postcss-logical-resize/src/utils/direction-flow-to-axes.ts b/plugins/postcss-logical-resize/src/utils/direction-flow-to-axes.ts new file mode 100644 index 000000000..627a44479 --- /dev/null +++ b/plugins/postcss-logical-resize/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-resize/test/_import.mjs b/plugins/postcss-logical-resize/test/_import.mjs new file mode 100644 index 000000000..cd29efc0e --- /dev/null +++ b/plugins/postcss-logical-resize/test/_import.mjs @@ -0,0 +1,6 @@ +import assert from 'assert'; +import plugin from '@csstools/postcss-logical-resize'; +plugin(); + +assert.ok(plugin.postcss, 'should have "postcss flag"'); +assert.equal(typeof plugin, 'function', 'should return a function'); diff --git a/plugins/postcss-logical-resize/test/_require.cjs b/plugins/postcss-logical-resize/test/_require.cjs new file mode 100644 index 000000000..62e615f85 --- /dev/null +++ b/plugins/postcss-logical-resize/test/_require.cjs @@ -0,0 +1,6 @@ +const assert = require('assert'); +const plugin = require('@csstools/postcss-logical-resize'); +plugin(); + +assert.ok(plugin.postcss, 'should have "postcss flag"'); +assert.equal(typeof plugin, 'function', 'should return a function'); diff --git a/plugins/postcss-logical/test/resize.expect.css b/plugins/postcss-logical-resize/test/basic.bt.expect.css similarity index 100% rename from plugins/postcss-logical/test/resize.expect.css rename to plugins/postcss-logical-resize/test/basic.bt.expect.css diff --git a/plugins/postcss-logical/test/resize.chinese.expect.css b/plugins/postcss-logical-resize/test/basic.chinese.expect.css similarity index 100% rename from plugins/postcss-logical/test/resize.chinese.expect.css rename to plugins/postcss-logical-resize/test/basic.chinese.expect.css diff --git a/plugins/postcss-logical/test/resize.css b/plugins/postcss-logical-resize/test/basic.css similarity index 100% rename from plugins/postcss-logical/test/resize.css rename to plugins/postcss-logical-resize/test/basic.css diff --git a/plugins/postcss-logical-resize/test/basic.expect.css b/plugins/postcss-logical-resize/test/basic.expect.css new file mode 100644 index 000000000..923184399 --- /dev/null +++ b/plugins/postcss-logical-resize/test/basic.expect.css @@ -0,0 +1,7 @@ +.resize-block { + resize: vertical; +} + +.resize-inline { + resize: horizontal; +} diff --git a/plugins/postcss-logical-resize/test/basic.rtl-and-bt.expect.css b/plugins/postcss-logical-resize/test/basic.rtl-and-bt.expect.css new file mode 100644 index 000000000..923184399 --- /dev/null +++ b/plugins/postcss-logical-resize/test/basic.rtl-and-bt.expect.css @@ -0,0 +1,7 @@ +.resize-block { + resize: vertical; +} + +.resize-inline { + resize: horizontal; +} diff --git a/plugins/postcss-logical-resize/test/basic.rtl.expect.css b/plugins/postcss-logical-resize/test/basic.rtl.expect.css new file mode 100644 index 000000000..923184399 --- /dev/null +++ b/plugins/postcss-logical-resize/test/basic.rtl.expect.css @@ -0,0 +1,7 @@ +.resize-block { + resize: vertical; +} + +.resize-inline { + resize: horizontal; +} diff --git a/plugins/postcss-logical-resize/test/examples/example.chinese.expect.css b/plugins/postcss-logical-resize/test/examples/example.chinese.expect.css new file mode 100644 index 000000000..b0ea8839b --- /dev/null +++ b/plugins/postcss-logical-resize/test/examples/example.chinese.expect.css @@ -0,0 +1,7 @@ +.resize-block { + resize: horizontal; +} + +.resize-inline { + resize: vertical; +} diff --git a/plugins/postcss-logical-resize/test/examples/example.css b/plugins/postcss-logical-resize/test/examples/example.css new file mode 100644 index 000000000..23695ee66 --- /dev/null +++ b/plugins/postcss-logical-resize/test/examples/example.css @@ -0,0 +1,7 @@ +.resize-block { + resize: block; +} + +.resize-inline { + resize: inline; +} diff --git a/plugins/postcss-logical-resize/test/examples/example.expect.css b/plugins/postcss-logical-resize/test/examples/example.expect.css new file mode 100644 index 000000000..923184399 --- /dev/null +++ b/plugins/postcss-logical-resize/test/examples/example.expect.css @@ -0,0 +1,7 @@ +.resize-block { + resize: vertical; +} + +.resize-inline { + resize: horizontal; +} diff --git a/plugins/postcss-logical-resize/tsconfig.json b/plugins/postcss-logical-resize/tsconfig.json new file mode 100644 index 000000000..e0d06239c --- /dev/null +++ b/plugins/postcss-logical-resize/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "dist", + "declarationDir": "." + }, + "include": ["./src/**/*"], + "exclude": ["dist"], +} diff --git a/plugins/postcss-logical-viewport-units/package.json b/plugins/postcss-logical-viewport-units/package.json index 6f4a933fb..cfbfb5a13 100644 --- a/plugins/postcss-logical-viewport-units/package.json +++ b/plugins/postcss-logical-viewport-units/package.json @@ -64,7 +64,14 @@ }, "bugs": "https://github.com/csstools/postcss-plugins/issues", "keywords": [ - "postcss-plugin" + "block", + "css", + "inline", + "logical", + "padding", + "postcss", + "postcss-plugin", + "viewport units" ], "csstools": { "cssdbId": "logical-viewport-units", diff --git a/plugins/postcss-logical/.tape.mjs b/plugins/postcss-logical/.tape.mjs index 7a830f62b..a7628f499 100644 --- a/plugins/postcss-logical/.tape.mjs +++ b/plugins/postcss-logical/.tape.mjs @@ -57,16 +57,6 @@ postcssTape(plugin)({ inlineDirection: 'right-to-left', } }, - 'resize': { - message: 'supports logical "resize" property', - }, - 'resize:chinese': { - message: 'supports logical "resize" property { blockDirection: "right-to-left", inlineDirection: "top-to-bottom" }', - options: { - blockDirection: 'right-to-left', - inlineDirection: 'top-to-bottom' - }, - }, 'logical-size': { message: 'supports logical "block-size" & "inline-size" properties', }, diff --git a/plugins/postcss-logical/dist/index.cjs b/plugins/postcss-logical/dist/index.cjs index 443bbf5c3..e674b781c 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,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; +"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 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,d]=directionFlowToAxes(a.blockDirection),[c,f]=directionFlowToAxes(a.inlineDirection);if(!Object.values(i).every((r=>[s,d,c,f].includes(r))))throw new Error('[postcss-logical] "blockDirection" and "inlineDirection" must be on separate axes');const u={block:[s,d],inline:[c,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),"block-size":makeTransform(transformLogicalSize(u)),"inline-size":makeTransform(transformLogicalSize(u)),"margin-block-start":makeTransform(transformSide("margin",s)),"margin-block-end":makeTransform(transformSide("margin",d)),"margin-inline-start":makeTransform(transformSide("margin",c)),"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(d)),"inset-inline":makeTransform(transformOffsetShorthand(u.inline)),"inset-inline-start":makeTransform(transformOffset(c)),"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",d)),"padding-inline-start":makeTransform(transformSide("padding",c)),"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",d)),"border-inline-start-width":makeTransform(transformBorder("width",c)),"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",d)),"border-inline-start-style":makeTransform(transformBorder("style",c)),"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",d)),"border-inline-start-color":makeTransform(transformBorder("color",c)),"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([d])),"border-inline":makeTransform(transformBorderShorthand(u.inline)),"border-inline-start":makeTransform(transformBorderShorthand([c])),"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.mjs b/plugins/postcss-logical/dist/index.mjs index 6526aaeae..ac188eedd 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,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}; +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 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,d]=directionFlowToAxes(a.blockDirection),[c,f]=directionFlowToAxes(a.inlineDirection);if(!Object.values(i).every((r=>[s,d,c,f].includes(r))))throw new Error('[postcss-logical] "blockDirection" and "inlineDirection" must be on separate axes');const u={block:[s,d],inline:[c,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),"block-size":makeTransform(transformLogicalSize(u)),"inline-size":makeTransform(transformLogicalSize(u)),"margin-block-start":makeTransform(transformSide("margin",s)),"margin-block-end":makeTransform(transformSide("margin",d)),"margin-inline-start":makeTransform(transformSide("margin",c)),"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(d)),"inset-inline":makeTransform(transformOffsetShorthand(u.inline)),"inset-inline-start":makeTransform(transformOffset(c)),"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",d)),"padding-inline-start":makeTransform(transformSide("padding",c)),"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",d)),"border-inline-start-width":makeTransform(transformBorder("width",c)),"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",d)),"border-inline-start-style":makeTransform(transformBorder("style",c)),"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",d)),"border-inline-start-color":makeTransform(transformBorder("color",c)),"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([d])),"border-inline":makeTransform(transformBorderShorthand(u.inline)),"border-inline-start":makeTransform(transformBorderShorthand([c])),"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/package.json b/plugins/postcss-logical/package.json index 0cc6f7242..a973578d2 100644 --- a/plugins/postcss-logical/package.json +++ b/plugins/postcss-logical/package.json @@ -68,7 +68,30 @@ }, "bugs": "https://github.com/csstools/postcss-plugins/issues", "keywords": [ - "postcss-plugin" + "align", + "block", + "border", + "css", + "dir", + "directional", + "directions", + "end", + "flow", + "inline", + "logical", + "ltr", + "margin", + "padding", + "postcss", + "postcss-plugin", + "properties", + "property", + "relative", + "rtl", + "size", + "start", + "text", + "values" ], "csstools": { "cssdbId": "logical-properties-and-values", diff --git a/plugins/postcss-logical/src/index.ts b/plugins/postcss-logical/src/index.ts index 75a0e9a40..983e33054 100644 --- a/plugins/postcss-logical/src/index.ts +++ b/plugins/postcss-logical/src/index.ts @@ -12,7 +12,6 @@ import { transformOffsetShorthand, } from './lib/transform-offset'; import { transformInset } from './lib/transform-inset'; -import { transformResize } from './lib/transform-resize'; import { transformSide, transformSideShorthand, @@ -101,8 +100,6 @@ const creator: PluginCreator = (opts?: pluginOptions) => { ? transformTextAlign(directionConfig.inline) : null, ), - // 2.4 Resize - 'resize': makeTransform(transformResize(directionConfig)), // 4.1 Block Size and Inline Size 'block-size': makeTransform(transformLogicalSize(directionConfig)), 'inline-size': makeTransform(transformLogicalSize(directionConfig)), diff --git a/rollup/configs/externals.mjs b/rollup/configs/externals.mjs index cb9377987..8b3e17475 100644 --- a/rollup/configs/externals.mjs +++ b/rollup/configs/externals.mjs @@ -19,6 +19,9 @@ export const externalsForCLI = [ '@csstools/postcss-hwb-function', '@csstools/postcss-ic-unit', '@csstools/postcss-is-pseudo-class', + '@csstools/postcss-logical-float-and-clear', + '@csstools/postcss-logical-resize', + '@csstools/postcss-logical-viewport-units', '@csstools/postcss-media-queries-aspect-ratio-number-values', '@csstools/postcss-nested-calc', '@csstools/postcss-normalize-display-values', @@ -94,6 +97,8 @@ export const externalsForPlugin = [ '@csstools/postcss-ic-unit', '@csstools/postcss-is-pseudo-class', '@csstools/postcss-logical-float-and-clear', + '@csstools/postcss-logical-resize', + '@csstools/postcss-logical-viewport-units', '@csstools/postcss-media-queries-aspect-ratio-number-values', '@csstools/postcss-nested-calc', '@csstools/postcss-normalize-display-values',