Migrate postcss-logical

plugins/postcss-logical/.gitignore

@@ -1,12 +1,13 @@
 node_modules
-index.*.*
+dist
 package-lock.json
 yarn.lock
 *.log*
 *.result.css
-.*
+*.result.css.map
 !.editorconfig
 !.gitignore
 !.rollup.js
 !.tape.js
+!.travis.yml
 !.github

plugins/postcss-logical/INSTALL.md

@@ -14,15 +14,7 @@ Add [PostCSS Logical Properties and Values] to your project:
 npm install postcss-logical --save-dev
 ```
 
-Use [PostCSS Logical Properties and Values] to process your CSS:
-
-```js
-const postcssLogical = require('postcss-logical');
-
-postcssLogical.process(YOUR_CSS /*, processOptions, pluginOptions */);
-```
-
-Or use it as a [PostCSS] plugin:
+Use [PostCSS Logical Properties and Values] as a [PostCSS] plugin:
 
 ```js
 const postcss = require('postcss');
@@ -167,6 +159,6 @@ grunt.initConfig({
 [PostCSS]: https://github.com/postcss/postcss
 [PostCSS CLI]: https://github.com/postcss/postcss-cli
 [PostCSS Loader]: https://github.com/postcss/postcss-loader
-[PostCSS Logical Properties and Values]: https://github.com/csstools/postcss-logical
+[PostCSS Logical Properties and Values]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical
 [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss
 [React App Rewired]: https://github.com/timarney/react-app-rewired

plugins/postcss-logical/README.md

@@ -142,15 +142,7 @@ Add [PostCSS Logical Properties and Values] to your project:
 npm install postcss-logical --save-dev
 ```
 
-Use [PostCSS Logical Properties and Values] to process your CSS:
-
-```js
-const postcssLogical = require('postcss-logical');
-
-postcssLogical.process(YOUR_CSS /*, processOptions, pluginOptions */);
-```
-
-Or use it as a [PostCSS] plugin:
+Use [PostCSS Logical Properties and Values] as a [PostCSS] plugin:
 
 ```js
 const postcss = require('postcss');
@@ -186,8 +178,8 @@ the `dir` option will be ignored.
 
 [css-img]: https://cssdb.org/badge/logical-properties-and-values.svg
 [css-url]: https://cssdb.org/#logical-properties-and-values
-[cli-img]: https://github.com/csstools/postcss-logical/workflows/test/badge.svg
-[cli-url]: https://github.com/csstools/postcss-logical/actions/workflows/test.yml?query=workflow/test
+[cli-img]: https://github.com/csstools/postcss-plugins/workflows/test/badge.svg
+[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
 [git-img]: https://img.shields.io/badge/support-chat-blue.svg
 [git-url]: https://gitter.im/postcss/postcss
 [npm-img]: https://img.shields.io/npm/v/postcss-logical.svg
@@ -198,4 +190,4 @@ the `dir` option will be ignored.
 [Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
 [PostCSS]: https://github.com/postcss/postcss
 [PostCSS Loader]: https://github.com/postcss/postcss-loader
-[PostCSS Logical Properties and Values]: https://github.com/csstools/postcss-logical
+[PostCSS Logical Properties and Values]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical

plugins/postcss-logical/package.json

@@ -4,54 +4,36 @@
   "description": "Use logical properties and values in CSS",
   "author": "Jonathan Neal <jonathantneal@hotmail.com>",
   "license": "CC0-1.0",
-  "repository": "csstools/postcss-logical",
-  "homepage": "https://github.com/csstools/postcss-logical#readme",
-  "bugs": "https://github.com/csstools/postcss-logical/issues",
-  "main": "index.cjs.js",
-  "module": "index.esm.mjs",
+  "homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical#readme",
+  "bugs": "https://github.com/csstools/postcss-plugins/issues",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
   "files": [
-    "index.cjs.js",
-    "index.cjs.js.map",
-    "index.esm.mjs",
-    "index.esm.mjs.map"
+    "CHANGELOG.md",
+    "INSTALL.md",
+    "LICENSE.md",
+    "README.md",
+    "dist"
   ],
+  "bin": {
+    "postcss-logical": "dist/cli.mjs"
+  },
   "scripts": {
-    "build": "rollup --config .rollup.js --silent",
-    "prepublishOnly": "npm test",
-    "pretest:tape": "npm run build",
-    "test": "npm run test:js && npm run test:tape",
-    "test:js": "eslint src/{*,**/*}.js --cache --ignore-path .gitignore --quiet",
-    "test:tape": "postcss-tape"
+    "prepublishOnly": "npm run build && npm run test",
+    "lint": "eslint src/**/*.js",
+    "test": "postcss-tape",
+    "build": "rollup -c ../../rollup/default.js",
+    "stryker": "stryker run --logLevel error"
   },
   "engines": {
-    "node": ">=12"
-  },
-  "peerDependencies": {
-    "postcss": "^8.3"
+    "node": "^12 || ^14 || >=16"
   },
   "devDependencies": {
-    "@babel/core": "7.15.5",
-    "@babel/preset-env": "7.15.6",
-    "@rollup/plugin-babel": "5.3.0",
-    "eslint": "7.32.0",
     "postcss": "8.3.6",
-    "postcss-tape": "6.0.1",
-    "pre-commit": "1.2.2",
-    "rollup": "2.56.3"
+    "postcss-tape": "6.0.1"
   },
-  "eslintConfig": {
-    "env": {
-      "browser": true,
-      "es6": true,
-      "node": true
-    },
-    "extends": "eslint:recommended",
-    "parserOptions": {
-      "ecmaVersion": 2020,
-      "impliedStrict": true,
-      "sourceType": "module"
-    },
-    "root": true
+  "peerDependencies": {
+    "postcss": "^8.3"
   },
   "keywords": [
     "postcss",
@@ -80,5 +62,10 @@
     "padding",
     "size",
     "text"
-  ]
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/csstools/postcss-plugins.git",
+    "directory": "plugins/postcss-logical"
+  }
 }

plugins/postcss-logical/src/cli.js

@@ -0,0 +1,16 @@
+import plugin from './index';
+import { cli, helpTextLogger } from '@csstools/base-cli';
+
+cli(
+	plugin,
+	['dir', 'preserve'],
+	helpTextLogger(
+		'postcss-logical',
+		'PostCSS Logical',
+		'Lets you use logical, rather than physical, direction and dimension mappings in CSS, following the CSS Logical Properties and Values specification.',
+		{
+			dir: 'ltr|rtl',
+			preserve: true,
+		},
+	),
+);

plugins/postcss-logical/src/index.js

@@ -29,8 +29,8 @@ function postcssLogicalProperties(opts) {
 			if (!parent.nodes.length) {
 				parent.remove();
 			}
-		}
-	}
+		};
+	};
 
 	const makeTransformWithoutSplittingValues = (transform) => {
 		return (decl) => {
@@ -40,8 +40,8 @@ function postcssLogicalProperties(opts) {
 			if (!parent.nodes.length) {
 				parent.remove();
 			}
-		}
-	}
+		};
+	};
 
 	return {
 		postcssPlugin: 'postcss-logical-properties',
@@ -126,8 +126,8 @@ function postcssLogicalProperties(opts) {
 
 			// Transition helpers
 			'transition': makeTransform(transformTransition),
-			'transition-property': makeTransform(transformTransition)
-		}
+			'transition-property': makeTransform(transformTransition),
+		},
 	};
 }
 postcssLogicalProperties.postcss = true;

