Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
css-has-pseudo
Advanced tools
The css-has-pseudo package is a tool designed to polyfill CSS :has() pseudo-class support in environments where it is not natively available. This package enables developers to use the :has() selector in their CSS, allowing for more complex styling scenarios based on the presence of descendants in the DOM.
Polyfill for :has() pseudo-class
This feature allows developers to use the :has() CSS pseudo-class in environments that do not support it natively. The code sample demonstrates how to import the polyfill and apply a CSS rule using :has() to style an unordered list with a blue border if it contains an 'li' element with the class 'active'.
import 'css-has-pseudo';
// Example CSS using :has()
const style = `
ul:has(> li.active) {
border: 1px solid blue;
}
`;
// Apply styles to document
const styleSheet = document.createElement('style');
styleSheet.innerText = style;
document.head.appendChild(styleSheet);
This package is a PostCSS plugin to polyfill the :any-link pseudo-class. It is similar to css-has-pseudo in that it provides support for newer CSS features in environments that lack them. However, it focuses on the :any-link pseudo-class rather than :has().
npm install css-has-pseudo --save-dev
PostCSS Has Pseudo lets you style elements relative to other elements in CSS, following the Selectors Level 4 specification.
To use this feature you need to do two things :
.title:has(+ p) {
margin-bottom: 1.5rem;
}
/* becomes */
.js-has-pseudo [csstools-has-1a-38-2x-38-30-2t-1m-2w-2p-37-14-17-w-34-15]:not(does-not-exist) {
margin-bottom: 1.5rem;
}
.title:has(+ p) {
margin-bottom: 1.5rem;
}
Add PostCSS Has Pseudo to your project:
npm install postcss css-has-pseudo --save-dev
Use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssHasPseudo = require('css-has-pseudo');
postcss([
postcssHasPseudo(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
The preserve
option determines whether the original notation
is preserved. By default the original rules are preserved.
postcssHasPseudo({ preserve: false })
.title:has(+ p) {
margin-bottom: 1.5rem;
}
/* becomes */
.js-has-pseudo [csstools-has-1a-38-2x-38-30-2t-1m-2w-2p-37-14-17-w-34-15]:not(does-not-exist) {
margin-bottom: 1.5rem;
}
The specificityMatchingName
option allows you to change the selector that is used to adjust specificity.
The default value is does-not-exist
.
If this is an actual class, id or tag name in your code, you will need to set a different option here.
See how :not
is used to modify specificity.
postcssHasPseudo({ specificityMatchingName: 'something-random' })
Before :
.x:has(> #a:hover) {
order: 11;
}
After :
[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-z-2p-1m-2w-33-3a-2t-36-15]:not(#does-not-exist):not(.does-not-exist) {
order: 11;
}
Determining which elements match a :has
selector is relatively slow through a polyfill compared to the native feature.
A very large DOM or many and complex :has
selectors can cause performance issues.
JavaScript frameworks that rewrite the DOM will be particularly affected by this.
Any contributions to speedup matching are welcome.
Please open an issue to discuss proposed changes if you are interested in contributing.
:has
transforms will result in at least one attribute selector with specificity 0, 1, 0
.
If your selector only has tags we won't be able to match the original specificity.
Before :
figure:has(> img)
After :
[csstools-has-2u-2x-2v-39-36-2t-1m-2w-2p-37-14-1q-w-2x-31-2v-15]:not(does-not-exist):not(does-not-exist)
As selectors are encoded, this plugin (or postcss-preset-env
) must be run after any other plugin that transforms selectors.
If other plugins are used, you need to place these in your config before postcss-preset-env
or css-has-pseudo
.
Please let us know if you have issues with plugins that transform selectors. Then we can investigate and maybe fix these.
// initialize cssHasPseudo
import cssHasPseudo from 'css-has-pseudo/browser';
cssHasPseudo(document);
or
<!-- When using a CDN url you will have to manually update the version number -->
<script src="https://unpkg.com/css-has-pseudo@7.0.2/dist/browser-global.js"></script>
<script>cssHasPseudo(document)</script>
[!TIP] Please use a versioned url, like this :
https://unpkg.com/css-has-pseudo@7.0.2/dist/browser-global.js
Without the version, you might unexpectedly get a new major version of the library with breaking changes.
PostCSS Has Pseudo works in all major browsers, including Internet Explorer 11. With a Mutation Observer polyfill, the script will work down to Internet Explorer 9.
The hover
option determines if :hover
pseudo-class should be tracked.
This is disabled by default because it is an expensive operation.
cssHasPseudo(document, { hover: true });
The observedAttributes
option determines which html attributes are observed.
If you do any client side modification of non-standard attributes and use these in combination with :has()
you should add these here.
cssHasPseudo(document, { observedAttributes: ['something-not-standard'] });
The forcePolyfill
option determines if the polyfill is used even when the browser has native support.
This is needed when you set preserve: false
in the PostCSS plugin config.
cssHasPseudo(document, { forcePolyfill: true });
The debug
option determines if errors are emitted to the console in browser.
By default the polyfill will not emit errors or warnings.
cssHasPseudo(document, { debug: true });
Web API's:
:scope
selectors.ECMA Script:
Array.prototype.filter
Array.prototype.forEach
Array.prototype.indexOf
Array.prototype.join
Array.prototype.map
Array.prototype.splice
RegExp.prototype.exec
String.prototype.match
String.prototype.replace
String.prototype.split
[!IMPORTANT] Applies to you if you load CSS from a different domain than the page.
In this case the CSS is treated as untrusted and will not be made available to the JavaScript polyfill. The polyfill will not work without applying the correct configuration for CORS.
Example :
page | css | CORS applies |
---|---|---|
https://example.com/ | https://example.com/style.css | no |
https://example.com/ | https://other.com/style.css | yes |
You might see one of these error messages :
Chrome :
DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
Safari :
SecurityError: Not allowed to access cross-origin stylesheet
Firefox :
DOMException: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet
To resolve CORS errors you need to take two steps :
Access-Control-Allow-Origin: <your-value>
when serving your CSS file.crossorigin="anonymous"
to the <link rel="stylesheet">
tag for your CSS file.In a node server setting the HTTP header might look like this :
// http://localhost:8080 is the domain of your page!
res.setHeader('Access-Control-Allow-Origin', 'https://example.com');
You can also configure a wildcard but please be aware that this might be a security risk. It is better to only set the header for the domain you want to allow and only on the responses you want to allow.
HTML might look like this :
<link rel="stylesheet" href="https://example.com/styles.css" crossorigin="anonymous">
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:
useEffect(async () => {
const cssHasPseudo = (await import('css-has-pseudo/browser')).default;
cssHasPseudo(document);
}, []);
We recommend you load the polyfill as high up on your Next application as possible, such as your pages/_app.ts
file.
The PostCSS Has Pseudo clones rules containing :has()
,
replacing them with an alternative [csstools-has-]
selector.
.title:has(+ p) {
margin-bottom: 1.5rem;
}
/* becomes */
.js-has-pseudo [csstools-has-1a-38-2x-38-30-2t-1m-2w-2p-37-14-17-w-34-15]:not(does-not-exist) {
margin-bottom: 1.5rem;
}
.title:has(+ p) {
margin-bottom: 1.5rem;
}
Next, the browser script adds a [:has]
attribute to
elements otherwise matching :has
natively.
<div class="title" [csstools-has-1a-38-2x-38-30-2t-1m-2w-2p-37-14-17-w-34-15]>
<h1>A title block</h1>
<p>With an extra paragraph</p>
</div>
FAQs
Style elements relative to other elements in CSS
The npm package css-has-pseudo receives a total of 4,371,774 weekly downloads. As such, css-has-pseudo popularity was classified as popular.
We found that css-has-pseudo 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
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.