csstools · romainmenke · Dec 15, 2023 · Dec 15, 2023
diff --git a/.github/bin/generate-docs/cors-template.md b/.github/bin/generate-docs/cors-template.md
@@ -1,9 +1,10 @@
 ## CORS
 
-⚠️ Applies to you if you load CSS from a different domain than the page.
-
-In this case the CSS is treated as untrusted and will not be made available to the JavaScript polyfill.
-The polyfill will not work without applying the correct configuration for CORS.
+> [!IMPORTANT]
+> Applies to you if you load CSS from a different domain than the page.
+>
+> In this case the CSS is treated as untrusted and will not be made available to the JavaScript polyfill.
+> The polyfill will not work without applying the correct configuration for CORS.
 
 Example :
 

diff --git a/cli/csstools-cli/README.md b/cli/csstools-cli/README.md
@@ -10,10 +10,11 @@
 ## Usage
 
 We recommend using the [CSSTools CLI] as a prototyping and debugging tool.
-⚠️ If you are building/customizing a toolchain it is best **not** to use the CLI.
-
 With `npx` you can use the CLI directly without installing it globally.
 
+> [!CAUTION]
+> If you are building/customizing a toolchain it is best **not** to use the CLI.
+
 ### General Help :
 
 ```bash

diff --git a/experimental/css-has-pseudo/CHANGELOG.md b/experimental/css-has-pseudo/CHANGELOG.md
@@ -7,7 +7,8 @@ _July 8, 2022_
 - `@csstools/css-has-pseudo-experimental` is no longer supported. Please use `css-has-pseudo` instead.
 All issues have been resolved in the main plugin and the experimental plugin is no longer maintained.
 
-⚠️ This experimental plugin no longer has any effect on the output of your CSS.
+> [!CAUTION]
+> This experimental plugin no longer has any effect on the output of your CSS.
 
 ### 0.5.2
 

diff --git a/experimental/css-has-pseudo/INSTALL-POSTCSS.md b/experimental/css-has-pseudo/INSTALL-POSTCSS.md
@@ -2,7 +2,8 @@
 
 [EXPERIMENTAL CSS Has Pseudo] runs in all Node environments, with special instructions for:
 
-⚠️ Experimental version of [CSS Has Pseudo](https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo)
+> [!WARNING]
+> Experimental version of [CSS Has Pseudo](https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo)
 
 | [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Gulp](#gulp) | [Grunt](#grunt) |
 | --- | --- | --- | --- | --- |

diff --git a/experimental/css-has-pseudo/README-POSTCSS.md b/experimental/css-has-pseudo/README-POSTCSS.md
@@ -3,7 +3,8 @@
 [![NPM Version][npm-img]][npm-url]
 [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
 
-⚠️ Experimental version of [CSS Has Pseudo](https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo)
+> [!WARNING]
+> Experimental version of [CSS Has Pseudo](https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo)
 
 [EXPERIMENTAL CSS Has Pseudo] lets you style elements relative to other elements in CSS,
 following the [Selectors Level 4] specification.

diff --git a/experimental/css-has-pseudo/README.md b/experimental/css-has-pseudo/README.md
@@ -6,7 +6,8 @@
 `@csstools/css-has-pseudo-experimental` is no longer supported. Please use `css-has-pseudo` instead.
 All issues have been resolved in the main plugin and the experimental plugin is no longer maintained.
 
-⚠️ This experimental plugin no longer has any effect on the output of your CSS.
+> [!CAUTION]
+> This experimental plugin no longer has any effect on the output of your CSS.
 
 [discord]: https://discord.gg/bUadyRwkJS
 [npm-img]: https://img.shields.io/npm/v/@csstools/css-has-pseudo-experimental.svg

diff --git a/experimental/postcss-nesting/README.md b/experimental/postcss-nesting/README.md
@@ -8,7 +8,8 @@
 [CSS Nesting] specification. If you want nested rules the same way [Sass] works
 you might want to use [PostCSS Nested] instead.
 
-⚠️ Experimental version of [PostCSS Nesting](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting)
+> [!WARNING]
+> Experimental version of [PostCSS Nesting](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting)
 
 ```pcss
 a, b {

diff --git a/plugin-packs/postcss-preset-env/README.md b/plugin-packs/postcss-preset-env/README.md
@@ -134,9 +134,8 @@ features and supports **all** browsers.
 
 [**Try it out in the Playground!**](https://preset-env.cssdb.org/playground/)
 
-⚠️ Please note that some features need a companion library that makes 
-the feature work. While we try to avoid this requirement, there are instances
-in which this isn't possible to polyfill a new behaviour with _just_ CSS.
+> [!NOTE]
+> Please note that some features need a companion library that makes the feature work. While we try to avoid this requirement, there are instances in which this isn't possible to polyfill a new behaviour with _just_ CSS.
 
 [See the list below](#plugins-that-need-client-library).
 

diff --git a/plugins/css-has-pseudo/README.md b/plugins/css-has-pseudo/README.md
@@ -170,8 +170,9 @@ or
 <script>cssHasPseudo(document)</script>
 ```
 
-⚠️ Please use a versioned url, like this : `https://unpkg.com/css-has-pseudo@6.0.0/dist/browser-global.js`
-Without the version, you might unexpectedly get a new major version of the library with breaking changes.
+> [!TIP]
+> Please use a versioned url, like this : `https://unpkg.com/css-has-pseudo@6.0.0/dist/browser-global.js`
+> Without the version, you might unexpectedly get a new major version of the library with breaking changes.
 
 [PostCSS Has Pseudo] works in all major browsers, including
 Internet Explorer 11. With a [Mutation Observer polyfill](https://github.com/webmodules/mutation-observer), the script will work
@@ -238,10 +239,11 @@ ECMA Script:
 
 ## CORS
 
-⚠️ Applies to you if you load CSS from a different domain than the page.
-
-In this case the CSS is treated as untrusted and will not be made available to the JavaScript polyfill.
-The polyfill will not work without applying the correct configuration for CORS.
+> [!IMPORTANT]
+> Applies to you if you load CSS from a different domain than the page.
+>
+> In this case the CSS is treated as untrusted and will not be made available to the JavaScript polyfill.
+> The polyfill will not work without applying the correct configuration for CORS.
 
 Example :
 

diff --git a/plugins/css-has-pseudo/docs/README.md b/plugins/css-has-pseudo/docs/README.md
@@ -144,8 +144,9 @@ or
 <script>cssHasPseudo(document)</script>
 ```
 
-⚠️ Please use a versioned url, like this : `https://unpkg.com/<packageName>@<packageVersion>/dist/browser-global.js`
-Without the version, you might unexpectedly get a new major version of the library with breaking changes.
+> [!TIP]
+> Please use a versioned url, like this : `https://unpkg.com/<packageName>@<packageVersion>/dist/browser-global.js`
+> Without the version, you might unexpectedly get a new major version of the library with breaking changes.
 
 [<humanReadableName>] works in all major browsers, including
 Internet Explorer 11. With a [Mutation Observer polyfill](https://github.com/webmodules/mutation-observer), the script will work

diff --git a/plugins/css-prefers-color-scheme/README.md b/plugins/css-prefers-color-scheme/README.md
@@ -150,8 +150,9 @@ or
 <script>prefersColorSchemeInit()</script>
 ```
 
-⚠️ Please use a versioned url, like this : `https://unpkg.com/css-prefers-color-scheme@9.0.0/dist/browser-global.js`
-Without the version, you might unexpectedly get a new major version of the library with breaking changes.
+> [!TIP]
+> Please use a versioned url, like this : `https://unpkg.com/css-prefers-color-scheme@9.0.0/dist/browser-global.js`
+> Without the version, you might unexpectedly get a new major version of the library with breaking changes.
 
 [Prefers Color Scheme] works in all major browsers, including Safari 6+ and
 Internet Explorer 9+ without any additional polyfills.
@@ -246,10 +247,11 @@ ECMA Script:
 
 ## CORS
 
-⚠️ Applies to you if you load CSS from a different domain than the page.
-
-In this case the CSS is treated as untrusted and will not be made available to the JavaScript polyfill.
-The polyfill will not work without applying the correct configuration for CORS.
+> [!IMPORTANT]
+> Applies to you if you load CSS from a different domain than the page.
+>
+> In this case the CSS is treated as untrusted and will not be made available to the JavaScript polyfill.
+> The polyfill will not work without applying the correct configuration for CORS.
 
 Example :
 

diff --git a/plugins/css-prefers-color-scheme/docs/README.md b/plugins/css-prefers-color-scheme/docs/README.md
@@ -73,8 +73,9 @@ or
 <script>prefersColorSchemeInit()</script>
 ```
 
-⚠️ Please use a versioned url, like this : `https://unpkg.com/<packageName>@<packageVersion>/dist/browser-global.js`
-Without the version, you might unexpectedly get a new major version of the library with breaking changes.
+> [!TIP]
+> Please use a versioned url, like this : `https://unpkg.com/<packageName>@<packageVersion>/dist/browser-global.js`
+> Without the version, you might unexpectedly get a new major version of the library with breaking changes.
 
 [<humanReadableName>] works in all major browsers, including Safari 6+ and
 Internet Explorer 9+ without any additional polyfills.

diff --git a/plugins/postcss-color-function/README.md b/plugins/postcss-color-function/README.md
@@ -102,7 +102,8 @@ postcssColorFunction({ preserve: true })
 The `enableProgressiveCustomProperties` option determines whether the original notation
 is wrapped with `@supports` when used in Custom Properties. By default, it is enabled.
 
-⚠️ We only recommend disabling this when you set `preserve` to `false` or if you bring your own fix for Custom Properties. See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme).
+> [!NOTE]
+> We only recommend disabling this when you set `preserve` to `false` or if you bring your own fix for Custom Properties. See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme).
 
 ```js
 postcssColorFunction({ enableProgressiveCustomProperties: false })

diff --git a/plugins/postcss-color-function/docs/README.md b/plugins/postcss-color-function/docs/README.md
@@ -56,7 +56,8 @@ is preserved. By default, it is not preserved.
 The `enableProgressiveCustomProperties` option determines whether the original notation
 is wrapped with `@supports` when used in Custom Properties. By default, it is enabled.
 
-⚠️ We only recommend disabling this when you set `preserve` to `false` or if you bring your own fix for Custom Properties. See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme).
+> [!NOTE]
+> We only recommend disabling this when you set `preserve` to `false` or if you bring your own fix for Custom Properties. See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme).
 
 ```js
 <exportName>({ enableProgressiveCustomProperties: false })

diff --git a/plugins/postcss-color-functional-notation/README.md b/plugins/postcss-color-functional-notation/README.md
@@ -88,7 +88,8 @@ postcssColorFunctionalNotation({ preserve: true })
 The `enableProgressiveCustomProperties` option determines whether the original notation
 is wrapped with `@supports` when used in Custom Properties. By default, it is enabled.
 
-⚠️ We only recommend disabling this when you set `preserve` to `false` or if you bring your own fix for Custom Properties. See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme).
+> [!NOTE]
+> We only recommend disabling this when you set `preserve` to `false` or if you bring your own fix for Custom Properties. See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme).
 
 ```js
 postcssColorFunctionalNotation({ enableProgressiveCustomProperties: false })

diff --git a/plugins/postcss-custom-media/README.md b/plugins/postcss-custom-media/README.md
@@ -69,8 +69,9 @@ as these depend on the browser the queries will eventually run in.
 
 _Some of these queries will have only one possible outcome but we have to account for all possible queries in this plugin._
 
-⚠️ When handling complex media queries you will see that your CSS is doubled for each level of complexity.<br>
-GZIP works great to de-dupe this but having a lot of complex media queries will have a performance impact.
+> [!NOTE]
+> When handling complex media queries you will see that your CSS is doubled for each level of complexity.<br>
+> GZIP works great to de-dupe this but having a lot of complex media queries will have a performance impact.
 
 An example of a very complex (and artificial) use-case :
 

diff --git a/plugins/postcss-custom-media/docs/README.md b/plugins/postcss-custom-media/docs/README.md
@@ -62,8 +62,9 @@ as these depend on the browser the queries will eventually run in.
 
 _Some of these queries will have only one possible outcome but we have to account for all possible queries in this plugin._
 
-⚠️ When handling complex media queries you will see that your CSS is doubled for each level of complexity.<br>
-GZIP works great to de-dupe this but having a lot of complex media queries will have a performance impact.
+> [!NOTE]
+> When handling complex media queries you will see that your CSS is doubled for each level of complexity.<br>
+> GZIP works great to de-dupe this but having a lot of complex media queries will have a performance impact.
 
 An example of a very complex (and artificial) use-case :
 

diff --git a/plugins/postcss-double-position-gradients/README.md b/plugins/postcss-double-position-gradients/README.md
@@ -97,7 +97,8 @@ postcssDoublePositionGradients({ preserve: false })
 The `enableProgressiveCustomProperties` option determines whether the original notation
 is wrapped with `@supports` when used in Custom Properties. By default, it is enabled.
 
-⚠️ We only recommend disabling this when you set `preserve` to `false` or if you bring your own fix for Custom Properties. See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme).
+> [!NOTE]
+> We only recommend disabling this when you set `preserve` to `false` or if you bring your own fix for Custom Properties. See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme).
 
 ```js
 postcssDoublePositionGradients({ enableProgressiveCustomProperties: false })

diff --git a/plugins/postcss-gradients-interpolation-method/README.md b/plugins/postcss-gradients-interpolation-method/README.md
@@ -37,7 +37,8 @@ npm install @csstools/postcss-gradients-interpolation-method --save-dev
 
 ## Shortcomings
 
-⚠️ Color stops with only a color or only an interpolation hint are not supported.
+> [!CAUTION]
+> Color stops with only a color or only an interpolation hint are not supported.
 
 For best results you should always provide at least the color and position for each color stop.
 Double position color stops are supported.
@@ -52,8 +53,9 @@ Double position color stops are supported.
 }
 ```
 
-⚠️ Variable colors are also not supported.
-We can not mix colors when the color is a variable.
+> [!CAUTION]
+> Variable colors are not supported.
+> We can not mix colors when the color is a variable.
 
 ```pcss
 .foo {
@@ -129,7 +131,8 @@ postcssGradientsInterpolationMethod({ preserve: false })
 The `enableProgressiveCustomProperties` option determines whether the original notation
 is wrapped with `@supports` when used in Custom Properties. By default, it is enabled.
 
-⚠️ We only recommend disabling this when you set `preserve` to `false` or if you bring your own fix for Custom Properties. See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme).
+> [!NOTE]
+> We only recommend disabling this when you set `preserve` to `false` or if you bring your own fix for Custom Properties. See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme).
 
 ```js
 postcssGradientsInterpolationMethod({ enableProgressiveCustomProperties: false })

diff --git a/plugins/postcss-gradients-interpolation-method/docs/README.md b/plugins/postcss-gradients-interpolation-method/docs/README.md
@@ -29,7 +29,8 @@
 
 ## Shortcomings
 
-⚠️ Color stops with only a color or only an interpolation hint are not supported.
+> [!CAUTION]
+> Color stops with only a color or only an interpolation hint are not supported.
 
 For best results you should always provide at least the color and position for each color stop.
 Double position color stops are supported.
@@ -44,8 +45,9 @@ Double position color stops are supported.
 }
 ```
 
