Gathering detailed insights and metrics for @csstools/postcss-stepped-value-functions
Gathering detailed insights and metrics for @csstools/postcss-stepped-value-functions
PostCSS Tools and Plugins
Installations
npm install @csstools/postcss-stepped-value-functionsDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Min. Node Version
>=18
Node Version
22.12.0
NPM Version
10.9.0
Score
97.6
Supply Chain
95.7
Quality
89.6
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Languages
7
CSS
JavaScript
TypeScript
HTML
Nunjucks
Shell
SCSS
CSS (43.36%)
JavaScript (30.33%)
TypeScript (22.68%)
HTML (3.06%)
Nunjucks (0.48%)
Shell (0.1%)
Developer
Download Statistics
Total Downloads
507,969,113
Last Day
786,602
Last Week
4,244,795
Last Month
17,140,258
Last Year
198,347,328
GitHub Statistics
MIT-0 License
962 Stars
4,267 Commits
75 Forks
9 Watchers
6 Branches
130 Contributors
Updated on May 13, 2025
Bundle Size
80.44 kB
Minified
17.93 kB
Minified + Gzipped
Sponsor this package
Maintainers
3
Package Meta Information
Latest Version
4.0.8
Package Id
@csstools/postcss-stepped-value-functions@4.0.8
Unpacked Size
6.81 kB
Size
2.84 kB
File Count
7
NPM Version
10.9.0
Node Version
22.12.0
Published on
Apr 19, 2025
Total Downloads
Cumulative downloads
Total Downloads
507,969,113
Last Day
9.2%
786,602
Compared to previous day
Last Week
11.4%
4,244,795
Compared to previous week
Last Month
-5.6%
17,140,258
Compared to previous month
Last Year
8.5%
198,347,328
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
PostCSS Stepped Value Functions 
npm install @csstools/postcss-stepped-value-functions --save-dev
PostCSS Stepped Value Functions lets you use round, rem and mod stepped value functions, following the CSS Values 4 specification.
1.test-functions { 2 padding: 8px mod(18px, 5px) 1px calc(rem(15px, 6px) + 50%); 3 transform: rotate(mod(-140deg, -90deg)); 4 top: round(15px, 4px); 5 right: round(nearest, 15px, 4px); 6 bottom: round(up, 15px, 7px); 7 left: round(down, 15px, 4px); 8 width: round(to-zero, 15px, 4px); 9} 10 11/* becomes */ 12 13.test-functions { 14 padding: 8px 3px 1px calc(3px + 50%); 15 transform: rotate(-50deg); 16 top: 16px; 17 right: 16px; 18 bottom: 21px; 19 left: 12px; 20 width: 12px; 21}
Usage
Add PostCSS Stepped Value Functions to your project:
1npm install postcss @csstools/postcss-stepped-value-functions --save-dev
Use it as a PostCSS plugin:
1const postcss = require('postcss'); 2const postcssSteppedValueFunctions = require('@csstools/postcss-stepped-value-functions'); 3 4postcss([ 5 postcssSteppedValueFunctions(/* pluginOptions */) 6]).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.
1postcssSteppedValueFunctions({ preserve: true })
1.test-functions { 2 padding: 8px mod(18px, 5px) 1px calc(rem(15px, 6px) + 50%); 3 transform: rotate(mod(-140deg, -90deg)); 4 top: round(15px, 4px); 5 right: round(nearest, 15px, 4px); 6 bottom: round(up, 15px, 7px); 7 left: round(down, 15px, 4px); 8 width: round(to-zero, 15px, 4px); 9} 10 11/* becomes */ 12 13.test-functions { 14 padding: 8px 3px 1px calc(3px + 50%); 15 padding: 8px mod(18px, 5px) 1px calc(rem(15px, 6px) + 50%); 16 transform: rotate(-50deg); 17 transform: rotate(mod(-140deg, -90deg)); 18 top: 16px; 19 top: round(15px, 4px); 20 right: 16px; 21 right: round(nearest, 15px, 4px); 22 bottom: 21px; 23 bottom: round(up, 15px, 7px); 24 left: 12px; 25 left: round(down, 15px, 4px); 26 width: 12px; 27 width: round(to-zero, 15px, 4px); 28}
No vulnerabilities found.
Reason
30 commit(s) and 7 issue activity found in the last 90 days -- score normalized to 10
Reason
no dangerous workflow patterns detected
Reason
security policy file detected
Details
- Info: security policy file detected: SECURITY.md:1
- Info: Found linked content: SECURITY.md:1
- Info: Found disclosure, vulnerability, and/or timelines in security policy: SECURITY.md:1
- Info: Found text in security policy: SECURITY.md:1
Reason
license file detected
Details
- Info: project has a license file: LICENSE.md:0
- Info: FSF or OSI recognized license: MIT No Attribution: LICENSE.md:0
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
SAST tool detected but not run on all commits
Details
- Info: SAST configuration detected: CodeQL
- Warn: 0 commits out of 8 are checked with a SAST tool
Reason
branch protection is not maximal on development and all release branches
Details
- Info: 'allow deletion' disabled on branch 'main'
- Info: 'force pushes' disabled on branch 'main'
- Info: 'branch protection settings apply to administrators' is required to merge on branch 'main'
- Warn: could not determine whether codeowners review is allowed
- Warn: no status checks found to merge onto branch 'main'
- Warn: PRs are not required to make changes on branch 'main'; or we don't have data to detect it.If you think it might be the latter, make sure to run Scorecard with a PAT or use Repo Rules (that are always public) instead of Branch Protection settings
Reason
dependency not pinned by hash detected -- score normalized to 3
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/codeql.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/codeql.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/codeql.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/codeql.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-preset-env.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/deploy-preset-env.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-preset-env.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/deploy-preset-env.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/labeler.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/labeler.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/lint.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/lint.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/test.yml/main?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/test.yml:98
- Info: 0 out of 11 GitHub-owned GitHubAction dependencies pinned
- Info: 6 out of 7 npmCommand dependencies pinned
Reason
Found 0/23 approved changesets -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/codeql.yml:1
- Warn: no topLevel permission defined: .github/workflows/deploy-preset-env.yml:1
- Warn: no topLevel permission defined: .github/workflows/labeler.yml:1
- Warn: no topLevel permission defined: .github/workflows/lint.yml:1
- Warn: no topLevel permission defined: .github/workflows/test.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Score
5.9
/10
Last Scanned on 2025-05-12
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More