npmpackage.info

Gathering detailed insights and metrics for css-blank-pseudo

css-blank-pseudo - 7.0.1 | npmpackage.info

css-blank-pseudo

PostCSS Tools and Plugins

7.0.1

982

MIT-0

CSS

13.46 kB

1,476,962,264 5.8

Installations

npm install css-blank-pseudo

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Min. Node Version

>=18

Node Version

22.1.0

NPM Version

10.7.0 Score

98.5

Supply Chain

99.4

Quality

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

1,476,962,264

Last Day

329,091

Last Week

5,859,159

Last Month

24,961,323

Last Year

285,902,139

GitHub Statistics

MIT-0 License

982 Stars

4,379 Commits

78 Forks

9 Watchers

6 Branches

132 Contributors

Updated on Jul 04, 2025

Bundle Size

53.69 kB

Minified

13.46 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

7.0.1

Package Id

css-blank-pseudo@7.0.1

Unpacked Size

48.04 kB

Size

10.37 kB

File Count

NPM Version

10.7.0

Node Version

22.1.0

Published on

Oct 23, 2024

Total Downloads

Cumulative downloads

Total Downloads

1,476,962,264

Last Day

-13.5%

329,091

Compared to previous day

Last Week

-9.3%

5,859,159

Compared to previous week

Last Month

3.6%

24,961,323

Compared to previous month

Last Year

-8%

285,902,139

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

postcss-selector-parser

Peer Dependencies

postcss

PostCSS Blank Pseudo

npm install css-blank-pseudo --save-dev

PostCSS Blank Pseudo lets you style form elements when they are empty, following the Selectors Level 4 specification.

To use this feature you need to do two things :

add the PostCSS plugin that transforms the selector into a class or attribute
add the browser polyfill that sets the attribute or class on elements in a browser

1input:blank {
2	background-color: yellow;
3}
4
5/* becomes */
6
7input[blank].js-blank-pseudo, .js-blank-pseudo input[blank] {
8	background-color: yellow;
9}
10input:blank {
11	background-color: yellow;
12}

Usage

Add PostCSS Blank Pseudo to your project:

1npm install postcss css-blank-pseudo --save-dev

Use it as a PostCSS plugin:

1const postcss = require('postcss');
2const postcssBlankPseudo = require('css-blank-pseudo');
3
4postcss([
5	postcssBlankPseudo(/* pluginOptions */)
6]).process(YOUR_CSS /*, processOptions */);

Options

preserve

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

1postcssBlankPseudo({ preserve: false })

1input:blank {
2	background-color: yellow;
3}
4
5/* becomes */
6
7input[blank].js-blank-pseudo, .js-blank-pseudo input[blank] {
8	background-color: yellow;
9}

replaceWith

The replaceWith option determines the selector to use when replacing the :blank pseudo. By default is [blank]

1postcssBlankPseudo({ replaceWith: '.css-blank' })

1input:blank {
2	background-color: yellow;
3}
4
5/* becomes */
6
7.foo {
8	color: blue;
9	color: red;
10}
11
12.baz {
13	color: green;
14}

Note that changing this option implies that it needs to be passed to the browser polyfill as well.

disablePolyfillReadyClass

The disablePolyfillReadyClass option determines if selectors are prefixed with an indicator class. This class is only set on your document if the polyfill loads and is needed.

By default this option is false. Set this to true to prevent the class from being added.

1postcssBlankPseudo({ disablePolyfillReadyClass: true })

1input:blank {
2	background-color: yellow;
3}
4
5/* becomes */
6
7input[blank] {
8	background-color: yellow;
9}
10input:blank {
11	background-color: yellow;
12}

Browser

1import cssBlankPseudoInit from 'css-blank-pseudo/browser';
2
3cssBlankPseudoInit();

1<!-- When using a CDN url you will have to manually update the version number -->
2<script src="https://unpkg.com/css-blank-pseudo@7.0.1/dist/browser-global.js"></script>
3<script>cssBlankPseudoInit()</script>

PostCSS Blank Pseudo works in all major browsers, including Safari 6+ and Internet Explorer 9+ without any additional polyfills.

This plugin conditionally uses MutationObserver to ensure recently inserted inputs get correct styling upon insertion. If you intend to rely on that behaviour for browsers that do not support MutationObserver, you have two options:

Polyfill MutationObserver. As long as it runs before cssBlankPseudoInit, the polyfill will work.
If you don't want to polyfill MutationObserver you can also manually fire a change event upon insertion so they're automatically inspected by the polyfill.

Browser Usage

force

The force option determines whether the library runs even if the browser supports the selector or not. By default, it won't run if the browser does support the selector.

1cssBlankPseudoInit({ force: true });

replaceWith

Similar to the option for the PostCSS Plugin, replaceWith determines the attribute or class to apply to an element when it's considered to be :blank.

1cssBlankPseudoInit({ replaceWith: '.css-blank' });

This option should be used if it was changed at PostCSS configuration level. Please note that using a class, leverages classList under the hood which might not be supported on some old browsers such as IE9, so you may need to polyfill classList in those cases.

Using with Next.js

Given that Next.js imports packages both on the browser and on the server, you need to make sure that the package is only imported on the browser.

As outlined in the Next.js documentation, you need to load the package with a dynamic import:

1useEffect(async () => {
2	const cssBlankPseudoInit = (await import('css-blank-pseudo/browser')).default;
3	cssBlankPseudoInit();
4}, []);

We recommend you load the polyfill as high up on your Next application as possible, such as your pages/_app.ts file.

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