
Security News
Browserslist-rs Gets Major Refactor, Cutting Binary Size by Over 1MB
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
postcss-attribute-case-insensitive
Advanced tools
Enable support for case insensitive attribute matching in selectors
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.
npm install postcss-attribute-case-insensitive --save-dev
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 */);
The preserve
option determines whether the original notation
is preserved. By default, it is not preserved.
postcssAttributeCaseInsensitive({ preserve: true })
[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;
}
[frame=hsides i] {
border-style: solid none;
}
FAQs
Enable support for case insensitive attribute matching in selectors
The npm package postcss-attribute-case-insensitive receives a total of 6,113,105 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
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.