@csstools/postcss-random-function 1.0.3 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +4 -3
  2. package/README.md +20 -20
  3. package/dist/index.cjs +1 -1
  4. package/dist/index.mjs +1 -1
  5. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,9 +1,10 @@
1
1
  # Changes to PostCSS Random Function
2
2
 
3
- ### 1.0.3
3
+ ### 2.0.0
4
4
 
5
- _February 23, 2025_
5
+ _April 19, 2025_
6
6
 
7
- - 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)
7
+ - Match the latest [specification](https://drafts.csswg.org/css-values-5/#randomness)
8
+ - 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)
8
9
 
9
10
  [Full CHANGELOG](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-random-function/CHANGELOG.md)
package/README.md CHANGED
@@ -6,31 +6,31 @@
6
6
 
7
7
  ```css
8
8
  div {
9
- color: oklch(0.7, 0.2, random(120deg, 240deg));
9
+ color: oklch(0.7 0.2 random(120deg, 240deg));
10
10
  }
11
11
 
12
12
  div {
13
- color: oklch(0.7, 0.2, random(120deg, 240deg, by 7deg));
13
+ color: oklch(0.7 0.2 random(120deg, 240deg, 7deg));
14
14
  }
15
15
 
16
16
  div {
17
- color: oklch(0.7, 0.2, random(--text, 120deg, 240deg));
18
- border-color: oklch(0.7, 0.2, random(--border, 120deg, 240deg));
17
+ margin: random(10px, 100px) random(10px, 100px);
18
+ padding: random(--padding, 10px, 100px) random(--padding, 10px, 100px);
19
19
  }
20
20
 
21
21
  /* becomes */
22
22
 
23
23
  div {
24
- color: oklch(0.7, 0.2, 238.66036deg);
24
+ color: oklch(0.7 0.2 177.17235deg);
25
25
  }
26
26
 
27
27
  div {
28
- color: oklch(0.7, 0.2, 134deg);
28
+ color: oklch(0.7 0.2 176deg);
29
29
  }
30
30
 
31
31
  div {
32
- color: oklch(0.7, 0.2, 226.47057deg);
33
- border-color: oklch(0.7, 0.2, 157.76966deg);
32
+ margin: 41.7525px 70.01679px;
33
+ padding: 44.03856px 44.03856px;
34
34
  }
35
35
  ```
36
36
 
@@ -79,35 +79,35 @@ postcssRandomFunction({ preserve: true })
79
79
 
80
80
  ```css
81
81
  div {
82
- color: oklch(0.7, 0.2, random(120deg, 240deg));
82
+ color: oklch(0.7 0.2 random(120deg, 240deg));
83
83
  }
84
84
 
85
85
  div {
86
- color: oklch(0.7, 0.2, random(120deg, 240deg, by 7deg));
86
+ color: oklch(0.7 0.2 random(120deg, 240deg, 7deg));
87
87
  }
88
88
 
89
89
  div {
90
- color: oklch(0.7, 0.2, random(--text, 120deg, 240deg));
91
- border-color: oklch(0.7, 0.2, random(--border, 120deg, 240deg));
90
+ margin: random(10px, 100px) random(10px, 100px);
91
+ padding: random(--padding, 10px, 100px) random(--padding, 10px, 100px);
92
92
  }
93
93
 
94
94
  /* becomes */
95
95
 
96
96
  div {
97
- color: oklch(0.7, 0.2, 238.66036deg);
98
- color: oklch(0.7, 0.2, random(120deg, 240deg));
97
+ color: oklch(0.7 0.2 177.17235deg);
98
+ color: oklch(0.7 0.2 random(120deg, 240deg));
99
99
  }
100
100
 
101
101
  div {
102
- color: oklch(0.7, 0.2, 134deg);
103
- color: oklch(0.7, 0.2, random(120deg, 240deg, by 7deg));
102
+ color: oklch(0.7 0.2 176deg);
103
+ color: oklch(0.7 0.2 random(120deg, 240deg, 7deg));
104
104
  }
105
105
 
106
106
  div {
107
- color: oklch(0.7, 0.2, 226.47057deg);
108
- color: oklch(0.7, 0.2, random(--text, 120deg, 240deg));
109
- border-color: oklch(0.7, 0.2, 157.76966deg);
110
- border-color: oklch(0.7, 0.2, random(--border, 120deg, 240deg));
107
+ margin: 41.7525px 70.01679px;
108
+ margin: random(10px, 100px) random(10px, 100px);
109
+ padding: 44.03856px 44.03856px;
110
+ padding: random(--padding, 10px, 100px) random(--padding, 10px, 100px);
111
111
  }
112
112
  ```
113
113
 
package/dist/index.cjs CHANGED
@@ -1 +1 @@
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;
1
+ "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;
package/dist/index.mjs CHANGED
@@ -1 +1 @@
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};
1
+ 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/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@csstools/postcss-random-function",
3
3
  "description": "Use the random function in CSS",
4
- "version": "1.0.3",
4
+ "version": "2.0.0",
5
5
  "contributors": [
6
6
  {
7
7
  "name": "Antonio Laguna",
@@ -48,7 +48,7 @@
48
48
  "dist"
49
49
  ],
50
50
  "dependencies": {
51
- "@csstools/css-calc": "^2.1.2",
51
+ "@csstools/css-calc": "^2.1.3",
52
52
  "@csstools/css-parser-algorithms": "^3.0.4",
53
53
  "@csstools/css-tokenizer": "^3.0.3"
54
54
  },