
Product
Introducing Tier 1 Reachability: Precision CVE Triage for Enterprise Teams
Socket’s new Tier 1 Reachability filters out up to 80% of irrelevant CVEs, so security teams can focus on the vulnerabilities that matter.
css-scopulation-enterprise-max-ai
Advanced tools
Bring back the CSS scope property with a tiny esm module
A tiny ES module with a ridiculously self-aggrandizing name for emulating the tasty but now unsupported scoped
attribute for scoping embedded stylesheets to a local parent element.
Install CSS Scopulation® Enterprise Max AI™:
npm install --save css-scopulation-enterprise-max-ai
Import and execute scopeSheets.min.js
:
import { scopeSheets } from 'css-scopulation-enterprise-max-ai';
scopeSheets({ revert: true });
The CSS cascade is a thing and it is marvelous. But it is a shame that scoped CSS never took hold because it would have meant you could do this:
<div class="example">
<style scoped>
p {
color: red;
}
</style>
<p>I am well red innit.</p>
</div>
<p>I am not even red, like, at all.</p>
Since scoped
isn’t supported in any browsers (any more) you have to use JavaScript to emulate this. The trouble is, most solutions are environment/library/framework specific, meaning you can’t use them unless you are using, say, React or Vue.
CSS Scopulation® Enterprise Max AI™ (Jesus Christ) is not only framework independent but, by foregoing CSS parsing in favor of simple token/keyword replacement, is ridiculously small (less than half a K). Honestly it’s just the most simple/naive/basic/little (apply whichever quasi-pejorative term you like) script, but it works.
And here’s how. In your page, you write something similar to the code example above:
<div class="example">
<style scoped>
§ p {
color: red;
}
</style>
<p>I am well red innit.</p>
</div>
<p>I am not even red, like, at all.</p>
The only difference from that first example, as you may have noticed, is the §
part which gets replaced in the output. The output looks like this:
<div class="example" data-scoped="0">
<style scoped="">
[data-scoped="0"] p {
color: red;
}
</style>
<p>I am well red innit.</p>
</div>
<p>I am not even red, like, at all.</p>
The §
placeholder can be literally anything you like in the options but it has to be unique or the replacement part of the script will match unwanted parts of the styles and it will all go fucky.
Since lots of people also want that Shadow DOM kind of effect wherein styles are not just prevented from bleeding out but also seeping in, you can also switch reversion on. This just applies all: revert
to the scoping element (class="example"
above) and all its descendants.
<div class="example" data-scoped="0">
<style scoped="">
[data-scoped="0"], [data-scoped="0"] > * {
all: revert
}
[data-scoped="0"] p {
color: red;
}
</style>
<p>I am well red innit.</p>
</div>
<p>I am not even red, like, at all.</p>
Note that this will revert any styles applied directly to the elements in the scope but inheritance is not prevented (which is the same as how Shadow DOM works, see Why is my Web Component inheriting styles).
These are passed to the scopeSheets
function as an object (see Usage).
placeholder
: the keyword/token representing the scoping element that is replaced with the generated attribute selector (String) (default: '§'
)revert
: Whether to revert styles with all: revert
(Boolean) (default: false
)context
: Where the script looks for <style scoped>
(HTMLElement) (default: document
)dataName
: What to call the data attribute (String) (default: 'scoped'
)If you want my advice, avoid running this on the client at all. Scope you styles during static compilation on the server, inside a JSDOM instance or something like that.
FAQs
Bring back the CSS scope property with a tiny esm module
We found that css-scopulation-enterprise-max-ai demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.
Product
Socket’s new Tier 1 Reachability filters out up to 80% of irrelevant CVEs, so security teams can focus on the vulnerabilities that matter.
Research
/Security News
Ongoing npm supply chain attack spreads to DuckDB: multiple packages compromised with the same wallet-drainer malware.
Security News
The MCP Steering Committee has launched the official MCP Registry in preview, a central hub for discovering and publishing MCP servers.