add initial marp implementation with sample content and build configuration

node_modules/@csstools/postcss-is-pseudo-class/CHANGELOG.md

@@ -0,0 +1,9 @@
+# Changes to PostCSS Is Pseudo Class
+
+### 5.0.3
+
+_June 11, 2025_
+
+- Fix support for more complex selector patterns. `.a > :is(.b > .c)` -> `.a.b > .c`
+
+[Full CHANGELOG](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-is-pseudo-class/CHANGELOG.md)

node_modules/@csstools/postcss-is-pseudo-class/LICENSE.md

@@ -0,0 +1,18 @@
+MIT No Attribution (MIT-0)
+
+Copyright © CSSTools Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the “Software”), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

node_modules/@csstools/postcss-is-pseudo-class/README.md

@@ -0,0 +1,253 @@
+# PostCSS Is Pseudo [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS" width="90" height="90" align="right">][postcss]
+
+[![NPM Version][npm-img]][npm-url]
+[<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/actions/workflows/test.yml/badge.svg?branch=main" height="20">][cli-url]
+[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
+<br><br>
+[<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/is-pseudo-class.svg" height="20">][css-url]
+[![CSS Standard Status][css-img]][css-url]
+
+[PostCSS Is Pseudo Class] lets you use the `:is` pseudo class function, following the
+[CSS Selector] specification.
+
+```css
+:is(input, button):is(:hover, :focus) {
+	order: 1;
+}
+```
+
+Becomes :
+
+```css
+input:hover {
+	order: 1;
+}
+input:focus {
+	order: 1;
+}
+button:hover {
+	order: 1;
+}
+button:focus {
+	order: 1;
+}
+```
+
+## Usage
+
+Add [PostCSS Is Pseudo Class] to your project:
+
+```bash
+npm install @csstools/postcss-is-pseudo-class --save-dev
+```
+
+Use [PostCSS Is Pseudo Class] as a [PostCSS] plugin:
+
+```js
+import postcss from 'postcss';
+import postcssIsPseudoClass from '@csstools/postcss-is-pseudo-class';
+
+postcss([
+  postcssIsPseudoClass(/* pluginOptions */)
+]).process(YOUR_CSS /*, processOptions */);
+```
+
+[PostCSS Is Pseudo Class] runs in all Node environments, with special instructions for:
+
+| [Node](INSTALL.md#node) | [Webpack](INSTALL.md#webpack) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
+| --- | --- | --- | --- |
+
+## Options
+
+### preserve
+
+The `preserve` option determines whether the original notation
+is preserved. By default, it is not preserved.
+
+```js
+postcss([
+  postcssIsPseudoClass({ preserve: true })
+]).process(YOUR_CSS /*, processOptions */);
+```
+
+```css
+:is(input, button):is(:hover, :focus) {
+	order: 1;
+}
+```
+
+Becomes :
+
+```css
+input:hover {
+	order: 1;
+}
+input:focus {
+	order: 1;
+}
+button:hover {
+	order: 1;
+}
+button:focus {
+	order: 1;
+}
+:is(input, button):is(:hover, :focus) {
+	order: 1;
+}
+```
+
+### specificityMatchingName
+
+The `specificityMatchingName` option allows you to change the selector used to adjust specificity.
+The default value is `does-not-exist`.
+If this is an actual class, id or tag name in your code, you will need to set a different option here.
+
+See how `:not` is used to modify [specificity](#specificity).
+
+```js
+postcss([
+  postcssIsPseudoClass({ specificityMatchingName: 'something-random' })
+]).process(YOUR_CSS /*, processOptions */);
+```
+
+```css
+:is(.button, button):hover {
+	order: 7;
+}
+```
+
+Becomes :
+
+```css
+.button:hover {
+	order: 7;
+}
+
+button:not(.something-random):hover {
+	order: 7;
+}
+```
+
+### onComplexSelector
+
+Warn on complex selectors in `:is` pseudo class functions.
+
+```js
+postcss([
+  postcssIsPseudoClass({ onComplexSelector: 'warning' })
+]).process(YOUR_CSS /*, processOptions */);
+```
+
+### onPseudoElement
+
+Warn when pseudo elements are used in `:is` pseudo class functions.
+
+⚠️ Pseudo elements are always invalid and will be transformed to `::-csstools-invalid-<pseudo-name>`.
+
+```js
+postcss([
+  postcssIsPseudoClass({ onPseudoElement: 'warning' })
+]).process(YOUR_CSS /*, processOptions */);
+```
+
+```css
+:is(::after):hover {
+	order: 1.0;
+}
+
+/* becomes */
+
+::-csstools-invalid-after:hover {
+	order: 1.0;
+}
+```
+
+## ⚠️ Known shortcomings
+
+### Specificity
+
+`:is` takes the specificity of the most specific list item.
+We can increase specificity with `:not` selectors, but we can't decrease it.
+
+Converted selectors are ensured to have the same specificity as `:is` for the most important bit.
+Less important bits can have higher specificity that `:is`.
+
+Before :
+
+[specificity: 0, 2, 0](https://polypane.app/css-specificity-calculator/#selector=%3Ais(%3Ahover%2C%20%3Afocus)%3Ais(.button%2C%20button))
+
+```css
+:is(:hover, :focus):is(.button, button) {
+	order: 7;
+}
+```
+
+After :
+
+```css
+/* specificity: [0, 2, 0] */
+.button:hover {
+	order: 7;
+}
+
+/* specificity: [0, 2, 1] */
+/* last bit is higher than it should be, but middle bit matches */
+button:not(.does-not-exist):hover {
+	order: 7;
+}
+
+/* specificity: [0, 2, 0] */
+.button:focus {
+	order: 7;
+}
+
+/* specificity: [0, 2, 1] */
+/* last bit is higher than it should be, but middle bit matches */
+button:not(.does-not-exist):focus {
+	order: 7;
+}
+```
+
+### Complex selectors
+
+Before :
+
+
+```css
+:is(.alpha > .beta) ~ :is(:focus > .beta) {
+	order: 2;
+}
+```
+
+After :
+
+```css
+.alpha > .beta ~ :focus > .beta {
+	order: 2;
+}
+```
+
+_this is a different selector than expected as `.beta ~ :focus` matches `.beta` followed by `:focus`._<br>
+_avoid these cases._<br>
+_writing the selector without `:is()` is advised here_
+
+```css
+/* without is */
+.alpha:focus > .beta ~ .beta {
+	order: 2;
+}
+```
+
+If you have a specific pattern you can open an issue to discuss it.
+We can detect and transform some cases but can't generalize them into a single solution that tackles all of them. 
+
+[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
+[css-img]: https://cssdb.org/images/badges/is-pseudo-class.svg
+[css-url]: https://cssdb.org/#is-pseudo-class
+[discord]: https://discord.gg/bUadyRwkJS
+[npm-img]: https://img.shields.io/npm/v/@csstools/postcss-is-pseudo-class.svg
+[npm-url]: https://www.npmjs.com/package/@csstools/postcss-is-pseudo-class
+
+[CSS Selector]: https://www.w3.org/TR/selectors-4/#matches
+[PostCSS]: https://github.com/postcss/postcss
+[PostCSS Is Pseudo Class]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-is-pseudo-class

node_modules/@csstools/postcss-is-pseudo-class/dist/index.d.ts

@@ -0,0 +1,27 @@
+import type { PluginCreator } from 'postcss';
+
+declare const creator: PluginCreator<pluginOptions>;
+export default creator;
+
+/** postcss-is-pseudo-class plugin options */
+export declare type pluginOptions = {
+    /** Preserve the original notation. default: false */
+    preserve?: boolean;
+    /**
+     * Warn on complex selectors in `:is` pseudo class functions.
+     * default: _not set_
+     */
+    onComplexSelector?: 'warning';
+    /**
+     * Warn when pseudo elements are used in `:is` pseudo class functions.
+     * default: _not set_
+     */
+    onPseudoElement?: 'warning';
+    /**
+     * Change the selector used to adjust specificity.
+     * default: `does-not-exist`.
+     */
+    specificityMatchingName?: string;
+};
+
+export { }

node_modules/@csstools/postcss-is-pseudo-class/package.json

@@ -0,0 +1,65 @@
+{
+	"name": "@csstools/postcss-is-pseudo-class",
+	"description": "A pseudo-class for matching elements in a selector list",
+	"version": "5.0.3",
+	"author": "Jonathan Neal <jonathantneal@hotmail.com>",
+	"license": "MIT-0",
+	"funding": [
+		{
+			"type": "github",
+			"url": "https://github.com/sponsors/csstools"
+		},
+		{
+			"type": "opencollective",
+			"url": "https://opencollective.com/csstools"
+		}
+	],
+	"engines": {
+		"node": ">=18"
+	},
+	"type": "module",
+	"main": "dist/index.cjs",
+	"module": "dist/index.mjs",
+	"exports": {
+		".": {
+			"import": {
+				"types": "./dist/index.d.ts",
+				"default": "./dist/index.mjs"
+			},
+			"require": {
+				"default": "./dist/index.cjs"
+			}
+		}
+	},
+	"files": [
+		"CHANGELOG.md",
+		"LICENSE.md",
+		"README.md",
+		"dist"
+	],
+	"dependencies": {
+		"@csstools/selector-specificity": "^5.0.0",
+		"postcss-selector-parser": "^7.0.0"
+	},
+	"peerDependencies": {
+		"postcss": "^8.4"
+	},
+	"scripts": {},
+	"homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-is-pseudo-class#readme",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/csstools/postcss-plugins.git",
+		"directory": "plugins/postcss-is-pseudo-class"
+	},
+	"bugs": "https://github.com/csstools/postcss-plugins/issues",
+	"keywords": [
+		"css",
+		"is",
+		"matches",
+		"polyfill",
+		"postcss",
+		"postcss-plugin",
+		"pseudo",
+		"selector"
+	]
+}