Gathering detailed insights and metrics for @csstools/postcss-oklab-function
Installations
npm install @csstools/postcss-oklab-functionDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Min. Node Version
>=18
Node Version
22.12.0
NPM Version
10.9.0
Score
97.7
Supply Chain
97.7
Quality
89
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Contributors
131
Languages
7
CSS
JavaScript
TypeScript
HTML
Nunjucks
Shell
SCSS
CSS (43.37%)
JavaScript (30.22%)
TypeScript (22.76%)
HTML (3.06%)
Nunjucks (0.48%)
Shell (0.1%)
Developer
Download Statistics
Total Downloads
486,006,341
Last Day
752,309
Last Week
3,509,269
Last Month
15,820,229
Last Year
194,700,719
GitHub Statistics
931 Stars
4,164 Commits
73 Forks
11 Watching
3 Branches
131 Contributors
Bundle Size
169.05 kB
Minified
36.19 kB
Minified + Gzipped
Sponsor this package
Maintainers
3
Package Meta Information
Latest Version
4.0.7
Package Id
@csstools/postcss-oklab-function@4.0.7
Unpacked Size
11.52 kB
Size
4.06 kB
File Count
7
NPM Version
10.9.0
Node Version
22.12.0
Publised On
27 Dec 2024
Total Downloads
Cumulative downloads
Total Downloads
486,006,341
Last day
-6.9%
752,309
Compared to previous day
Last week
-16.7%
3,509,269
Compared to previous week
Last month
8.2%
15,820,229
Compared to previous month
Last year
3.5%
194,700,719
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Versions
PostCSS OKLab Function 
PostCSS OKLab Function lets you use oklab and oklch color functions in
CSS, following the CSS Color specification.
1.test-oklab { 2 color: oklab(40% 0.001236 0.0039); 3} 4 5.test-oklch { 6 color: oklch(40% 0.268735435 34.568626); 7} 8 9/* becomes */ 10 11.test-oklab { 12 color: rgb(73, 71, 69); 13 color: color(display-p3 0.28515 0.27983 0.27246); 14} 15 16.test-oklch { 17 color: rgb(131, 28, 0); 18 color: color(display-p3 0.49163 0.11178 0.00000); 19}
Usage
Add PostCSS OKLab Function to your project:
1npm install postcss @csstools/postcss-oklab-function --save-dev
Use it as a PostCSS plugin:
1const postcss = require('postcss'); 2const postcssOKLabFunction = require('@csstools/postcss-oklab-function'); 3 4postcss([ 5 postcssOKLabFunction(/* pluginOptions */) 6]).process(YOUR_CSS /*, processOptions */);
PostCSS OKLab Function runs in all Node environments, with special instructions for:
| Node | PostCSS CLI | Webpack | Gulp | Grunt |
|---|
Options
preserve
The preserve option determines whether the original notation
is preserved. By default, it is not preserved.
1postcssOKLabFunction({ preserve: true })
1.test-oklab { 2 color: oklab(40% 0.001236 0.0039); 3} 4 5.test-oklch { 6 color: oklch(40% 0.268735435 34.568626); 7} 8 9/* becomes */ 10 11.test-oklab { 12 color: rgb(73, 71, 69); 13 color: color(display-p3 0.28515 0.27983 0.27246); 14 color: oklab(40% 0.001236 0.0039); 15} 16 17.test-oklch { 18 color: rgb(131, 28, 0); 19 color: color(display-p3 0.49163 0.11178 0.00000); 20 color: oklch(40% 0.268735435 34.568626); 21}
enableProgressiveCustomProperties
The enableProgressiveCustomProperties option determines whether the original notation
is wrapped with @supports when used in Custom Properties. By default, it is enabled.
[!NOTE] We only recommend disabling this when you set
preservetofalseor if you bring your own fix for Custom Properties.
See what the plugin does in its README.
1postcssOKLabFunction({ enableProgressiveCustomProperties: false })
1:root { 2 --firebrick: oklab(40% 0.234 0.39); 3} 4 5/* becomes */ 6 7:root { 8 --firebrick: rgb(133, 0, 67); /* will never be used, not even in older browser */ 9 --firebrick: color(display-p3 0.49890 0.00000 0.25954); /* will never be used, not even in older browser */ 10 --firebrick: oklab(40% 0.234 0.39); 11}
subFeatures
displayP3
The subFeatures.displayP3 option determines if color(display-p3 ...) is used as a fallback.
By default, it is enabled.
display-p3 can display wider gamut colors than rgb on some devices.
1postcssOKLabFunction({ 2 subFeatures: { 3 displayP3: false 4 } 5})
1.test-oklab { 2 color: oklab(40% 0.001236 0.0039); 3} 4 5.test-oklch { 6 color: oklch(40% 0.268735435 34.568626); 7} 8 9/* becomes */ 10 11.test-oklab { 12 color: rgb(73, 71, 69); 13} 14 15.test-oklch { 16 color: rgb(131, 28, 0); 17}
Copyright : color conversions
This software or document includes material copied from or derived from https://github.com/w3c/csswg-drafts/tree/main/css-color-4. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang).
No vulnerabilities found.
Reason
30 commit(s) and 12 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 9 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/21 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
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
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Score
5.9
/10
Last Scanned on 2025-02-03
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