-⚠️ Variable colors are also not supported.
-We can not mix colors when the color is a variable.
+> [!CAUTION]
+> Variable colors are not supported.
+> We can not mix colors when the color is a variable.
 
 ```pcss
 .foo {
@@ -83,7 +85,8 @@ is preserved. By default, it is preserved.
 The `enableProgressiveCustomProperties` option determines whether the original notation
 is wrapped with `@supports` when used in Custom Properties. By default, it is enabled.
 
-⚠️ We only recommend disabling this when you set `preserve` to `false` or if you bring your own fix for Custom Properties. See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme).
+> [!NOTE]
+> We only recommend disabling this when you set `preserve` to `false` or if you bring your own fix for Custom Properties. See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme).
 
 ```js
 <exportName>({ enableProgressiveCustomProperties: false })

diff --git a/plugins/postcss-lab-function/README.md b/plugins/postcss-lab-function/README.md
@@ -86,7 +86,8 @@ postcssLabFunction({ preserve: true })
 The `enableProgressiveCustomProperties` option determines whether the original notation
 is wrapped with `@supports` when used in Custom Properties. By default, it is enabled.
 
-⚠️ We only recommend disabling this when you set `preserve` to `false` or if you bring your own fix for Custom Properties. See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme).
+> [!NOTE]
+> We only recommend disabling this when you set `preserve` to `false` or if you bring your own fix for Custom Properties. See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme).
 
 ```js
 postcssLabFunction({ enableProgressiveCustomProperties: false })

diff --git a/plugins/postcss-oklab-function/README.md b/plugins/postcss-oklab-function/README.md
@@ -95,7 +95,8 @@ postcssOKLabFunction({ preserve: true })
 The `enableProgressiveCustomProperties` option determines whether the original notation
 is wrapped with `@supports` when used in Custom Properties. By default, it is enabled.
 
-⚠️ We only recommend disabling this when you set `preserve` to `false` or if you bring your own fix for Custom Properties. See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme).
+> [!NOTE]
+> We only recommend disabling this when you set `preserve` to `false` or if you bring your own fix for Custom Properties. See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme).
 
 ```js
 postcssOKLabFunction({ enableProgressiveCustomProperties: false })