plugins/postcss-logical/src/lib/clone-decl.js

@@ -3,5 +3,5 @@ import matchInsetPrefix from './match-inset-prefix';
 
 export default (decl, suffix, value) => decl.cloneBefore({
 	prop: `${decl.prop.replace(matchSide, '$1')}${suffix}`.replace(matchInsetPrefix, ''),
-	value
+	value,
 });

plugins/postcss-logical/src/lib/clone-rule.js

@@ -2,10 +2,10 @@ import postcss from 'postcss';
 
 export default (decl, dir) => {
 	const rule = Object(decl.parent).type === 'rule' ? decl.parent.cloneBefore({
-		raws: {}
+		raws: {},
 	}).removeAll() : postcss.rule({ selector: '&' });
 
-	rule.assign({'selectors': rule.selectors.map(selector => `${selector}:dir(${dir})`)})
+	rule.assign({'selectors': rule.selectors.map(selector => `${selector}:dir(${dir})`)});
 
 	return rule;
 };

plugins/postcss-logical/src/lib/split.js

@@ -44,7 +44,7 @@ function splitByRegExp(string, re, isTrimmed) {
 			buffer = '';
 			split = false;
 		} else {
-			buffer += char
+			buffer += char;
 		}
 	}
 

plugins/postcss-logical/src/lib/transform-border-radius.js

@@ -24,13 +24,13 @@ export default (decl, values, dir, preserve) => {
 
 function lDecl(decl) {
 	return decl.cloneBefore({
-		prop: decl.prop.replace(logicalRadii, ($, prefix, direction, suffix) => `${prefix}${ltrRadii[direction]}${suffix}`)
+		prop: decl.prop.replace(logicalRadii, ($, prefix, direction, suffix) => `${prefix}${ltrRadii[direction]}${suffix}`),
 	});
 }
 
 function rDecl(decl) {
 	return decl.cloneBefore({
-		prop: decl.prop.replace(logicalRadii, ($, prefix, direction, suffix) => `${prefix}${rtlRadii[direction]}${suffix}`)
+		prop: decl.prop.replace(logicalRadii, ($, prefix, direction, suffix) => `${prefix}${rtlRadii[direction]}${suffix}`),
 	});
 }