Installations
npm install css-blank-pseudoDeveloper Guide
Typescript
Yes
Module System
ESM
Min. Node Version
>=18
Node Version
22.1.0
NPM Version
10.7.0
Score
98.6
Supply Chain
99.4
Quality
81.7
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Contributors
Languages
CSS (43.37%)
JavaScript (30.22%)
TypeScript (22.76%)
HTML (3.06%)
Nunjucks (0.48%)
Shell (0.1%)
Developer
Download Statistics
Total Downloads
1,373,488,567
Last Day
1,000,954
Last Week
4,620,852
Last Month
21,191,291
Last Year
285,032,898
GitHub Statistics
931 Stars
4,162 Commits
73 Forks
11 Watching
5 Branches
131 Contributors
Bundle Size
53.69 kB
Minified
13.46 kB
Minified + Gzipped
Sponsor this package
Maintainers
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
13
NPM Version
10.7.0
Node Version
22.1.0
Publised On
23 Oct 2024
Total Downloads
Cumulative downloads
Total Downloads
1,373,488,567
Last day
-6.7%
1,000,954
Compared to previous day
Last week
-18.4%
4,620,852
Compared to previous week
Last month
5.6%
21,191,291
Compared to previous month
Last year
-13.3%
285,032,898
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
1
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();
or
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 beforecssBlankPseudoInit, the polyfill will work. - If you don't want to polyfill
MutationObserveryou can also manually fire achangeevent 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.
Reason
30 commit(s) and 11 issue activity found in the last 90 days -- score normalized to 10
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
no dangerous workflow patterns detected
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 7 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
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-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