npmpackage.info

@csstools/postcss-color-mix-function

PostCSS Tools and Plugins

3.0.7

931

MIT-0

CSS

36.15 kB

72,030,743 5.9

Installations

npm install @csstools/postcss-color-mix-function

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Min. Node Version

>=18

Node Version

22.12.0

NPM Version

10.9.0 Pull Requests

Open

4

Total

1,159

Closed

152

Merged

1,003

Issues

Open

5

Total

350

Closed

345

Releases

Unable to fetch releases

Contributors

131

View all 131 contributors

Languages

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

csstools

Download Statistics

Total Downloads

72,030,743

Last Day

254,048

Last Week

1,142,370

Last Month

5,013,579

Last Year

50,320,037

GitHub Statistics

931 Stars

4,162 Commits

73 Forks

11 Watching

5 Branches

131 Contributors

Bundle Size

168.84 kB

Minified

36.15 kB

Minified + Gzipped

Bundlephobia

Sponsor this package

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

Maintainers

Package Meta Information

Latest Version

3.0.7

Package Id

@csstools/postcss-color-mix-function@3.0.7

Unpacked Size

8.54 kB

Size

3.29 kB

File Count

NPM Version

10.9.0

Node Version

22.12.0

Publised On

27 Dec 2024

Total Downloads

Cumulative downloads

Total Downloads

72,030,743

Last day

-3.6%

254,048

Compared to previous day

Last week

-14.7%

1,142,370

Compared to previous week

Last month

11.1%

5,013,579

Compared to previous month

Last year

131.8%

50,320,037

Compared to previous year

Daily Downloads

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

Versions

PostCSS Color Mix Function

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

PostCSS Color Mix Function lets you use the color-mix() function following the CSS Color 5 Specification.

1.purple_plum {
2	color: color-mix(in lch, purple 50%, plum 50%);
3}
4
5/* becomes */
6
7.purple_plum {
8	color: rgb(175, 92, 174);
9}

[!NOTE] We can not dynamically resolve var() arguments in color-mix(), only static values will work.

Usage

Add PostCSS Color Mix Function to your project:

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

Use it as a PostCSS plugin:

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

Options

preserve

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

1postcssColorMixFunction({ preserve: true })

1.purple_plum {
2	color: color-mix(in lch, purple 50%, plum 50%);
3}
4
5/* becomes */
6
7.purple_plum {
8	color: rgb(175, 92, 174);
9	color: color-mix(in lch, purple 50%, plum 50%);
10}

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Security-Policy

Determines if the project has published a security policy.

10

Dangerous-Workflow

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

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

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

10

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.9

/10

Last Scanned on 2025-01-27

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