logical-resize (#792)

* logical-resize

* rebuild

Author: romainmenke

.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

.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

.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/**

package-lock.json

@@ -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

plugins/postcss-logical-float-and-clear/INSTALL.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

plugins/postcss-logical-float-and-clear/README.md

@@ -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"
+	}
 }

plugins/postcss-logical-float-and-clear/package.json

@@ -0,0 +1,6 @@
+node_modules
+package-lock.json
+yarn.lock
+*.result.css
+*.result.css.map
+*.result.html

plugins/postcss-logical-resize/.gitignore

@@ -0,0 +1 @@
+v18.8.0

plugins/postcss-logical-resize/.nvmrc

@@ -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'
+		}
+	},
+});