npmpackage.info

Gathering detailed insights and metrics for @csstools/postcss-color-function

Other packages similar to @csstools/postcss-color-function

@csstools/postcss-color-mix-function

3.0.10

Use the color-mix function in CSS

@csstools/postcss-hwb-function

4.0.10

Use hwb() color functions in CSS

@csstools/postcss-oklab-function

4.0.10

Use oklab() and oklch() color functions in CSS

@csstools/postcss-light-dark-function

2.0.9

Use the light-dark() color function in CSS

Gathering detailed insights and metrics for @csstools/postcss-color-function

@csstools/postcss-color-function - 4.0.10 | npmpackage.info

@csstools/postcss-color-function

PostCSS Tools and Plugins

4.0.10

981

MIT-0

CSS

36.71 kB

562,845,390 5.8

Installations

npm install @csstools/postcss-color-function

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Min. Node Version

>=18

Node Version

22.12.0

NPM Version

10.9.0 Score

97.5

Supply Chain

96.7

Quality

88.1

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

4

Total

1,230

Closed

170

Merged

1,056

Issues

Open

6

Total

364

Closed

358

Releases

Unable to fetch releases

Languages

CSS

JavaScript

TypeScript

HTML

Nunjucks

Shell

SCSS

CSS (43.25%)

JavaScript (30.24%)

TypeScript (22.9%)

HTML (3.03%)

Nunjucks (0.48%)

Shell (0.1%)

Developer

csstools

Download Statistics

Total Downloads

562,845,390

Last Day

244,503

Last Week

4,387,858

Last Month

18,718,178

Last Year

204,408,987

GitHub Statistics

MIT-0 License

981 Stars

4,379 Commits

78 Forks

9 Watchers

6 Branches

132 Contributors

Updated on Jun 30, 2025

Bundle Size

174.87 kB

Minified

36.71 kB

Minified + Gzipped

Bundlephobia

Sponsor this package

https://github.com/sponsors/csstools https://opencollective.com/csstools

Maintainers

View All 132 Contributors

Package Meta Information

Latest Version

4.0.10

Package Id

@csstools/postcss-color-function@4.0.10

Unpacked Size

9.96 kB

Size

3.60 kB

File Count

NPM Version

10.9.0

Node Version

22.12.0

Published on

May 27, 2025

Total Downloads

Cumulative downloads

Total Downloads

562,845,390

Last Day

-7.3%

244,503

Compared to previous day

Last Week

-9.1%

4,387,858

Compared to previous week

Last Month

2.4%

18,718,178

Compared to previous month

Last Year

6.5%

204,408,987

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

@csstools/css-color-parser @csstools/css-parser-algorithms @csstools/css-tokenizer @csstools/postcss-progressive-custom-properties @csstools/utilities

Peer Dependencies

postcss

PostCSS Color Function

npm install @csstools/postcss-color-function --save-dev

PostCSS Color Function lets you use the color function in CSS, following the CSS Color specification.

1.color {
2	color: color(display-p3 0.64331 0.19245 0.16771);
3}
4
5:root {
6	--a-color: color(srgb 0.64331 0.19245 0.16771);
7}
8
9/* becomes */
10
11.color {
12	color: rgb(179, 35, 35);
13}
14
15:root {
16	--a-color: rgb(164, 49, 43);
17}

Usage

Add PostCSS Color Function to your project:

1npm install postcss @csstools/postcss-color-function --save-dev

Use it as a PostCSS plugin:

1const postcss = require('postcss');
2const postcssColorFunction = require('@csstools/postcss-color-function');
3
4postcss([
5	postcssColorFunction(/* pluginOptions */)
6]).process(YOUR_CSS /*, processOptions */);

Options

preserve

The preserve option determines whether the original notation is preserved. By default, it is not preserved.

1postcssColorFunction({ preserve: true })

1.color {
2	color: color(display-p3 0.64331 0.19245 0.16771);
3}
4
5:root {
6	--a-color: color(srgb 0.64331 0.19245 0.16771);
7}
8
9/* becomes */
10
11.color {
12	color: rgb(179, 35, 35);
13	color: color(display-p3 0.64331 0.19245 0.16771);
14}
15
16:root {
17	--a-color: rgb(164, 49, 43);
18}
19
20@supports (color: color(display-p3 0 0 0%)) {
21:root {
22	--a-color: color(srgb 0.64331 0.19245 0.16771);
23}
24}

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 preserve to false or if you bring your own fix for Custom Properties.
See what the plugin does in its README.

1postcssColorFunction({ enableProgressiveCustomProperties: false })

1.color {
2	color: color(display-p3 0.64331 0.19245 0.16771);
3}
4
5:root {
6	--a-color: color(srgb 0.64331 0.19245 0.16771);
7}
8
9/* becomes */
10
11.color {
12	color: rgb(179, 35, 35);
13	color: color(display-p3 0.64331 0.19245 0.16771);
14}
15
16:root {
17	--a-color: rgb(164, 49, 43);
18	--a-color: color(srgb 0.64331 0.19245 0.16771);
19}

Custom properties do not fallback to the previous declaration

Supported Color Spaces

1.color-spaces {
2	color: color(a98-rgb 0.803 0.484 0.944);
3	color: color(display-p3 0.8434 0.509 0.934);
4	color: color(prophoto-rgb 0.759 0.493 0.898);
5	color: color(rec2020 0.772 0.491 0.920);
6	color: color(srgb 0.897 0.488 0.959);
7	color: color(srgb-linear 0.783 0.203 0.910);
8	color: color(xyz 0.560 0.377 0.904);
9	color: color(xyz-d50 0.550 0.375 0.680);
10	color: color(xyz-d65 0.560 0.377 0.904);
11}

Copyright : color conversions

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

License

Determines if the project has defined a license.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Security-Policy

Determines if the project has published a security policy.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

9

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

7

SAST

Determines if the project uses static code analysis.

3

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

3

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

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

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Fuzzing

Determines if the project uses fuzzing.

Score

5.8

/10

Last Scanned on 2025-06-30

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