Gathering detailed insights and metrics for postcss-focus-within
Installations
npm install postcss-focus-withinDeveloper Guide
BETA
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.2
Quality
81
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
1,400,446,463
Last Day
1,007,528
Last Week
4,654,187
Last Month
21,360,955
Last Year
286,187,286
GitHub Statistics
931 Stars
4,164 Commits
73 Forks
11 Watching
3 Branches
131 Contributors
Bundle Size
53.72 kB
Minified
13.46 kB
Minified + Gzipped
Sponsor this package
Maintainers
3
Package Meta Information
Latest Version
9.0.1
Package Id
postcss-focus-within@9.0.1
Unpacked Size
31.78 kB
Size
7.66 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,400,446,463
Last day
-6.7%
1,007,528
Compared to previous day
Last week
-18.5%
4,654,187
Compared to previous week
Last month
5.7%
21,360,955
Compared to previous month
Last year
-13.5%
286,187,286
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
1
Versions
PostCSS Focus Within 
npm install postcss-focus-within --save-dev
PostCSS Focus Within lets you use the :focus-within pseudo-class in CSS,
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
1.my-form-field:focus-within label { 2 background-color: yellow; 3} 4 5/* becomes */ 6 7.my-form-field[focus-within].js-focus-within label, .js-focus-within .my-form-field[focus-within] label { 8 background-color: yellow; 9} 10.my-form-field:focus-within label { 11 background-color: yellow; 12}
PostCSS Focus Within duplicates rules using the :focus-within pseudo-class
with a [focus-within] attribute selector, the same selector used by the
focus-within polyfill. This replacement selector can be changed using the
replaceWith option. Also, the preservation of the original :focus-within
rule can be disabled using the preserve option.
Usage
Add PostCSS Focus Within to your project:
1npm install postcss postcss-focus-within --save-dev
Use it as a PostCSS plugin:
1const postcss = require('postcss'); 2const postcssFocusWithin = require('postcss-focus-within'); 3 4postcss([ 5 postcssFocusWithin(/* pluginOptions */) 6]).process(YOUR_CSS /*, processOptions */);
Options
preserve
The preserve option determines whether the original notation
is preserved. By default, it is preserved.
1postcssFocusWithin({ preserve: false })
1.my-form-field:focus-within label { 2 background-color: yellow; 3} 4 5/* becomes */ 6 7.my-form-field[focus-within].js-focus-within label, .js-focus-within .my-form-field[focus-within] label { 8 background-color: yellow; 9}
replaceWith
The replaceWith option defines the selector to replace :focus-within. By
default, the replacement selector is [focus-within].
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.
1postcssFocusWithin({ replaceWith: '.focus-within' });1.my-form-field:focus-within label { 2 background-color: yellow; 3} 4 5/* becomes */ 6 7.my-form-field.focus-within.js-focus-within label, .js-focus-within .my-form-field.focus-within label { 8 background-color: yellow; 9} 10.my-form-field:focus-within label { 11 background-color: yellow; 12}
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.
1postcssFocusWithin({ disablePolyfillReadyClass: true })
1.my-form-field:focus-within label { 2 background-color: yellow; 3} 4 5/* becomes */ 6 7.my-form-field[focus-within] label { 8 background-color: yellow; 9} 10.my-form-field:focus-within label { 11 background-color: yellow; 12}
Browser
1import focusWithinInit from 'postcss-focus-within/browser'; 2 3focusWithinInit();
or
1<!-- When using a CDN url you will have to manually update the version number --> 2<script src="https://unpkg.com/postcss-focus-within@9.0.1/dist/browser-global.js"></script> 3<script>focusWithinInit()</script>
PostCSS Focus Within works in all major browsers, including Safari 6+ and Internet Explorer 9+ without any additional polyfills.
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.
1focusWithinInit({ 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 :focus-within.
1focusWithinInit({ replaceWith: '.focus-within });This option should be used if it was changed at PostCSS configuration level.
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 focusWithinInit = (await import('postcss-focus-within/browser')).default; 3 focusWithinInit(); 4}, []);
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