diff --git a/website/packages/docs/src/pages/pkg-babel-plugin-strip-runtime.mdx b/website/packages/docs/src/pages/pkg-babel-plugin-strip-runtime.mdx index 632b016fa..8f088eea0 100644 --- a/website/packages/docs/src/pages/pkg-babel-plugin-strip-runtime.mdx +++ b/website/packages/docs/src/pages/pkg-babel-plugin-strip-runtime.mdx @@ -116,14 +116,3 @@ See [Shorthand properties](/shorthand) for more information. - Type: `boolean` - Default: `false` - -#### sortShorthand - -Whether to sort shorthand properties so that they always some before longhand properties. - -For example, `border` will always come before `borderColor`, which will always come before `borderTopColor`. - -See [Shorthand properties](/shorthand) for more information. - -- Type: `boolean` -- Default: `false` diff --git a/website/packages/docs/src/pages/pkg-webpack-loader.mdx b/website/packages/docs/src/pages/pkg-webpack-loader.mdx index c23b6aef2..1de3eed1c 100644 --- a/website/packages/docs/src/pages/pkg-webpack-loader.mdx +++ b/website/packages/docs/src/pages/pkg-webpack-loader.mdx @@ -305,5 +305,11 @@ For example, `border` will always come before `borderColor`, which will always c See [Shorthand properties](/shorthand) for more information. +```js +new CompiledExtractPlugin({ + sortShorthand: true, +}); +``` + - Type: `boolean` - Default: `false` diff --git a/website/packages/docs/src/pages/shorthand.mdx b/website/packages/docs/src/pages/shorthand.mdx index 5abd8e502..d0761a62b 100644 --- a/website/packages/docs/src/pages/shorthand.mdx +++ b/website/packages/docs/src/pages/shorthand.mdx @@ -25,7 +25,7 @@ Note that there is a bug where [stylesheet extraction cannot be used for Parcel] If stylesheet extraction is turned on, then shorthand property sorting is controlled by the `sortShorthand` option. This is set to `false` by default, meaning that if stylesheet extraction is turned on, shorthand properties will not be sorted in any way by default. -If you are using Webpack, set `sortShorthand: true` as an option to `new CompiledExtractPlugin()`. If you are using Parcel, set `sortShorthand: true` in your Compiled configuration file (e.g. `.compiledcssrc`), but note that stylesheet extraction won't work unless you are in production mode [due to a bug](https://github.com/atlassian-labs/compiled/issues/1306). +If you are using Webpack, set `sortShorthand: true` as an option like `new CompiledExtractPlugin({ sortShorthand: true })`. If you are using Parcel, set `sortShorthand: true` in your Compiled configuration file (e.g. `.compiledcssrc`), but note that stylesheet extraction won't work unless you are in production mode [due to a bug](https://github.com/atlassian-labs/compiled/issues/1306). With `sortShorthand` set to `true`, shorthand properties will be sorted deterministically, with more specific shorthand properties taking precedence over less specific shorthand properties. Shorthand property sorting takes precedence over the sorting of pseudo-selectors. For example, given the following example: