{"_id":"@csstools/postcss-custom-functions","_rev":"2-ecb262c465178a95725c3ab2ec82eab7","name":"@csstools/postcss-custom-functions","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@csstools/postcss-custom-functions","version":"1.0.0","keywords":["css","custom-function","function","postcss","postcss-plugin"],"license":"MIT-0","_id":"@csstools/postcss-custom-functions@1.0.0","maintainers":[{"name":"jonathantneal","email":"jonathantneal@hotmail.com"},{"name":"alaguna","email":"sombragriselros@gmail.com"},{"name":"romainmenke","email":"romainmenke@gmail.com"}],"contributors":[{"name":"Romain Menke","email":"romainmenke@gmail.com"}],"homepage":"https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-functions#readme","bugs":{"url":"https://github.com/csstools/postcss-plugins/issues"},"dist":{"shasum":"4877901790d43db289cecd408df001c43ef813e2","tarball":"https://registry.npmjs.org/@csstools/postcss-custom-functions/-/postcss-custom-functions-1.0.0.tgz","fileCount":6,"integrity":"sha512-B/I4+5FYDkwJx+OZbiU5/zRQWrUjyD5P+yfcrKCrpYNx4s5+Dj0rsqP0YzDUYPJVIuhOrq0MK2zAI7SMv8qMjQ==","signatures":[{"sig":"MEUCIGA4cPz/6ZB5SIbCRTNK81sFm740cAZv+PgHk8Z5E+mnAiEAxE5/vED6kuIeiJYI4Oo2mvfdMGzksP21+UIFRJJuFa4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29323},"type":"module","engines":{"node":">=20.19.0"},"exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"}},"funding":[{"url":"https://github.com/sponsors/csstools","type":"github"},{"url":"https://opencollective.com/csstools","type":"opencollective"}],"gitHead":"e1f837010cdbc3356581bfa65199fa769ea6c8b6","scripts":{},"_npmUser":{"name":"romainmenke","email":"romainmenke@gmail.com"},"repository":{"url":"git+https://github.com/csstools/postcss-plugins.git","type":"git","directory":"plugins/postcss-custom-functions"},"_npmVersion":"11.13.0","description":"Custom functions allow authors the same power as custom properties, but parameterized","directories":{},"_nodeVersion":"26.1.0","dependencies":{"@csstools/css-tokenizer":"^4.0.2","@csstools/css-parser-algorithms":"^4.0.2","@csstools/custom-function-parser":"^1.0.0","@csstools/cascade-layer-name-parser":"^3.0.2"},"_hasShrinkwrap":false,"peerDependencies":{"postcss":"^8.4"},"_npmOperationalInternal":{"tmp":"tmp/postcss-custom-functions_1.0.0_1790835346437_0.6708239398906324","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"_id":"@csstools/postcss-custom-functions@1.0.1","bugs":{"url":"https://github.com/csstools/postcss-plugins/issues"},"dist":{"shasum":"2d2ec08e8b7339097ee6f423267e6caaeaee43ce","tarball":"https://registry.npmjs.org/@csstools/postcss-custom-functions/-/postcss-custom-functions-1.0.1.tgz","fileCount":6,"integrity":"sha512-fpsZ0M5R5sTpyELyw69Uj56jfbYxwzQ3jJAP/WfXsT9EH8Rl8fv/jv4UeiFXiiNExzzg9PyTMxcBpkz3GxiYcA==","signatures":[{"sig":"MEQCIATTdVdHjn7+paKICafYgXtrEJxAVro6eSN2JsAiIBkqAiANmmhuEmIc5/diqJShhzlVJLG3bAGXDNVwFXaSl9aK+g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDipTRXUTCU9qgNjGEgrLEHeO+VZ+uR7gQNivO5McgicAIhAN0TXO4Z24r/JJkvT1DRYV8tTyWEk6ZHCy0a/5UgKUBb"}],"unpackedSize":28750},"name":"@csstools/postcss-custom-functions","type":"module","engines":{"node":">=20.19.0"},"exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"}},"funding":[{"url":"https://github.com/sponsors/csstools","type":"github"},{"url":"https://opencollective.com/csstools","type":"opencollective"}],"gitHead":"1970549f3da3e9d134aba869d9315607d58412e5","license":"MIT-0","scripts":{},"version":"1.0.1","_npmUser":{"name":"romainmenke","email":"romainmenke@gmail.com"},"homepage":"https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-functions#readme","keywords":["css","custom-function","function","postcss","postcss-plugin"],"repository":{"url":"git+https://github.com/csstools/postcss-plugins.git","type":"git","directory":"plugins/postcss-custom-functions"},"_npmVersion":"11.13.0","description":"Custom functions allow authors the same power as custom properties, but parameterized","directories":{},"maintainers":[{"name":"jonathantneal","email":"jonathantneal@hotmail.com"},{"name":"alaguna","email":"sombragriselros@gmail.com"},{"name":"romainmenke","email":"romainmenke@gmail.com"}],"_nodeVersion":"26.1.0","contributors":[{"name":"Romain Menke","email":"romainmenke@gmail.com"}],"dependencies":{"@csstools/css-tokenizer":"^4.0.2","@csstools/css-parser-algorithms":"^4.0.2","@csstools/custom-function-parser":"^1.0.0","@csstools/cascade-layer-name-parser":"^3.0.2"},"_hasShrinkwrap":false,"peerDependencies":{"postcss":"^8.4"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/postcss-custom-functions_1.0.1_1790956451108_0.9342006289725193"}}},"time":{"created":"2026-10-01T06:15:46.223Z","modified":"2026-10-02T15:54:11.451Z","1.0.0":"2026-10-01T06:15:46.566Z","1.0.1":"2026-10-02T15:54:11.225Z"},"bugs":{"url":"https://github.com/csstools/postcss-plugins/issues"},"license":"MIT-0","homepage":"https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-functions#readme","keywords":["css","custom-function","function","postcss","postcss-plugin"],"repository":{"url":"git+https://github.com/csstools/postcss-plugins.git","type":"git","directory":"plugins/postcss-custom-functions"},"description":"Custom functions allow authors the same power as custom properties, but parameterized","contributors":[{"name":"Romain Menke","email":"romainmenke@gmail.com"}],"maintainers":[{"name":"jonathantneal","email":"jonathantneal@hotmail.com"},{"name":"alaguna","email":"sombragriselros@gmail.com"},{"name":"romainmenke","email":"romainmenke@gmail.com"}],"readme":"# PostCSS Custom Functions [<img src=\"https://postcss.github.io/postcss/logo.svg\" alt=\"PostCSS Logo\" width=\"90\" height=\"90\" align=\"right\">][PostCSS]\n\n`npm install @csstools/postcss-custom-functions --save-dev`\n\n[PostCSS Custom Functions] lets you use `@function` custom functions following [CSS Custom Functions and Mixins 1].\n\nCustom functions are still an early draft.  \nThis plugin is only a partial implementation to avoid conflicts with the final specification.\n\nUnsupported:\n- typed parameters without default values\n- return types other than the default `type(*)`\n- `@function` definitions inside `@container` or `@scope`\n- `@function` definitions inside a `@layer` that is itself inside a conditional group rule\n- `@function` definitions inside a style rule\n- definitions whose body contains anything other than declarations and conditional group rules\n- `result` descriptors that resolve to a CSS-wide keyword through a conditional rule or a `var()` fallback\n- validation that a typed default value matches its parameter type\n\nDefinitions inside `@layer`, `@media` and `@supports` are supported. When a name\nhas several active definitions, the browser cascade selects the strongest one.\n\nUnsupported definitions are left as-is. A definition is only removed when every\ncall site is transformed by this plugin, so call sites that are left as-is (for\nexample inside `@keyframes` or a nested conditional declaration) keep their\ndefinitions.\n\nUntyped parameters with default values are supported and may use any value,\nincluding relative units and `var()` references.\n\nTyped parameters with default values are checked by the browser through a\ngenerated `@property` registration. A default value that is not\ncomputationally independent (for example `1em` or `var(--x)`) can not be used\nas an `initial-value` and makes the function unsupported.\n\n```css\n@function --negative(--value) {\n\tresult: calc(-1 * var(--value));\n}\n\n@function --double(--value <length>: 1px) {\n\tresult: calc(2 * var(--value));\n}\n\nhtml {\n\t--gap: 1em;\n\tpadding: --negative(var(--gap));\n\tmargin: --double(4px);\n}\n\n/* becomes */\n\nhtml {\n\t--gap: 1em;\n\t--_csstools-cf-1gice1e-1-arg-0: var(--gap);\n\t--_csstools-cf-1gice1e-0-result: calc(-1 * var(--_csstools-cf-1gice1e-1-arg-0));\n\tpadding: var(--_csstools-cf-1gice1e-0-result);\n\t--_csstools-cf-1gice1e-3-arg-0: 4px;\n\t--_csstools-cf-1gice1e-2-result: calc(2 * var(--_csstools-cf-1gice1e-3-arg-0));\n\tmargin: var(--_csstools-cf-1gice1e-2-result);\n}\n@property --_csstools-cf-1gice1e-3-arg-0 {\n\tsyntax: \"<length>\";\n\tinherits: false;\n\tinitial-value: 1px;\n}\n```\n\n## Usage\n\nAdd [PostCSS Custom Functions] to your project:\n\n```bash\nnpm install postcss @csstools/postcss-custom-functions --save-dev\n```\n\nUse it as a [PostCSS] plugin:\n\n```js\nconst postcss = require('postcss');\nconst postcssCustomFunctions = require('@csstools/postcss-custom-functions');\n\npostcss([\n\tpostcssCustomFunctions(/* pluginOptions */)\n]).process(YOUR_CSS /*, processOptions */);\n```\n\n\n\n## Options\n\n### preserve\n\nThe `preserve` option determines whether the original notation\nis preserved. By default, it is not preserved.\n\n```js\npostcssCustomFunctions({ preserve: true })\n```\n\n```css\n@function --negative(--value) {\n\tresult: calc(-1 * var(--value));\n}\n\n@function --double(--value <length>: 1px) {\n\tresult: calc(2 * var(--value));\n}\n\nhtml {\n\t--gap: 1em;\n\tpadding: --negative(var(--gap));\n\tmargin: --double(4px);\n}\n\n/* becomes */\n\n@function --negative(--value) {\n\tresult: calc(-1 * var(--value));\n}\n\n@function --double(--value <length>: 1px) {\n\tresult: calc(2 * var(--value));\n}\n\nhtml {\n\t--gap: 1em;\n\t--_csstools-cf-1gice1e-1-arg-0: var(--gap);\n\t--_csstools-cf-1gice1e-0-result: calc(-1 * var(--_csstools-cf-1gice1e-1-arg-0));\n\tpadding: var(--_csstools-cf-1gice1e-0-result);\n\tpadding: --negative(var(--gap));\n\t--_csstools-cf-1gice1e-3-arg-0: 4px;\n\t--_csstools-cf-1gice1e-2-result: calc(2 * var(--_csstools-cf-1gice1e-3-arg-0));\n\tmargin: var(--_csstools-cf-1gice1e-2-result);\n\tmargin: --double(4px);\n}\n\n@property --_csstools-cf-1gice1e-3-arg-0 {\n\tsyntax: \"<length>\";\n\tinherits: false;\n\tinitial-value: 1px;\n}\n```\n\n[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test\n[css-url]: https://cssdb.org/#custom-functions\n[discord]: https://discord.gg/bUadyRwkJS\n[npm-url]: https://www.npmjs.com/package/@csstools/postcss-custom-functions\n\n[PostCSS]: https://github.com/postcss/postcss\n[PostCSS Custom Functions]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-functions\n[CSS Custom Functions and Mixins 1]: https://drafts.csswg.org/css-mixins-1/#function-rule\n","readmeFilename":"README.md"}