diff --git a/plugins/postcss-progressive-custom-properties/README.md b/plugins/postcss-progressive-custom-properties/README.md
@@ -6,8 +6,9 @@
 
 [PostCSS Progressive Custom Properties] is a utility plugin to correctly declare Custom Property fallbacks and enhancements.
 
-⚠️ It is not intended to be used directly by stylesheet authors.
-Meant to be included in other PostCSS plugins that provide CSS value transforms as fallbacks.
+> [!WARNING]
+> It is not intended to be used directly by stylesheet authors.
+> Meant to be included in other PostCSS plugins that provide CSS value transforms as fallbacks.
 
 [Custom Properties are not discarded like regular declarations when invalid.](https://www.w3.org/TR/css-variables-1/#invalid-variables)
 This makes it tricky to provide fallback values for older browsers.

diff --git a/plugins/postcss-selector-not/README.md b/plugins/postcss-selector-not/README.md
@@ -20,8 +20,9 @@ p:not(:first-child):not(.special) {
 }
 ```
 
-⚠️ Only lists of simple selectors (`:not(.a, .b)`) will work as expected.
-Complex selectors (`:not(.a > .b, .c ~ .d)`) can not be downgraded.
+> [!CAUTION]
+> Only lists of simple selectors (`:not(.a, .b)`) will work as expected.
+> Complex selectors (`:not(.a > .b, .c ~ .d)`) can not be downgraded.
 
 ## Usage
 

diff --git a/plugins/postcss-selector-not/docs/README.md b/plugins/postcss-selector-not/docs/README.md
@@ -27,8 +27,9 @@
 <example.expect.css>
 ```
 
-⚠️ Only lists of simple selectors (`:not(.a, .b)`) will work as expected.
-Complex selectors (`:not(.a > .b, .c ~ .d)`) can not be downgraded.
+> [!CAUTION]
+> Only lists of simple selectors (`:not(.a, .b)`) will work as expected.
+> Complex selectors (`:not(.a > .b, .c ~ .d)`) can not be downgraded.
 
 <usage>