@csstools/postcss-random-function 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Changes to PostCSS Random Function
+
+### 1.0.0
+
+_November 11, 2024_
+
+- Initial version
+- 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)

package/LICENSE.md

@@ -0,0 +1,18 @@
+MIT No Attribution (MIT-0)
+
+Copyright © CSSTools Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the “Software”), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,121 @@
+# PostCSS Random Function [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS]
+
+`npm install @csstools/postcss-random-function --save-dev`
+
+[PostCSS Random Function] lets you use the `random` function, following the [CSS Values 5] specification.
+
+```css
+div {
+	color: oklch(0.7, 0.2, random(120deg, 240deg));
+}
+
+div {
+	color: oklch(0.7, 0.2, random(120deg, 240deg, by 7deg));
+}
+
+div {
+	color: oklch(0.7, 0.2, random(--text, 120deg, 240deg));
+	border-color: oklch(0.7, 0.2, random(--border, 120deg, 240deg));
+}
+
+/* becomes */
+
+div {
+	color: oklch(0.7, 0.2, 238.66036deg);
+}
+
+div {
+	color: oklch(0.7, 0.2, 134deg);
+}
+
+div {
+	color: oklch(0.7, 0.2, 226.47057deg);
+	border-color: oklch(0.7, 0.2, 157.76966deg);
+}
+```
+
+> [!NOTE]
+> Generated values are deterministic pseudo random numbers.
+> Generating values twice with the same input will give the same result.
+> The input length of the CSS source file is used as a random seed.
+
+## Usage
+
+Add [PostCSS Random Function] to your project:
+
+```bash
+npm install postcss @csstools/postcss-random-function --save-dev
+```
+
+Use it as a [PostCSS] plugin:
+
+```js
+const postcss = require('postcss');
+const postcssRandomFunction = require('@csstools/postcss-random-function');
+
+postcss([
+	postcssRandomFunction(/* pluginOptions */)
+]).process(YOUR_CSS /*, processOptions */);
+```
+
+
+
+## ⚠️ About custom properties
+
+Given the dynamic nature of custom properties it's impossible to know what the variable value is, which means the plugin can't compute a final value for the stylesheet. 
+
+Because of that, any usage that contains a `var` is skipped.
+
+## Options
+
+### preserve
+
+The `preserve` option determines whether the original notation
+is preserved. By default, it is not preserved.
+
+```js
+postcssRandomFunction({ preserve: true })
+```
+
+```css
+div {
+	color: oklch(0.7, 0.2, random(120deg, 240deg));
+}
+
+div {
+	color: oklch(0.7, 0.2, random(120deg, 240deg, by 7deg));
+}
+
+div {
+	color: oklch(0.7, 0.2, random(--text, 120deg, 240deg));
+	border-color: oklch(0.7, 0.2, random(--border, 120deg, 240deg));
+}
+
+/* becomes */
+
+div {
+	color: oklch(0.7, 0.2, 238.66036deg);
+	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));
+}
+
+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));
+}
+```
+
+[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
+[css-url]: https://cssdb.org/#random-function
+[discord]: https://discord.gg/bUadyRwkJS
+[npm-url]: https://www.npmjs.com/package/@csstools/postcss-random-function
+
+[PostCSS]: https://github.com/postcss/postcss
+[PostCSS Random Function]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-random-function
+[CSS Values 5]: https://drafts.csswg.org/css-values-5/#random

package/dist/index.cjs

@@ -0,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;

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+import type { PluginCreator } from 'postcss';
+
+declare const creator: PluginCreator<pluginOptions>;
+export default creator;
+
+/** postcss-random-function plugin options */
+export declare type pluginOptions = {
+    /** Preserve the original notation. default: false */
+    preserve?: boolean;
+};
+
+export { }

package/dist/index.mjs

@@ -0,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};

package/package.json

@@ -0,0 +1,71 @@
+{
+	"name": "@csstools/postcss-random-function",
+	"description": "Use round, rem and mod functions in CSS",
+	"version": "1.0.0",
+	"contributors": [
+		{
+			"name": "Antonio Laguna",
+			"email": "antonio@laguna.es",
+			"url": "https://antonio.laguna.es"
+		},
+		{
+			"name": "Romain Menke",
+			"email": "romainmenke@gmail.com"
+		}
+	],
+	"license": "MIT-0",
+	"funding": [
+		{
+			"type": "github",
+			"url": "https://github.com/sponsors/csstools"
+		},
+		{
+			"type": "opencollective",
+			"url": "https://opencollective.com/csstools"
+		}
+	],
+	"engines": {
+		"node": ">=18"
+	},
+	"type": "module",
+	"main": "dist/index.cjs",
+	"module": "dist/index.mjs",
+	"exports": {
+		".": {
+			"import": {
+				"types": "./dist/index.d.ts",
+				"default": "./dist/index.mjs"
+			},
+			"require": {
+				"default": "./dist/index.cjs"
+			}
+		}
+	},
+	"files": [
+		"CHANGELOG.md",
+		"LICENSE.md",
+		"README.md",
+		"dist"
+	],
+	"dependencies": {
+		"@csstools/css-calc": "^2.1.0",
+		"@csstools/css-parser-algorithms": "^3.0.4",
+		"@csstools/css-tokenizer": "^3.0.3"
+	},
+	"peerDependencies": {
+		"postcss": "^8.4"
+	},
+	"scripts": {},
+	"homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-random-function#readme",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/csstools/postcss-plugins.git",
+		"directory": "plugins/postcss-random-function"
+	},
+	"bugs": "https://github.com/csstools/postcss-plugins/issues",
+	"keywords": [
+		"css",
+		"postcss-plugin",
+		"random"
+	]
+}