
Product
Introducing Socket MCP for Claude Desktop
Add secure dependency scanning to Claude Desktop with Socket MCP, a one-click extension that keeps your coding conversations safe from malicious packages.
@plotdb/csscope
Advanced tools
add custom scope to any css. Use browser thus only works in browsers.
install via npm:
npm install --save @plotdb/csscope
then, include csscope.js
, and convert css as follow:
scopedCSS = csscope("desired-scope-name", "your-css-code")
or, with object as option:
scopedCSS = csscope({css: "your css code", name: "desired-scope-name", scopeTest: "..."})
or, create a converter to convert:
scope = new csscope.converter({ scopeTest: '...' });
var scopedCSS = scope.convert({ ... });
options:
.your-scope-name
scopeTest
is a css selector rule for which if certain node matches then it's the root of a scope.
This is used to identify scope boundary in DOM, according how users label and identify the root element of scopes by their implementation.
For example, following DOM ( in Pug ) use [ld-scope]
to separate each scope:
div(ld-scope,scope-id="0a2c92a0e7e82")
h2 This is the root scope.
div(ld-scope,scope-id="4c26846e44f68")
h2 This is a child scope.
when we specify scopeTest
option, we can ensure that the style for h2
element in the parent won't affect h2
element in its child.
scopeTest
is by default undefined
(or by default the value specified in option when calling csscope.converter
constructor), in this case there is no scope boundary so all parent rules penetrate into their children.
To style element of scope root, simply use :scope
pseudo class:
:scope { background: #000; color: #fff}
csscope will replace :scope
with the corresponding scope selector.
use csscope.manager
for managing library version and cache. usage:
csm = new csscope.manager(options)
where options
is an object with following posisble fields:
registry
: a registry object telling manager how to fetch requested resource. can be either
csscope.manager
uses it as a root path to construct a resource URL.{name, version, path}
parameters. return an URL for specific moduleurl({name, version, path})
: return an URL for specified item.fetch({name, version, path})
: return {version, content}
for specified item.
version
: exact version of the returned contentcontent
: content of the requested resource@plotdb/registry
module.Generate js / css files and use csscope.cache
to preload assets.
Load from JS:
csscope.cache({inited: false, code: 'scoped-css-code', scope: 'scope-name'});
Load from CSS:
script csscope.cache({inited: true, scope: 'scope-name'});
style: include bundle.css
Test against all major browsers.
MIT
v4.1.2
FAQs
add scope to any css code
The npm package @plotdb/csscope receives a total of 5 weekly downloads. As such, @plotdb/csscope popularity was classified as not popular.
We found that @plotdb/csscope 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
Add secure dependency scanning to Claude Desktop with Socket MCP, a one-click extension that keeps your coding conversations safe from malicious packages.
Product
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
Application Security
/Security News
Socket CEO Feross Aboukhadijeh and a16z partner Joel de la Garza discuss vibe coding, AI-driven software development, and how the rise of LLMs, despite their risks, still points toward a more secure and innovative future.