Migrate postcss-focus-within (#32)

Author: romainmenke

plugins/postcss-focus-within/.editorconfig

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

plugins/postcss-focus-within/.gitattributes

@@ -165,6 +165,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]: https://github.com/csstools/postcss-focus-within
+[PostCSS]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-within
 [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss
 [React App Rewired]: https://github.com/timarney/react-app-rewired

plugins/postcss-focus-within/.github/workflows/test.yml

@@ -2,7 +2,7 @@
 
 [<img alt="npm version" src="https://img.shields.io/npm/v/postcss-focus-within.svg" height="20">][npm-url]
 [<img alt="CSS Standard Status" src="https://cssdb.org/badge/focus-within-pseudo-class.svg" height="20">][css-url]
-[<img alt="Build Status" src="https://github.com/csstools/postcss-focus-within/workflows/test/badge.svg" height="20">][cli-url]
+[<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/tree/main/postcss-focus-within/workflows/test/badge.svg" height="20">][cli-url]
 [<img alt="support chat" src="https://img.shields.io/badge/support-chat-blue.svg" height="20">][git-url]
 
 [PostCSS Focus Within] lets you use the `:focus-within` pseudo-class in CSS,
@@ -116,14 +116,14 @@ focusWithin({ replaceWith: '.focus-within' });
 ```
 
 [css-url]: https://cssdb.org/#focus-within-pseudo-class
-[cli-url]: https://github.com/csstools/postcss-focus-within/actions/workflows/test.yml?query=workflow/test
+[cli-url]: https://github.com/csstools/postcss-plugins/tree/main/postcss-focus-within/actions/workflows/test.yml?query=workflow/test
 [git-url]: https://gitter.im/postcss/postcss
 [npm-url]: https://www.npmjs.com/package/postcss-focus-within
 
 [focus-within polyfill]: https://github.com/jsxtools/focus-within
 [Gulp PostCSS]: https://github.com/postcss/gulp-postcss
 [Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
 [PostCSS]: https://github.com/postcss/postcss
-[PostCSS Focus Within]: https://github.com/csstools/postcss-focus-within
+[PostCSS Focus Within]: https://github.com/csstools/postcss-plugins/tree/main/postcss-focus-within
 [PostCSS Loader]: https://github.com/postcss/postcss-loader
 [Selectors Level 4 specification]: https://www.w3.org/TR/selectors-4/#the-focus-within-pseudo

plugins/postcss-focus-within/.gitignore

@@ -5,96 +5,40 @@
   "author": "Jonathan Neal <jonathantneal@hotmail.com>",
   "license": "CC0-1.0",
   "repository": "csstools/postcss-focus-within",
-  "homepage": "https://github.com/csstools/postcss-focus-within#readme",
-  "bugs": "https://github.com/csstools/postcss-focus-within/issues",
+  "homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-within#readme",
+  "bugs": "https://github.com/csstools/postcss-plugins/issues",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs",
-      "types": "./dist/index.d.ts"
-    }
-  },
+  "types": "dist/index.d.ts",
   "files": [
+    "CHANGELOG.md",
+    "INSTALL.md",
+    "LICENSE.md",
+    "README.md",
     "dist"
   ],
+  "bin": {
+    "postcss-focus-within": "dist/cli.mjs"
+  },
   "scripts": {
-    "build": "npx rollup -c .rollup.js",
-    "build:watch": "npx rollup -c .rollup.js --watch",
-    "lint": "npx eslint --cache src",
-    "lint:fix": "npx eslint --cache --fix",
-    "prepublishOnly": "npm test",
-    "pretest": "npm install && npm run build",
-    "test": "npm run lint && npm run tape",
-    "tape": "npx postcss-tape"
+    "prepublishOnly": "npm run build && npm run test",
+    "lint": "eslint src/**/*.ts",
+    "test": "postcss-tape",
+    "build": "rollup -c ../../rollup/default.ts.js",
+    "stryker": "stryker run --logLevel error"
   },
   "engines": {
-    "node": ">=12"
+    "node": "^12 || ^14 || >=16"
   },
-  "peerDependencies": {
-    "postcss": "^8.3"
+  "dependencies": {
+    "postcss-selector-parser": "6.0.6"
   },
   "devDependencies": {
-    "@babel/core": "7.15.5",
-    "@babel/preset-env": "7.15.6",
-    "eslint": "7.32.0",
     "postcss": "8.3.6",
-    "postcss-tape": "6.0.1",
-    "pre-commit": "1.2.2",
-    "rollup": "2.57.0",
-    "rollup-plugin-babel": "4.4.0",
-    "rollup-plugin-copy": "^3.4.0"
+    "postcss-tape": "6.0.1"
   },
-  "babel": {
-    "presets": [
-      [
-        "@babel/env",
-        {
-          "targets": "maintained node versions"
-        }
-      ]
-    ]
-  },
-  "eslintConfig": {
-    "env": {
-      "es6": true,
-      "node": true
-    },
-    "extends": "eslint:recommended",
-    "parserOptions": {
-      "ecmaVersion": 2020,
-      "sourceType": "module"
-    }
-  },
-  "rollup": {
-    "input": "src/index.js",
-    "plugins": [
-      "rollup-plugin-babel",
-      [
-        "rollup-plugin-copy",
-        {
-          "targets": [
-            {
-              "src": "./src/index.d.ts",
-              "dest": "./dist"
-            }
-          ]
-        }
-      ]
-    ],
-    "output": [
-      {
-        "exports": "default",
-        "file": "dist/index.cjs",
-        "format": "cjs"
-      },
-      {
-        "file": "dist/index.mjs",
-        "format": "esm"
-      }
-    ]
+  "peerDependencies": {
+    "postcss": "^8.3"
   },
   "keywords": [
     "postcss",

plugins/postcss-focus-within/.rollup.js

@@ -0,0 +1,16 @@
+import plugin from './index';
+import { cli, helpTextLogger } from '@csstools/base-cli';
+
+cli(
+	plugin,
+	['preserve', 'replaceWith'],
+	helpTextLogger(
+		'postcss-focus-within',
+		'PostCSS Focus Within',
+		'Lets you use the `:focus-within` pseudo-class in CSS, following the Selectors Level 4 specification.',
+		{
+			preserve: true,
+			replaceWith: '.focus-within',
+		},
+	),
+);

plugins/postcss-focus-within/CONTRIBUTING.md

@@ -0,0 +1,42 @@
+import parser from 'postcss-selector-parser';
+import type { PluginCreator } from 'postcss';
+
+const selectorRegExp = /(?<!\\):focus-within([^\w-]|$)/gi;
+
+const creator: PluginCreator<{ preserve?: boolean, replaceWith?: string }> = (opts?: { preserve?: boolean, replaceWith?: string }) => {
+	const replaceWith = String(Object(opts).replaceWith || '[focus-within]');
+	const preserve = Boolean('preserve' in Object(opts) ? opts.preserve : true);
+	const replacementAST = parser().astSync(replaceWith);
+
+	return {
+		postcssPlugin: 'postcss-focus-within',
+		Rule: (rule)=> {
+			if (!selectorRegExp.test(rule.selector)) {
+				return;
+			}
+
+			const modifiedSelectorAST = parser((selectors) => {
+				selectors.walkPseudos((pseudo) => {
+					if (pseudo.value !== ':focus-within') {
+						return;
+					}
+
+					pseudo.replaceWith(replacementAST.clone({}));
+				});
+			}).processSync(rule.selector);
+
+			const clone = rule.clone({ selector: String(modifiedSelectorAST) });
+
+			if (preserve) {
+				rule.before(clone);
+			} else {
+				rule.replaceWith(clone);
+			}
+		},
+	};
+};
+
+creator.postcss = true;
+
+export default creator;
+