From 714968c3e4f107be8932b2017fcff8a4b85ce305 Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Sat, 19 Nov 2022 19:20:45 +0100 Subject: [PATCH 1/2] Creating sample doc --- plugins/css-has-pseudo/README.md | 15 +++++++++++++++ plugins/css-has-pseudo/docs/README.md | 15 +++++++++++++++ 2 files changed, 30 insertions(+) diff --git a/plugins/css-has-pseudo/README.md b/plugins/css-has-pseudo/README.md index cb65999c0..369358f2d 100644 --- a/plugins/css-has-pseudo/README.md +++ b/plugins/css-has-pseudo/README.md @@ -160,6 +160,21 @@ Without the version, you might unexpectedly get a new major version of the libra Internet Explorer 11. With a [Mutation Observer polyfill](https://github.com/webmodules/mutation-observer), the script will work down to Internet Explorer 9. +### Using with Next.js + +Given that Next.js imports packages both on the browser and on the server, you need to make sure that the package is only imported on the browser. + +As outlined in the [Next.js documentation](https://nextjs.org/docs/advanced-features/dynamic-import#with-external-libraries), you need to load the package with a dynamic import: + +```jsx +useEffect(async () => { + const cssHasPseudo = (await import('css-has-pseudo/browser')).default; + cssHasPseudo(document); +}, []); +``` + +We recommend you load the polyfill as high up on your Next application as possible, such as your `pages/_app.ts` file. + ### Browser Usage #### hover diff --git a/plugins/css-has-pseudo/docs/README.md b/plugins/css-has-pseudo/docs/README.md index 66592a64d..d1c7006c1 100644 --- a/plugins/css-has-pseudo/docs/README.md +++ b/plugins/css-has-pseudo/docs/README.md @@ -136,6 +136,21 @@ Without the version, you might unexpectedly get a new major version of the libra Internet Explorer 11. With a [Mutation Observer polyfill](https://github.com/webmodules/mutation-observer), the script will work down to Internet Explorer 9. +### Using with Next.js + +Given that Next.js imports packages both on the browser and on the server, you need to make sure that the package is only imported on the browser. + +As outlined in the [Next.js documentation](https://nextjs.org/docs/advanced-features/dynamic-import#with-external-libraries), you need to load the package with a dynamic import: + +```jsx +useEffect(async () => { + const cssHasPseudo = (await import('/browser')).default; + cssHasPseudo(document); +}, []); +``` + +We recommend you load the polyfill as high up on your Next application as possible, such as your `pages/_app.ts` file. + ### Browser Usage #### hover From a0fd47e3b9c43e73640621e90a168e6d9e0603e7 Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Sat, 19 Nov 2022 19:47:05 +0100 Subject: [PATCH 2/2] Adding docs for all packages --- plugins/css-blank-pseudo/README.md | 15 +++++++++ plugins/css-blank-pseudo/docs/README.md | 15 +++++++++ plugins/css-has-pseudo/README.md | 31 +++++++++---------- plugins/css-has-pseudo/docs/README.md | 31 +++++++++---------- plugins/css-prefers-color-scheme/README.md | 13 ++++++++ .../css-prefers-color-scheme/docs/README.md | 13 ++++++++ plugins/postcss-focus-within/README.md | 13 ++++++++ plugins/postcss-focus-within/docs/README.md | 13 ++++++++ 8 files changed, 112 insertions(+), 32 deletions(-) diff --git a/plugins/css-blank-pseudo/README.md b/plugins/css-blank-pseudo/README.md index 5c1978eb4..b6581e7fc 100644 --- a/plugins/css-blank-pseudo/README.md +++ b/plugins/css-blank-pseudo/README.md @@ -186,6 +186,21 @@ Please note that using a class, leverages `classList` under the hood which might not be supported on some old browsers such as IE9, so you may need to polyfill `classList` in those cases. +### Using with Next.js + +Given that Next.js imports packages both on the browser and on the server, you need to make sure that the package is only imported on the browser. + +As outlined in the [Next.js documentation](https://nextjs.org/docs/advanced-features/dynamic-import#with-external-libraries), you need to load the package with a dynamic import: + +```jsx +useEffect(async () => { + const cssBlankPseudoInit = (await import('css-blank-pseudo/browser')).default; + cssBlankPseudoInit(); +}, []); +``` + +We recommend you load the polyfill as high up on your Next application as possible, such as your `pages/_app.ts` file. + [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test [css-url]: https://cssdb.org/#blank-pseudo-class [discord]: https://discord.gg/bUadyRwkJS diff --git a/plugins/css-blank-pseudo/docs/README.md b/plugins/css-blank-pseudo/docs/README.md index b74e16e1f..0368faecb 100644 --- a/plugins/css-blank-pseudo/docs/README.md +++ b/plugins/css-blank-pseudo/docs/README.md @@ -146,5 +146,20 @@ Please note that using a class, leverages `classList` under the hood which might not be supported on some old browsers such as IE9, so you may need to polyfill `classList` in those cases. +### Using with Next.js + +Given that Next.js imports packages both on the browser and on the server, you need to make sure that the package is only imported on the browser. + +As outlined in the [Next.js documentation](https://nextjs.org/docs/advanced-features/dynamic-import#with-external-libraries), you need to load the package with a dynamic import: + +```jsx +useEffect(async () => { + const cssBlankPseudoInit = (await import('/browser')).default; + cssBlankPseudoInit(); +}, []); +``` + +We recommend you load the polyfill as high up on your Next application as possible, such as your `pages/_app.ts` file. + [Selectors Level 4]: diff --git a/plugins/css-has-pseudo/README.md b/plugins/css-has-pseudo/README.md index 369358f2d..dcc55e2fe 100644 --- a/plugins/css-has-pseudo/README.md +++ b/plugins/css-has-pseudo/README.md @@ -160,21 +160,6 @@ Without the version, you might unexpectedly get a new major version of the libra Internet Explorer 11. With a [Mutation Observer polyfill](https://github.com/webmodules/mutation-observer), the script will work down to Internet Explorer 9. -### Using with Next.js - -Given that Next.js imports packages both on the browser and on the server, you need to make sure that the package is only imported on the browser. - -As outlined in the [Next.js documentation](https://nextjs.org/docs/advanced-features/dynamic-import#with-external-libraries), you need to load the package with a dynamic import: - -```jsx -useEffect(async () => { - const cssHasPseudo = (await import('css-has-pseudo/browser')).default; - cssHasPseudo(document); -}, []); -``` - -We recommend you load the polyfill as high up on your Next application as possible, such as your `pages/_app.ts` file. - ### Browser Usage #### hover @@ -213,7 +198,6 @@ By default the polyfill will not emit errors or warnings. cssHasPseudo(document, { debug: true }); ``` - ### Browser Dependencies Web API's: @@ -286,6 +270,21 @@ HTML might look like this : ``` +### Using with Next.js + +Given that Next.js imports packages both on the browser and on the server, you need to make sure that the package is only imported on the browser. + +As outlined in the [Next.js documentation](https://nextjs.org/docs/advanced-features/dynamic-import#with-external-libraries), you need to load the package with a dynamic import: + +```jsx +useEffect(async () => { + const cssHasPseudo = (await import('css-has-pseudo/browser')).default; + cssHasPseudo(document); +}, []); +``` + +We recommend you load the polyfill as high up on your Next application as possible, such as your `pages/_app.ts` file. + ## How it works The [PostCSS Has Pseudo] clones rules containing `:has()`, diff --git a/plugins/css-has-pseudo/docs/README.md b/plugins/css-has-pseudo/docs/README.md index d1c7006c1..7dfa53ff5 100644 --- a/plugins/css-has-pseudo/docs/README.md +++ b/plugins/css-has-pseudo/docs/README.md @@ -136,21 +136,6 @@ Without the version, you might unexpectedly get a new major version of the libra Internet Explorer 11. With a [Mutation Observer polyfill](https://github.com/webmodules/mutation-observer), the script will work down to Internet Explorer 9. -### Using with Next.js - -Given that Next.js imports packages both on the browser and on the server, you need to make sure that the package is only imported on the browser. - -As outlined in the [Next.js documentation](https://nextjs.org/docs/advanced-features/dynamic-import#with-external-libraries), you need to load the package with a dynamic import: - -```jsx -useEffect(async () => { - const cssHasPseudo = (await import('/browser')).default; - cssHasPseudo(document); -}, []); -``` - -We recommend you load the polyfill as high up on your Next application as possible, such as your `pages/_app.ts` file. - ### Browser Usage #### hover @@ -189,7 +174,6 @@ By default the polyfill will not emit errors or warnings. cssHasPseudo(document, { debug: true }); ``` - ### Browser Dependencies Web API's: @@ -213,6 +197,21 @@ ECMA Script: +### Using with Next.js + +Given that Next.js imports packages both on the browser and on the server, you need to make sure that the package is only imported on the browser. + +As outlined in the [Next.js documentation](https://nextjs.org/docs/advanced-features/dynamic-import#with-external-libraries), you need to load the package with a dynamic import: + +```jsx +useEffect(async () => { + const cssHasPseudo = (await import('/browser')).default; + cssHasPseudo(document); +}, []); +``` + +We recommend you load the polyfill as high up on your Next application as possible, such as your `pages/_app.ts` file. + ## How it works The [] clones rules containing `:has()`, diff --git a/plugins/css-prefers-color-scheme/README.md b/plugins/css-prefers-color-scheme/README.md index c44aa2a37..7d7905639 100644 --- a/plugins/css-prefers-color-scheme/README.md +++ b/plugins/css-prefers-color-scheme/README.md @@ -288,6 +288,19 @@ HTML might look like this : ``` +### Using with Next.js + +Given that Next.js imports packages both on the browser and on the server, you need to make sure that the package is only imported on the browser. + +As outlined in the [Next.js documentation](https://nextjs.org/docs/advanced-features/dynamic-import#with-external-libraries), you need to load the package with a dynamic import: + +```jsx +useEffect(async () => { + const prefersColorSchemeInit = (await import('css-prefers-color-scheme/browser')).default; + const prefersColorScheme = prefersColorSchemeInit(); +}, []); +``` + ## How does it work? [Prefers Color Scheme] is a [PostCSS] plugin that transforms `prefers-color-scheme` queries into `color` queries. diff --git a/plugins/css-prefers-color-scheme/docs/README.md b/plugins/css-prefers-color-scheme/docs/README.md index 15eadd1f7..b36961e71 100644 --- a/plugins/css-prefers-color-scheme/docs/README.md +++ b/plugins/css-prefers-color-scheme/docs/README.md @@ -164,6 +164,19 @@ ECMA Script: +### Using with Next.js + +Given that Next.js imports packages both on the browser and on the server, you need to make sure that the package is only imported on the browser. + +As outlined in the [Next.js documentation](https://nextjs.org/docs/advanced-features/dynamic-import#with-external-libraries), you need to load the package with a dynamic import: + +```jsx +useEffect(async () => { + const prefersColorSchemeInit = (await import('/browser')).default; + const prefersColorScheme = prefersColorSchemeInit(); +}, []); +``` + ## How does it work? [] is a [PostCSS] plugin that transforms `prefers-color-scheme` queries into `color` queries. diff --git a/plugins/postcss-focus-within/README.md b/plugins/postcss-focus-within/README.md index 5a2e3edf7..81b01a6cb 100644 --- a/plugins/postcss-focus-within/README.md +++ b/plugins/postcss-focus-within/README.md @@ -179,6 +179,19 @@ focusWithinInit({ replaceWith: '.focus-within }); This option should be used if it was changed at PostCSS configuration level. +### Using with Next.js + +Given that Next.js imports packages both on the browser and on the server, you need to make sure that the package is only imported on the browser. + +As outlined in the [Next.js documentation](https://nextjs.org/docs/advanced-features/dynamic-import#with-external-libraries), you need to load the package with a dynamic import: + +```jsx +useEffect(async () => { + const focusWithinInit = (await import('postcss-focus-within/browser')).default; + focusWithinInit(); +}, []); +``` + [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test [css-url]: https://cssdb.org/#focus-within-pseudo-class [discord]: https://discord.gg/bUadyRwkJS diff --git a/plugins/postcss-focus-within/docs/README.md b/plugins/postcss-focus-within/docs/README.md index 0d586fbe5..8b5dd8223 100644 --- a/plugins/postcss-focus-within/docs/README.md +++ b/plugins/postcss-focus-within/docs/README.md @@ -141,5 +141,18 @@ focusWithinInit({ replaceWith: '.focus-within }); This option should be used if it was changed at PostCSS configuration level. +### Using with Next.js + +Given that Next.js imports packages both on the browser and on the server, you need to make sure that the package is only imported on the browser. + +As outlined in the [Next.js documentation](https://nextjs.org/docs/advanced-features/dynamic-import#with-external-libraries), you need to load the package with a dynamic import: + +```jsx +useEffect(async () => { + const focusWithinInit = (await import('/browser')).default; + focusWithinInit(); +}, []); +``` + [Selectors Level 4 specification]: