Socket
Socket
Sign inDemoInstall

style-mod

Package Overview
Dependencies
Maintainers
1
Versions
25
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

style-mod - npm Package Compare versions

Comparing version 1.0.2 to 2.0.0

2

dist/style-mod.d.ts

@@ -5,3 +5,3 @@ export type StyleModule<S = {}> = {[id in keyof S]: string}

new <S extends {[name: string]: Style}>(spec: S, options?: {priority?: 0 | 1 | 2}): StyleModule<{[id in keyof S]: string}>
mount(root: Document | ShadowRoot | DocumentOrShadowRoot, module: StyleModule): void
mount(root: Document | ShadowRoot | DocumentOrShadowRoot, module: StyleModule | ReadonlyArray<StyleModule>): void
}

@@ -8,0 +8,0 @@

90

dist/style-mod.js

@@ -7,7 +7,7 @@ function sym(name, random) {

var COUNT = sym("\u037c"), SET = sym("styleSet", 1), DATA = sym("data", 1)
var COUNT = sym("\u037c"), SET = sym("styleSet", 1), RULES = sym("rules", 1)
var top = typeof global == "undefined" ? window : global
// :: (Object<Style>, number, ?{priority: ?number}) → Object<string>
// names for them. Instances of this class bind the property names
// :: (Object<Style>, number) → StyleModule
// Instances of this class bind the property names
// from `spec` to CSS class names that assign the styles in the

@@ -19,9 +19,2 @@ // corresponding property values.

//
// By default, rules are defined in the order in which they are
// mounted, making those mounted later take precedence in case of an
// otherwise equal selector precedence. You can pass 0 for low
// priority or 2 for high priority as second argument to explicitly
// move the rules above or below rules with default priority. Within a
// priority level, rules remain defined in mount order.
//
// Style modules should be created once and stored somewhere, as

@@ -32,30 +25,30 @@ // opposed to re-creating them every time you need them. The amount of

// create these dynamically, but treat them as one-time allocations.
var StyleModule = exports.StyleModule = function(spec, options) {
var priority = options && options.priority
if (priority == null) { priority = 1 }
if (priority < 0 || priority > 2 || +priority != priority) { throw new RangeError("Invalid priority: " + priority) }
this[DATA] = {rules: [], mounted: [], priority: priority}
var StyleModule = exports.StyleModule = function(spec) {
this[RULES] = []
top[COUNT] = top[COUNT] || 1
for (var name in spec) {
var className = this[name] = "\u037c" + (top[COUNT]++).toString(36)
renderStyle("." + className, spec[name], this[DATA].rules)
renderStyle("." + className, spec[name], this[RULES])
}
}
// :: (union<Document, ShadowRoot>, Object<string>)
StyleModule.prototype = Object.create(null)
// :: (union<Document, ShadowRoot>, union<[StyleModule], StyleModule>)
//
// Mount the given module in the given DOM root, which ensures that
// the CSS rules defined by the module are available in that context.
// Mount the given set of modules in the given DOM root, which ensures
// that the CSS rules defined by the module are available in that
// context.
//
// This function can be called multiple times with the same arguments
// cheaply—rules are only added to the document once per root.
StyleModule.mount = function(root, module) {
var data = module[DATA]
if (data.mounted.indexOf(root) > -1) { return
; }(root[SET] || new StyleSet(root)).mount(data.rules, data.priority)
data.mounted.push(root)
// Rules are only added to the document once per root.
//
// Rule order will follow the order of the modules, so that rules from
// modules later in the array take precedence of those from earlier
// modules. If you call this function multiple times for the same root
// in a way that changes the order of already mounted modules, the old
// order will be changed.
StyleModule.mount = function(root, modules) {
(root[SET] || new StyleSet(root)).mount(Array.isArray(modules) ? modules : [modules])
}
StyleModule.prototype = Object.create(null)
var StyleSet = function StyleSet(root) {

@@ -67,20 +60,33 @@ this.root = root

target.insertBefore(this.styleTag, target.firstChild)
this.insertPos = [0, 0, 0]
this.rules = []
this.modules = []
};
StyleSet.prototype.mount = function mount (rules, priority) {
var ref;
StyleSet.prototype.mount = function mount (modules) {
var sheet = this.styleTag.sheet, reset = !sheet
var pos = 0 /* Current rule offset */, j = 0 /* Index into this.modules */
for (var i = 0; i < modules.length; i++) {
var mod = modules[i], index = this.modules.indexOf(mod)
if (index < j && index > -1) { // Ordering conflict
this.modules.splice(index, 1)
j--
index = -1
reordered = true
}
if (index == -1) {
this.modules.splice(j++, 0, mod)
if (!reset) { for (var k = 0; k < mod[RULES].length; k++)
{ sheet.insertRule(mod[RULES][k], pos++) } }
} else {
while (j < index) { pos += this.modules[j++][RULES].length }
pos += mod[RULES].length
j++
}
}
var pos = this.insertPos[priority]
;(ref = this.rules).splice.apply(ref, [ pos, 0 ].concat( rules ))
var sheet = this.styleTag.sheet
if (sheet) {
for (var i = 0; i < rules.length; i++)
{ sheet.insertRule(rules[i], pos++) }
} else {
this.styleTag.textContent = this.rules.join("\n")
if (reset) {
var text = ""
for (var i$1 = 0; i$1 < this.modules.length; i$1++)
{ text += this.modules[i$1][RULES].join("\n") + "\n" }
this.styleTag.textContent = text
}
for (var i$1 = priority; i$1 < this.insertPos.length; i$1++)
{ this.insertPos[i$1] += rules.length }
};

@@ -87,0 +93,0 @@

2

package.json
{
"name": "style-mod",
"version": "1.0.2",
"version": "2.0.0",
"description": "A minimal CSS module shim",

@@ -5,0 +5,0 @@ "main": "dist/style-mod.js",

31

README.md

@@ -5,3 +5,3 @@ <!-- To edit this file, edit /src/README.md, not /README.md -->

Minimal CSS module shim for generating CSS rules and anonymouse class
Minimal CSS module shim for generating CSS rules and anonymous class
names for sets of style declarations and attaching such a set to a

@@ -22,3 +22,3 @@ document or shadow root.

fontWeight: "bold",
":hover": {color: "orange"}
"&:hover": {color: "orange"}
}

@@ -36,4 +36,4 @@ })

* `new `**`StyleModule`**`(spec: Object< Style >, options: number, ?{priority: ?number}) → Object< string >`\
names for them. Instances of this class bind the property names
* `new `**`StyleModule`**`(spec: Object< Style >, number) → StyleModule`\
Instances of this class bind the property names
from `spec` to CSS class names that assign the styles in the

@@ -45,9 +45,2 @@ corresponding property values.

By default, rules are defined in the order in which they are
mounted, making those mounted later take precedence in case of an
otherwise equal selector precedence. You can pass 0 for low
priority or 2 for high priority as second argument to explicitly
move the rules above or below rules with default priority. Within a
priority level, rules remain defined in mount order.
Style modules should be created once and stored somewhere, as

@@ -59,10 +52,16 @@ opposed to re-creating them every time you need them. The amount of

* `static `**`mount`**`(root: Document | ShadowRoot, module: Object< string >)`\
Mount the given module in the given DOM root, which ensures that
the CSS rules defined by the module are available in that context.
* `static `**`mount`**`(root: Document | ShadowRoot, modules: [StyleModule] | StyleModule)`\
Mount the given set of modules in the given DOM root, which ensures
that the CSS rules defined by the module are available in that
context.
This function can be called multiple times with the same arguments
cheaply—rules are only added to the document once per root.
Rules are only added to the document once per root.
Rule order will follow the order of the modules, so that rules from
modules later in the array take precedence of those from earlier
modules. If you call this function multiple times for the same root
in a way that changes the order of already mounted modules, the old
order will be changed.
Where the `Style` type is defined as:

@@ -69,0 +68,0 @@

4

src/README.md

@@ -5,3 +5,3 @@ <!-- To edit this file, edit /src/README.md, not /README.md -->

Minimal CSS module shim for generating CSS rules and anonymouse class
Minimal CSS module shim for generating CSS rules and anonymous class
names for sets of style declarations and attaching such a set to a

@@ -22,3 +22,3 @@ document or shadow root.

fontWeight: "bold",
":hover": {color: "orange"}
"&:hover": {color: "orange"}
}

@@ -25,0 +25,0 @@ })

2

src/style-mod.d.ts

@@ -5,3 +5,3 @@ export type StyleModule<S = {}> = {[id in keyof S]: string}

new <S extends {[name: string]: Style}>(spec: S, options?: {priority?: 0 | 1 | 2}): StyleModule<{[id in keyof S]: string}>
mount(root: Document | ShadowRoot | DocumentOrShadowRoot, module: StyleModule): void
mount(root: Document | ShadowRoot | DocumentOrShadowRoot, module: StyleModule | ReadonlyArray<StyleModule>): void
}

@@ -8,0 +8,0 @@

90

src/style-mod.js

@@ -7,7 +7,7 @@ function sym(name, random) {

const COUNT = sym("\u037c"), SET = sym("styleSet", 1), DATA = sym("data", 1)
const COUNT = sym("\u037c"), SET = sym("styleSet", 1), RULES = sym("rules", 1)
const top = typeof global == "undefined" ? window : global
// :: (Object<Style>, number, ?{priority: ?number}) → Object<string>
// names for them. Instances of this class bind the property names
// :: (Object<Style>, number) → StyleModule
// Instances of this class bind the property names
// from `spec` to CSS class names that assign the styles in the

@@ -19,9 +19,2 @@ // corresponding property values.

//
// By default, rules are defined in the order in which they are
// mounted, making those mounted later take precedence in case of an
// otherwise equal selector precedence. You can pass 0 for low
// priority or 2 for high priority as second argument to explicitly
// move the rules above or below rules with default priority. Within a
// priority level, rules remain defined in mount order.
//
// Style modules should be created once and stored somewhere, as

@@ -32,30 +25,30 @@ // opposed to re-creating them every time you need them. The amount of

// create these dynamically, but treat them as one-time allocations.
export function StyleModule(spec, options) {
let priority = options && options.priority
if (priority == null) priority = 1
if (priority < 0 || priority > 2 || +priority != priority) throw new RangeError("Invalid priority: " + priority)
this[DATA] = {rules: [], mounted: [], priority}
export function StyleModule(spec) {
this[RULES] = []
top[COUNT] = top[COUNT] || 1
for (let name in spec) {
let className = this[name] = "\u037c" + (top[COUNT]++).toString(36)
renderStyle("." + className, spec[name], this[DATA].rules)
renderStyle("." + className, spec[name], this[RULES])
}
}
// :: (union<Document, ShadowRoot>, Object<string>)
StyleModule.prototype = Object.create(null)
// :: (union<Document, ShadowRoot>, union<[StyleModule], StyleModule>)
//
// Mount the given module in the given DOM root, which ensures that
// the CSS rules defined by the module are available in that context.
// Mount the given set of modules in the given DOM root, which ensures
// that the CSS rules defined by the module are available in that
// context.
//
// This function can be called multiple times with the same arguments
// cheaply—rules are only added to the document once per root.
StyleModule.mount = function(root, module) {
let data = module[DATA]
if (data.mounted.indexOf(root) > -1) return
;(root[SET] || new StyleSet(root)).mount(data.rules, data.priority)
data.mounted.push(root)
// Rules are only added to the document once per root.
//
// Rule order will follow the order of the modules, so that rules from
// modules later in the array take precedence of those from earlier
// modules. If you call this function multiple times for the same root
// in a way that changes the order of already mounted modules, the old
// order will be changed.
StyleModule.mount = function(root, modules) {
(root[SET] || new StyleSet(root)).mount(Array.isArray(modules) ? modules : [modules])
}
StyleModule.prototype = Object.create(null)
class StyleSet {

@@ -68,18 +61,33 @@ constructor(root) {

target.insertBefore(this.styleTag, target.firstChild)
this.insertPos = [0, 0, 0]
this.rules = []
this.modules = []
}
mount(rules, priority) {
let pos = this.insertPos[priority]
;this.rules.splice(pos, 0, ...rules)
let sheet = this.styleTag.sheet
if (sheet) {
for (let i = 0; i < rules.length; i++)
sheet.insertRule(rules[i], pos++)
} else {
this.styleTag.textContent = this.rules.join("\n")
mount(modules) {
let sheet = this.styleTag.sheet, reset = !sheet
let pos = 0 /* Current rule offset */, j = 0 /* Index into this.modules */
for (let i = 0; i < modules.length; i++) {
let mod = modules[i], index = this.modules.indexOf(mod)
if (index < j && index > -1) { // Ordering conflict
this.modules.splice(index, 1)
j--
index = -1
reordered = true
}
if (index == -1) {
this.modules.splice(j++, 0, mod)
if (!reset) for (let k = 0; k < mod[RULES].length; k++)
sheet.insertRule(mod[RULES][k], pos++)
} else {
while (j < index) pos += this.modules[j++][RULES].length
pos += mod[RULES].length
j++
}
}
for (let i = priority; i < this.insertPos.length; i++)
this.insertPos[i] += rules.length
if (reset) {
let text = ""
for (let i = 0; i < this.modules.length; i++)
text += this.modules[i][RULES].join("\n") + "\n"
this.styleTag.textContent = text
}
}

@@ -86,0 +94,0 @@ }

4

test/test-style-mod.js

@@ -54,4 +54,4 @@ const {StyleModule} = require("..")

function rules(module) {
for (let p in module) if (typeof module[p] != "string") return module[p].rules
for (let p of Object.getOwnPropertySymbols(module)) return module[p].rules
for (let p in module) if (Array.isArray(module[p])) return module[p]
for (let p of Object.getOwnPropertySymbols(module)) if (Array.isArray(module[p])) return module[p]
}

@@ -58,0 +58,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc