csstools · romainmenke · Nov 11, 2024 · Nov 11, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/css-calc/test/additional/random.mjs b/packages/css-calc/test/additional/random.mjs
@@ -130,3 +130,13 @@ assert.strictEqual(
 	calc('random(10deg, 10px)'),
 	'random(10deg, 10px)',
 );
+
+assert.strictEqual(
+	calc('random(0%, 100%)'),
+	'47.16924%',
+);
+
+assert.strictEqual(
+	calc('random(0deg, 360deg)'),
+	'173.25527deg',
+);
diff --git a/plugin-packs/postcss-preset-env/CHANGELOG.md b/plugin-packs/postcss-preset-env/CHANGELOG.md
@@ -1,20 +1,10 @@
 # Changes to PostCSS Preset Env
 
-### Unreleased (patch)
-
-- Updated [`@csstools/postcss-exponential-functions`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-exponential-functions) to [`2.0.5`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-exponential-functions/CHANGELOG.md#205) (patch)
-- Updated [`@csstools/postcss-media-minmax`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-media-minmax) to [`2.0.5`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-media-minmax/CHANGELOG.md#205) (patch)
-- Updated [`@csstools/postcss-stepped-value-functions`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-stepped-value-functions) to [`4.0.5`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-stepped-value-functions/CHANGELOG.md#405) (patch)
-- Updated [`@csstools/postcss-trigonometric-functions`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-trigonometric-functions) to [`4.0.5`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-trigonometric-functions/CHANGELOG.md#405) (patch)
-- Updated [`@csstools/postcss-color-function`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-function) to [`4.0.6`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-function/CHANGELOG.md#406) (patch)
-- Updated [`@csstools/postcss-color-mix-function`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-mix-function) to [`3.0.6`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-mix-function/CHANGELOG.md#306) (patch)
-- Updated [`@csstools/postcss-gamut-mapping`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gamut-mapping) to [`2.0.6`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gamut-mapping/CHANGELOG.md#206) (patch)
-- Updated [`@csstools/postcss-gradients-interpolation-method`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gradients-interpolation-method) to [`5.0.6`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gradients-interpolation-method/CHANGELOG.md#506) (patch)
-- Updated [`@csstools/postcss-hwb-function`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-hwb-function) to [`4.0.6`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-hwb-function/CHANGELOG.md#406) (patch)
-- Updated [`@csstools/postcss-oklab-function`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-oklab-function) to [`4.0.6`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-oklab-function/CHANGELOG.md#406) (patch)
-- Updated [`@csstools/postcss-relative-color-syntax`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-relative-color-syntax) to [`3.0.6`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-relative-color-syntax/CHANGELOG.md#306) (patch)
-- Updated [`postcss-color-functional-notation`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-functional-notation) to [`7.0.6`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-functional-notation/CHANGELOG.md#706) (patch)
-- Updated [`postcss-lab-function`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-lab-function) to [`7.0.6`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-lab-function/CHANGELOG.md#706) (patch)
+### Unreleased (minor)
+
+- Added `@csstools/postcss-random-function` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-random-function#readme) for usage details.
+- Added `@csstools/postcss-sign-functions` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-sign-functions#readme) for usage details.
+- Updated [`@csstools/css-calc`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-calc) to [`2.1.0`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-calc/CHANGELOG.md#210) (minor)
 
 ### 10.0.9
 

diff --git a/plugin-packs/postcss-preset-env/FEATURES.md b/plugin-packs/postcss-preset-env/FEATURES.md
@@ -54,9 +54,11 @@ The `ID` listed is the key for PostCSS Preset Env configuration in your project.
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/overflow-wrap-property.svg" height="18">](https://cssdb.org/#overflow-wrap-property) | `overflow-wrap-property` | `overflow-wrap` Property | [example](https://preset-env.cssdb.org/features/#overflow-wrap-property) | [docs](https://github.com/mattdimu/postcss-replace-overflow-wrap#readme) |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/place-properties.svg" height="18">](https://cssdb.org/#place-properties) | `place-properties` | Place Properties | [example](https://preset-env.cssdb.org/features/#place-properties) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-place#readme) |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/prefers-color-scheme-query.svg" height="18">](https://cssdb.org/#prefers-color-scheme-query) | `prefers-color-scheme-query` | `prefers-color-scheme` Media Query | [example](https://preset-env.cssdb.org/features/#prefers-color-scheme-query) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/css-prefers-color-scheme#readme) |
+| [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/random-function.svg" height="18">](https://cssdb.org/#random-function) | `random-function` | `random()` function | [example](https://preset-env.cssdb.org/features/#random-function) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-random-function#readme) |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/rebeccapurple-color.svg" height="18">](https://cssdb.org/#rebeccapurple-color) | `rebeccapurple-color` | `rebeccapurple` Color | [example](https://preset-env.cssdb.org/features/#rebeccapurple-color) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-rebeccapurple#readme) |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/relative-color-syntax.svg" height="18">](https://cssdb.org/#relative-color-syntax) | `relative-color-syntax` | Relative Colors | [example](https://preset-env.cssdb.org/features/#relative-color-syntax) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-relative-color-syntax#readme) |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/scope-pseudo-class.svg" height="18">](https://cssdb.org/#scope-pseudo-class) | `scope-pseudo-class` | `:scope()` Reference Element Pseudo-class | [example](https://preset-env.cssdb.org/features/#scope-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-scope-pseudo-class#readme) |
+| [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/sign-functions.svg" height="18">](https://cssdb.org/#sign-functions) | `sign-functions` | `abs()` and `sign()` functions | [example](https://preset-env.cssdb.org/features/#sign-functions) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-sign-functions#readme) |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/stepped-value-functions.svg" height="18">](https://cssdb.org/#stepped-value-functions) | `stepped-value-functions` | `round()`, `mod()` and `rem()` functions | [example](https://preset-env.cssdb.org/features/#stepped-value-functions) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-stepped-value-functions#readme) |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/system-ui-font-family.svg" height="18">](https://cssdb.org/#system-ui-font-family) | `system-ui-font-family` | `system-ui` Font Family | [example](https://preset-env.cssdb.org/features/#system-ui-font-family) | [docs](https://github.com/JLHwung/postcss-font-family-system-ui#readme) |
 | [<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/text-decoration-shorthand.svg" height="18">](https://cssdb.org/#text-decoration-shorthand) | `text-decoration-shorthand` | `text-decoration` shorthand | [example](https://preset-env.cssdb.org/features/#text-decoration-shorthand) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-text-decoration-shorthand#readme) |

diff --git a/plugin-packs/postcss-preset-env/dist/index.cjs b/plugin-packs/postcss-preset-env/dist/index.cjs
diff --git a/plugin-packs/postcss-preset-env/dist/index.d.ts b/plugin-packs/postcss-preset-env/dist/index.d.ts
@@ -40,14 +40,16 @@ import type { pluginOptions as pluginOptions_43 } from '@csstools/postcss-oklab-
 import type { pluginOptions as pluginOptions_44 } from 'postcss-overflow-shorthand';
 import type { pluginOptions as pluginOptions_45 } from 'postcss-place';
 import type { pluginOptions as pluginOptions_46 } from 'css-prefers-color-scheme';
-import type { pluginOptions as pluginOptions_47 } from 'postcss-color-rebeccapurple';
-import type { pluginOptions as pluginOptions_48 } from '@csstools/postcss-relative-color-syntax';
-import type { pluginOptions as pluginOptions_49 } from '@csstools/postcss-scope-pseudo-class';
+import type { pluginOptions as pluginOptions_47 } from '@csstools/postcss-random-function';
+import type { pluginOptions as pluginOptions_48 } from 'postcss-color-rebeccapurple';
+import type { pluginOptions as pluginOptions_49 } from '@csstools/postcss-relative-color-syntax';
 import type { pluginOptions as pluginOptions_5 } from '@csstools/postcss-cascade-layers';
-import type { pluginOptions as pluginOptions_50 } from '@csstools/postcss-stepped-value-functions';
-import type { pluginOptions as pluginOptions_51 } from '@csstools/postcss-text-decoration-shorthand';
-import type { pluginOptions as pluginOptions_52 } from '@csstools/postcss-trigonometric-functions';
-import type { pluginOptions as pluginOptions_53 } from '@csstools/postcss-unset-value';
+import type { pluginOptions as pluginOptions_50 } from '@csstools/postcss-scope-pseudo-class';
+import type { pluginOptions as pluginOptions_51 } from '@csstools/postcss-sign-functions';
+import type { pluginOptions as pluginOptions_52 } from '@csstools/postcss-stepped-value-functions';
+import type { pluginOptions as pluginOptions_53 } from '@csstools/postcss-text-decoration-shorthand';
+import type { pluginOptions as pluginOptions_54 } from '@csstools/postcss-trigonometric-functions';
+import type { pluginOptions as pluginOptions_55 } from '@csstools/postcss-unset-value';
 import type { pluginOptions as pluginOptions_6 } from 'postcss-attribute-case-insensitive';
 import type { pluginOptions as pluginOptions_7 } from '@csstools/postcss-color-function';
 import type { pluginOptions as pluginOptions_8 } from 'postcss-color-functional-notation';
@@ -249,22 +251,26 @@ export declare type pluginsOptions = {
     'place-properties'?: subPluginOptions<pluginOptions_45>;
     /** plugin options for "css-prefers-color-scheme" */
     'prefers-color-scheme-query'?: subPluginOptions<pluginOptions_46>;
+    /** plugin options for "@csstools/postcss-random-function" */
+    'random-function'?: subPluginOptions<pluginOptions_47>;
     /** plugin options for "postcss-color-rebeccapurple" */
-    'rebeccapurple-color'?: subPluginOptions<pluginOptions_47>;
+    'rebeccapurple-color'?: subPluginOptions<pluginOptions_48>;
     /** plugin options for "@csstools/postcss-relative-color-syntax" */
-    'relative-color-syntax'?: subPluginOptions<pluginOptions_48>;
+    'relative-color-syntax'?: subPluginOptions<pluginOptions_49>;
     /** plugin options for "@csstools/postcss-scope-pseudo-class" */
-    'scope-pseudo-class'?: subPluginOptions<pluginOptions_49>;
+    'scope-pseudo-class'?: subPluginOptions<pluginOptions_50>;
+    /** plugin options for "@csstools/postcss-sign-functions" */
+    'sign-functions'?: subPluginOptions<pluginOptions_51>;
     /** plugin options for "@csstools/postcss-stepped-value-functions" */
-    'stepped-value-functions'?: subPluginOptions<pluginOptions_50>;
+    'stepped-value-functions'?: subPluginOptions<pluginOptions_52>;
     /** plugin options for "postcss-system-ui-font-family" */
     'system-ui-font-family'?: subPluginOptions<postcssFontFamilySystemUIOptions>;
     /** plugin options for "@csstools/postcss-text-decoration-shorthand" */
-    'text-decoration-shorthand'?: subPluginOptions<pluginOptions_51>;
+    'text-decoration-shorthand'?: subPluginOptions<pluginOptions_53>;
     /** plugin options for "@csstools/postcss-trigonometric-functions" */
-    'trigonometric-functions'?: subPluginOptions<pluginOptions_52>;
+    'trigonometric-functions'?: subPluginOptions<pluginOptions_54>;
     /** plugin options for "@csstools/postcss-unset-value" */
-    'unset-value'?: subPluginOptions<pluginOptions_53>;
+    'unset-value'?: subPluginOptions<pluginOptions_55>;
 };
 
 /** postcss-clamp plugin options */

diff --git a/plugin-packs/postcss-preset-env/dist/index.mjs b/plugin-packs/postcss-preset-env/dist/index.mjs
diff --git a/plugin-packs/postcss-preset-env/package.json b/plugin-packs/postcss-preset-env/package.json
@@ -76,8 +76,10 @@
 		"@csstools/postcss-normalize-display-values": "^4.0.0",
 		"@csstools/postcss-oklab-function": "^4.0.6",
 		"@csstools/postcss-progressive-custom-properties": "^4.0.0",
+		"@csstools/postcss-random-function": "^1.0.0",
 		"@csstools/postcss-relative-color-syntax": "^3.0.6",
 		"@csstools/postcss-scope-pseudo-class": "^4.0.1",
+		"@csstools/postcss-sign-functions": "^1.0.0",
 		"@csstools/postcss-stepped-value-functions": "^4.0.5",
 		"@csstools/postcss-text-decoration-shorthand": "^4.0.1",
 		"@csstools/postcss-trigonometric-functions": "^4.0.5",
@@ -87,7 +89,7 @@
 		"css-blank-pseudo": "^7.0.1",
 		"css-has-pseudo": "^7.0.1",
 		"css-prefers-color-scheme": "^10.0.0",
-		"cssdb": "^8.2.0",
+		"cssdb": "^8.2.1",
 		"postcss-attribute-case-insensitive": "^7.0.1",
 		"postcss-clamp": "^4.1.0",
 		"postcss-color-functional-notation": "^7.0.6",

diff --git a/plugin-packs/postcss-preset-env/scripts/plugins-data.json b/plugin-packs/postcss-preset-env/scripts/plugins-data.json
@@ -290,6 +290,16 @@
 		"id": "text-decoration-shorthand",
 		"importName": "postcssTextDecorationShorthand"
 	},
+	{
+		"packageName": "@csstools/postcss-sign-functions",
+		"id": "sign-functions",
+		"importName": "postcssSignFunctions"
+	},
+	{
+		"packageName": "@csstools/postcss-random-function",
+		"id": "random-function",
+		"importName": "postcssRandomFunction"
+	},
 	{
 		"packageName": "@csstools/postcss-progressive-custom-properties",
 		"id": "progressive-custom-properties",

diff --git a/plugin-packs/postcss-preset-env/src/lib/ids-by-execution-order.mjs b/plugin-packs/postcss-preset-env/src/lib/ids-by-execution-order.mjs
@@ -53,6 +53,8 @@ export default [
 	'unset-value',
 
 	// Math functions.
+	'random-function',
+	'sign-functions',
 	'stepped-value-functions',
 	'trigonometric-functions',
 	'exponential-functions',

diff --git a/plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs b/plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs
@@ -49,9 +49,11 @@ import postcssReplaceOverflowWrap from 'postcss-replace-overflow-wrap';
 import postcssPlace from 'postcss-place';
 import postcssPrefersColorScheme from 'css-prefers-color-scheme';
 import postcssProgressiveCustomProperties from '@csstools/postcss-progressive-custom-properties';
+import postcssRandomFunction from '@csstools/postcss-random-function';
 import postcssColorRebeccapurple from 'postcss-color-rebeccapurple';
 import postcssRelativeColorSyntax from '@csstools/postcss-relative-color-syntax';
 import postcssScopePseudoClass from '@csstools/postcss-scope-pseudo-class';
+import postcssSignFunctions from '@csstools/postcss-sign-functions';
 import postcssSteppedValueFunctions from '@csstools/postcss-stepped-value-functions';
 import postcssFontFamilySystemUI from '../patch/postcss-system-ui-font-family.mjs';
 import postcssTextDecorationShorthand from '@csstools/postcss-text-decoration-shorthand';
@@ -112,9 +114,11 @@ export const pluginsById = new Map(
 		['place-properties', postcssPlace],
 		['prefers-color-scheme-query', postcssPrefersColorScheme],
 		['progressive-custom-properties', postcssProgressiveCustomProperties],
+		['random-function', postcssRandomFunction],
 		['rebeccapurple-color', postcssColorRebeccapurple],
 		['relative-color-syntax', postcssRelativeColorSyntax],
 		['scope-pseudo-class', postcssScopePseudoClass],
+		['sign-functions', postcssSignFunctions],
 		['stepped-value-functions', postcssSteppedValueFunctions],
 		['system-ui-font-family', postcssFontFamilySystemUI],
 		['text-decoration-shorthand', postcssTextDecorationShorthand],

diff --git a/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs b/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs
@@ -290,6 +290,16 @@ export default [
 		'id': 'text-decoration-shorthand',
 		'importName': 'postcssTextDecorationShorthand',
 	},
+	{
+		'packageName': '@csstools/postcss-sign-functions',
+		'id': 'sign-functions',
+		'importName': 'postcssSignFunctions',
+	},
+	{
+		'packageName': '@csstools/postcss-random-function',
+		'id': 'random-function',
+		'importName': 'postcssRandomFunction',
+	},
 	{
 		'packageName': '@csstools/postcss-progressive-custom-properties',
 		'id': 'progressive-custom-properties',