From 44c8cff5bb18ba84f140999b0ac51d19985873f7 Mon Sep 17 00:00:00 2001 From: Matt Jennings Date: Sun, 7 Apr 2024 18:28:50 -0500 Subject: [PATCH 1/2] chore: polyfill css :has with postcss plugin --- site/docusaurus.config.ts | 6 +++- site/package-lock.json | 68 +++++++++++++++++++++++++++++++++++++++ site/package.json | 1 + 3 files changed, 74 insertions(+), 1 deletion(-) diff --git a/site/docusaurus.config.ts b/site/docusaurus.config.ts index 2e7b4703c..df257b67c 100644 --- a/site/docusaurus.config.ts +++ b/site/docusaurus.config.ts @@ -173,7 +173,11 @@ const config: Config = { }) ] }; - } + }, + configurePostCss(postcssOptions) { + postcssOptions.plugins.push(require('css-has-pseudo')); + return postcssOptions; + }, }; }, [ diff --git a/site/package-lock.json b/site/package-lock.json index 9f2f7823c..01e9d85c1 100644 --- a/site/package-lock.json +++ b/site/package-lock.json @@ -29,6 +29,7 @@ "@docusaurus/module-type-aliases": "3.0.0", "@docusaurus/tsconfig": "^3.0.0", "@types/react": "^18.2.29", + "css-has-pseudo": "^6.0.3", "micromark-extension-mdxjs": "^3.0.0", "patch-package": "^8.0.0", "ts-loader": "^9.5.1", @@ -2149,6 +2150,28 @@ "node": ">=0.1.90" } }, + "node_modules/@csstools/selector-specificity": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.3.tgz", + "integrity": "sha512-KEPNw4+WW5AVEIyzC80rTbWEUatTW2lXpN8+8ILC8PiPeWPjwUzrPZDIOZ2wwqDmeqOYTdSGyL3+vE5GC3FB3Q==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "postcss-selector-parser": "^6.0.13" + } + }, "node_modules/@discoveryjs/json-ext": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz", @@ -5300,6 +5323,33 @@ "postcss": "^8.0.9" } }, + "node_modules/css-has-pseudo": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-6.0.3.tgz", + "integrity": "sha512-qIsDxK/z0byH/mpNsv5hzQ5NOl8m1FRmOLgZpx4bG5uYHnOlO2XafeMI4mFIgNSViHwoUWcxSJZyyijaAmbs+A==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "dependencies": { + "@csstools/selector-specificity": "^3.0.3", + "postcss-selector-parser": "^6.0.13", + "postcss-value-parser": "^4.2.0" + }, + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, "node_modules/css-loader": { "version": "6.8.1", "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz", @@ -17519,6 +17569,13 @@ "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==", "optional": true }, + "@csstools/selector-specificity": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.3.tgz", + "integrity": "sha512-KEPNw4+WW5AVEIyzC80rTbWEUatTW2lXpN8+8ILC8PiPeWPjwUzrPZDIOZ2wwqDmeqOYTdSGyL3+vE5GC3FB3Q==", + "dev": true, + "requires": {} + }, "@discoveryjs/json-ext": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz", @@ -19908,6 +19965,17 @@ "integrity": "sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==", "requires": {} }, + "css-has-pseudo": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-6.0.3.tgz", + "integrity": "sha512-qIsDxK/z0byH/mpNsv5hzQ5NOl8m1FRmOLgZpx4bG5uYHnOlO2XafeMI4mFIgNSViHwoUWcxSJZyyijaAmbs+A==", + "dev": true, + "requires": { + "@csstools/selector-specificity": "^3.0.3", + "postcss-selector-parser": "^6.0.13", + "postcss-value-parser": "^4.2.0" + } + }, "css-loader": { "version": "6.8.1", "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz", diff --git a/site/package.json b/site/package.json index 2211cc713..8d8b81fec 100644 --- a/site/package.json +++ b/site/package.json @@ -36,6 +36,7 @@ "@docusaurus/module-type-aliases": "3.0.0", "@docusaurus/tsconfig": "^3.0.0", "@types/react": "^18.2.29", + "css-has-pseudo": "^6.0.3", "micromark-extension-mdxjs": "^3.0.0", "patch-package": "^8.0.0", "ts-loader": "^9.5.1", From 6214891bd3b3f76788a04584ca212e9083369907 Mon Sep 17 00:00:00 2001 From: Matt Jennings Date: Sun, 7 Apr 2024 18:47:40 -0500 Subject: [PATCH 2/2] docs: use js polyfill for css-has-pseudo --- site/docusaurus.config.ts | 6 +++++- site/src/pages/index.tsx | 1 + site/src/polyfills/css-has.js | 5 +++++ 3 files changed, 11 insertions(+), 1 deletion(-) create mode 100644 site/src/polyfills/css-has.js diff --git a/site/docusaurus.config.ts b/site/docusaurus.config.ts index df257b67c..19b7450f4 100644 --- a/site/docusaurus.config.ts +++ b/site/docusaurus.config.ts @@ -311,7 +311,11 @@ const config: Config = { */ playgroundPosition: 'bottom' } - } as ClassicPresetThemeConfig + } as ClassicPresetThemeConfig, + + clientModules: [ + './src/polyfills/css-has.js' + ] }; export default config; diff --git a/site/src/pages/index.tsx b/site/src/pages/index.tsx index e26c8f104..0f881eec3 100644 --- a/site/src/pages/index.tsx +++ b/site/src/pages/index.tsx @@ -5,6 +5,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import Layout from '@theme/Layout'; import HomepageFeatures from '@site/src/components/HomepageFeatures'; + import styles from './index.module.css'; function HomepageHeader() { diff --git a/site/src/polyfills/css-has.js b/site/src/polyfills/css-has.js new file mode 100644 index 000000000..2750e9dfb --- /dev/null +++ b/site/src/polyfills/css-has.js @@ -0,0 +1,5 @@ +import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; + +if (ExecutionEnvironment.canUseDOM) { + require('css-has-pseudo/browser').cssHasPseudo(document); +} \ No newline at end of file