@csstools/postcss-random-function - npm Package Compare versions

Comparing version 1.0.3 to 2.0.0

CHANGELOG.md

 # Changes to PostCSS Random Function
 
-### 1.0.3
+### 2.0.0
 
-_February 23, 2025_
+_April 19, 2025_
 
-- Updated [`@csstools/css-calc`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-calc) to [`2.1.2`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-calc/CHANGELOG.md#212) (patch)
+- Match the latest [specification](https://drafts.csswg.org/css-values-5/#randomness)
+- Updated [`@csstools/css-calc`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-calc) to [`2.1.3`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-calc/CHANGELOG.md#213) (patch)
 
 [Full CHANGELOG](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-random-function/CHANGELOG.md)

dist/index.cjs

@@ -1,1 +0,1 @@
-"use strict";var e=require("@csstools/css-calc");const s=/(?<![-\w])(?:random)\(/i,creator=o=>{const c=Object.assign({preserve:!1},o);return{postcssPlugin:"postcss-random-function",Declaration(o){if(!s.test(o.value))return;const r=e.calc(o.value,{precision:5,toCanonicalUnits:!0,randomSeed:o.source?.input.css.length});r!==o.value&&(o.cloneBefore({value:r}),c.preserve||o.remove())}}};creator.postcss=!0,module.exports=creator;
+"use strict";var e=require("@csstools/css-calc");const r=String.fromCodePoint(0);function randomCacheKeyFromPostcssDeclaration(e){let o="",s=e.parent;for(;s;){switch(s.type){case"rule":o+=r+"selector"+r+s.selector+r;break;case"atrule":"scope"===s.name&&(o+=r+"prelude"+r+s.params+r)}s=s.parent}return{propertyName:e.prop,propertyN:0,elementID:o,documentID:e.source?.input.css??e.root().toString()}}const o=/(?<![-\w])(?:random)\(/i,creator=r=>{const s=Object.assign({preserve:!1},r);return{postcssPlugin:"postcss-random-function",Declaration(r){if(!o.test(r.value))return;const t=e.calc(r.value,{precision:5,toCanonicalUnits:!0,randomCaching:randomCacheKeyFromPostcssDeclaration(r)});t!==r.value&&(r.cloneBefore({value:t}),s.preserve||r.remove())}}};creator.postcss=!0,module.exports=creator;

dist/index.mjs

@@ -1,1 +0,1 @@
-import{calc as s}from"@csstools/css-calc";const e=/(?<![-\w])(?:random)\(/i,creator=o=>{const t=Object.assign({preserve:!1},o);return{postcssPlugin:"postcss-random-function",Declaration(o){if(!e.test(o.value))return;const n=s(o.value,{precision:5,toCanonicalUnits:!0,randomSeed:o.source?.input.css.length});n!==o.value&&(o.cloneBefore({value:n}),t.preserve||o.remove())}}};creator.postcss=!0;export{creator as default};
+import{calc as e}from"@csstools/css-calc";const o=String.fromCodePoint(0);function randomCacheKeyFromPostcssDeclaration(e){let r="",t=e.parent;for(;t;){switch(t.type){case"rule":r+=o+"selector"+o+t.selector+o;break;case"atrule":"scope"===t.name&&(r+=o+"prelude"+o+t.params+o)}t=t.parent}return{propertyName:e.prop,propertyN:0,elementID:r,documentID:e.source?.input.css??e.root().toString()}}const r=/(?<![-\w])(?:random)\(/i,creator=o=>{const t=Object.assign({preserve:!1},o);return{postcssPlugin:"postcss-random-function",Declaration(o){if(!r.test(o.value))return;const s=e(o.value,{precision:5,toCanonicalUnits:!0,randomCaching:randomCacheKeyFromPostcssDeclaration(o)});s!==o.value&&(o.cloneBefore({value:s}),t.preserve||o.remove())}}};creator.postcss=!0;export{creator as default};

package.json

 {
 	"name": "@csstools/postcss-random-function",
 	"description": "Use the random function in CSS",
-	"version": "1.0.3",
+	"version": "2.0.0",
 	"contributors": [
@@ -51,3 +51,3 @@ {
 	"dependencies": {
-		"@csstools/css-calc": "^2.1.2",
+		"@csstools/css-calc": "^2.1.3",
 		"@csstools/css-parser-algorithms": "^3.0.4",
@@ -54,0 +54,0 @@ "@csstools/css-tokenizer": "^3.0.3"

README.md

@@ -9,12 +9,12 @@ # PostCSS Random Function [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS]
 div {
-	color: oklch(0.7, 0.2, random(120deg, 240deg));
+	color: oklch(0.7 0.2 random(120deg, 240deg));
 }
 
 div {
-	color: oklch(0.7, 0.2, random(120deg, 240deg, by 7deg));
+	color: oklch(0.7 0.2 random(120deg, 240deg, 7deg));
 }
 
 div {
-	color: oklch(0.7, 0.2, random(--text, 120deg, 240deg));
-	border-color: oklch(0.7, 0.2, random(--border, 120deg, 240deg));
+	margin: random(10px, 100px) random(10px, 100px);
+	padding: random(--padding, 10px, 100px) random(--padding, 10px, 100px);
 }
@@ -25,12 +25,12 @@
 div {
-	color: oklch(0.7, 0.2, 238.66036deg);
+	color: oklch(0.7 0.2 177.17235deg);
 }
 
 div {
-	color: oklch(0.7, 0.2, 134deg);
+	color: oklch(0.7 0.2 176deg);
 }
 
 div {
-	color: oklch(0.7, 0.2, 226.47057deg);
-	border-color: oklch(0.7, 0.2, 157.76966deg);
+	margin: 41.7525px 70.01679px;
+	padding: 44.03856px 44.03856px;
 }
@@ -84,12 +84,12 @@ ```
 div {
-	color: oklch(0.7, 0.2, random(120deg, 240deg));
+	color: oklch(0.7 0.2 random(120deg, 240deg));
 }
 
 div {
-	color: oklch(0.7, 0.2, random(120deg, 240deg, by 7deg));
+	color: oklch(0.7 0.2 random(120deg, 240deg, 7deg));
 }
 
 div {
-	color: oklch(0.7, 0.2, random(--text, 120deg, 240deg));
-	border-color: oklch(0.7, 0.2, random(--border, 120deg, 240deg));
+	margin: random(10px, 100px) random(10px, 100px);
+	padding: random(--padding, 10px, 100px) random(--padding, 10px, 100px);
 }
@@ -100,16 +100,16 @@
 div {
-	color: oklch(0.7, 0.2, 238.66036deg);
-	color: oklch(0.7, 0.2, random(120deg, 240deg));
+	color: oklch(0.7 0.2 177.17235deg);
+	color: oklch(0.7 0.2 random(120deg, 240deg));
 }
 
 div {
-	color: oklch(0.7, 0.2, 134deg);
-	color: oklch(0.7, 0.2, random(120deg, 240deg, by 7deg));
+	color: oklch(0.7 0.2 176deg);
+	color: oklch(0.7 0.2 random(120deg, 240deg, 7deg));
 }
 
 div {
-	color: oklch(0.7, 0.2, 226.47057deg);
-	color: oklch(0.7, 0.2, random(--text, 120deg, 240deg));
-	border-color: oklch(0.7, 0.2, 157.76966deg);
-	border-color: oklch(0.7, 0.2, random(--border, 120deg, 240deg));
+	margin: 41.7525px 70.01679px;
+	margin: random(10px, 100px) random(10px, 100px);
+	padding: 44.03856px 44.03856px;
+	padding: random(--padding, 10px, 100px) random(--padding, 10px, 100px);
 }
@@ -116,0 +116,0 @@ ```

No alert changes

Improved metrics

Total package byte prevSize

7730

10.62%

Lines of code

17

30.77%

Dependency changes

• Updated

  @csstools/css-calc@^2.1.3