Security News
How Threat Actors are Abusing GitHub’s File Upload Feature to Host Malware
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
postcss-focus-within
Advanced tools
Readme
PostCSS Focus Within lets you use the :focus-within
pseudo-class in CSS,
following the Selectors Level 4 specification.
.my-form-field:focus-within label {
background-color: yellow;
}
/* becomes */
.my-form-field[focus-within].js-focus-within label, .js-focus-within .my-form-field[focus-within] label {
background-color: yellow;
}
.my-form-field:focus-within label {
background-color: yellow;
}
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.
Add PostCSS Focus Within to your project:
npm install postcss postcss-focus-within --save-dev
Use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssFocusWithin = require('postcss-focus-within');
postcss([
postcssFocusWithin(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
PostCSS Focus Within runs in all Node environments, with special instructions for:
Node | PostCSS CLI | Webpack | Create React App | Gulp | Grunt |
---|
The preserve
option determines whether the original notation
is preserved. By default, it is preserved.
postcssFocusWithin({ preserve: false })
.my-form-field:focus-within label {
background-color: yellow;
}
/* becomes */
.my-form-field[focus-within].js-focus-within label, .js-focus-within .my-form-field[focus-within] label {
background-color: yellow;
}
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.
postcssFocusWithin({ replaceWith: '.focus-within' });
.my-form-field:focus-within label {
background-color: yellow;
}
/* becomes */
.my-form-field.focus-within.js-focus-within label, .js-focus-within .my-form-field.focus-within label {
background-color: yellow;
}
.my-form-field:focus-within label {
background-color: yellow;
}
Note that changing this option implies that it needs to be passed to the browser polyfill as well.
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.
postcssFocusWithin({ disablePolyfillReadyClass: true })
.my-form-field:focus-within label {
background-color: yellow;
}
/* becomes */
.my-form-field[focus-within] label, .my-form-field[focus-within] label {
background-color: yellow;
}
.my-form-field:focus-within label {
background-color: yellow;
}
import focusWithinInit from 'postcss-focus-within/browser';
focusWithinInit();
or
<!-- When using a CDN url you will have to manually update the version number -->
<script src="https://unpkg.com/postcss-focus-within@6.1.1/dist/browser-global.js"></script>
<script>focusWithinInit()</script>
PostCSS Focus Within works in all major browsers, including Safari 6+ and Internet Explorer 9+ without any additional polyfills.
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.
focusWithinInit({ force: true });
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
.
focusWithinInit({ replaceWith: '.focus-within });
This option should be used if it was changed at PostCSS configuration level.
FAQs
Use the :focus-within pseudo-selector in CSS
The npm package postcss-focus-within receives a total of 4,814,609 weekly downloads. As such, postcss-focus-within popularity was classified as popular.
We found that postcss-focus-within demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.