postcss-attribute-case-insensitive
Advanced tools
Package description
The postcss-attribute-case-insensitive npm package is a plugin for PostCSS, a tool for transforming CSS with JavaScript. This plugin allows you to write attribute selectors in CSS that are case-insensitive, making your CSS more flexible and easier to maintain. It follows the W3C specification for case-insensitive attribute selectors, enabling developers to target attributes without worrying about the case sensitivity of their values.
Case-insensitive attribute selectors
This feature allows you to select elements based on their attributes in a case-insensitive manner. For example, it enables `[href='example.com' i]` to match both `href='example.com'` and `href='Example.com'`. This is particularly useful when dealing with user-generated content or integrating with systems that are not case-sensitive.
[attr=value i] { /* styles */ }Similar to postcss-attribute-case-insensitive, postcss-selector-not is a PostCSS plugin that polyfills the :not() CSS pseudo-class. While it focuses on negating selectors rather than case-insensitive attribute selection, it similarly enhances CSS by providing more flexible selector options.
This package provides a PostCSS plugin to polyfill the :any-link pseudo-class, which is a convenience for selecting links regardless of their visited state. Like postcss-attribute-case-insensitive, it aims to extend CSS capabilities, though it focuses on link selection rather than attribute case insensitivity.
Readme
PostCSS Attribute Case Insensitive enables support for Case Insensitive Attribute matching in selectors.
[frame=hsides i] {
border-style: solid none;
}
/* becomes */
[frame=hsides],[frame=Hsides],[frame=hSides],[frame=HSides],[frame=hsIdes],[frame=HsIdes],[frame=hSIdes],[frame=HSIdes],[frame=hsiDes],[frame=HsiDes],[frame=hSiDes],[frame=HSiDes],[frame=hsIDes],[frame=HsIDes],[frame=hSIDes],[frame=HSIDes],[frame=hsidEs],[frame=HsidEs],[frame=hSidEs],[frame=HSidEs],[frame=hsIdEs],[frame=HsIdEs],[frame=hSIdEs],[frame=HSIdEs],[frame=hsiDEs],[frame=HsiDEs],[frame=hSiDEs],[frame=HSiDEs],[frame=hsIDEs],[frame=HsIDEs],[frame=hSIDEs],[frame=HSIDEs],[frame=hsideS],[frame=HsideS],[frame=hSideS],[frame=HSideS],[frame=hsIdeS],[frame=HsIdeS],[frame=hSIdeS],[frame=HSIdeS],[frame=hsiDeS],[frame=HsiDeS],[frame=hSiDeS],[frame=HSiDeS],[frame=hsIDeS],[frame=HsIDeS],[frame=hSIDeS],[frame=HSIDeS],[frame=hsidES],[frame=HsidES],[frame=hSidES],[frame=HSidES],[frame=hsIdES],[frame=HsIdES],[frame=hSIdES],[frame=HSIdES],[frame=hsiDES],[frame=HsiDES],[frame=hSiDES],[frame=HSiDES],[frame=hsIDES],[frame=HsIDES],[frame=hSIDES],[frame=HSIDES] {
border-style: solid none;
}
Add PostCSS Attribute Case Insensitive to your project:
npm install postcss postcss-attribute-case-insensitive --save-dev
Use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssAttributeCaseInsensitive = require('postcss-attribute-case-insensitive');
postcss([
postcssAttributeCaseInsensitive(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
PostCSS Attribute Case Insensitive runs in all Node environments, with special instructions for:
| Node | PostCSS CLI | Webpack | Create React App | Gulp | Grunt |
|---|
FAQs
Enable support for case insensitive attribute matching in selectors
The npm package postcss-attribute-case-insensitive receives a total of 4,920,723 weekly downloads. As such, postcss-attribute-case-insensitive popularity was classified as popular.
We found that postcss-attribute-case-insensitive demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 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
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.
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.