style-mod - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

dist/style-mod.d.ts

 export type StyleModule<S = {}> = {[id in keyof S]: string}
 
 export const StyleModule: {
-  new <S extends {[name: string]: Style}>(spec: S, options?: {priority?: 0 | 1 | 2}): StyleModule<{[id in keyof S]: string}>
+  new <S extends {[name: string]: Style}>(spec: S, options?: {generateClasses?: boolean}): StyleModule<{[id in keyof S]: string}>
   mount(root: Document | ShadowRoot | DocumentOrShadowRoot, module: StyleModule | ReadonlyArray<StyleModule>): void
+  newName(): string
 }
@@ -7,0 +8,0 @@

dist/style-mod.js

@@ -10,6 +10,7 @@ function sym(name, random) {
 
-// :: (Object<Style>, number) → StyleModule
-// Instances of this class bind the property names
-// from `spec` to CSS class names that assign the styles in the
-// corresponding property values.
+// :: (Object<Style>, ?{generateClasses: ?boolean}) → StyleModule
+// Instances of this class bind the property names from `spec` to CSS
+// class names that assign the styles in the corresponding property
+// values, unless `generateClasses` is `false`, in which case the
+// property names in the spec are treated as plain CSS selectors.
 //
@@ -24,3 +25,3 @@ // A style module can only be used in a given DOM root after it has
 // create these dynamically, but treat them as one-time allocations.
-var StyleModule = exports.StyleModule = function(spec) {
+var StyleModule = exports.StyleModule = function(spec, options) {
   this[RULES] = []
@@ -30,10 +31,13 @@ top[COUNT] = top[COUNT] || 1
     var style = spec[name], specificity = style.specificity || 0
-    var id = "\u037c" + (top[COUNT]++).toString(36)
-    var selector = "." + id, className = id
-    for (var i = 0; i < specificity; i++) {
-      var name$1 = "\u037c_" + (i ? i.toString(36) : "")
-      selector += "." + name$1
-      className += " " + name$1
+    var id = StyleModule.newName(), selector = name
+    if ((options && options.generateClasses) !== false) {
+      var className = id
+      selector = "." + id
+      for (var i = 0; i < specificity; i++) {
+        var name$1 = "\u037c_" + (i ? i.toString(36) : "")
+        selector += "." + name$1
+        className += " " + name$1
+      }
+      this[name] = className
     }
-    this[name] = className
     renderStyle(selector, spec[name], this[RULES])
@@ -43,2 +47,6 @@ }
 
+// :: () → string
+// Generate a new unique CSS class name.
+StyleModule.newName = function () { return "\u037c" + (top[COUNT]++).toString(36); }
+
 StyleModule.prototype = Object.create(null)
@@ -132,2 +140,9 @@
 //
+// A property called `specificity` has a special meaning: if it holds
+// a number _N_, greater than 0, the selector for the class will have
+// _N_ extra dummy classes added, and those dummy classes will also be
+// present in the class name string created for the style. This allows
+// you to create rules that take precedence over other rules, even
+// when they are defined earlier.
+//
 // A property in a style object can also be a sub-selector, which
@@ -134,0 +149,0 @@ // extends the current context to add a pseudo-selector or a child

package.json

 {
   "name": "style-mod",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "A minimal CSS module shim",
@@ -5,0 +5,0 @@ "main": "dist/style-mod.js",

README.md

@@ -34,6 +34,7 @@ <!-- To edit this file, edit /src/README.md, not /README.md -->
 
- * `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
-   corresponding property values.
+ * `new `**`StyleModule`**`(spec: Object< Style >, options: ?{generateClasses: ?boolean}) → StyleModule`\
+   Instances of this class bind the property names from `spec` to CSS
+   class names that assign the styles in the corresponding property
+   values, unless `generateClasses` is `false`, in which case the
+   property names in the spec are treated as plain CSS selectors.
 
@@ -49,2 +50,5 @@ A style module can only be used in a given DOM root after it has
 
+ * `static `**`newName`**`() → string`\
+   Generate a new unique CSS class name.
+
  * `static `**`mount`**`(root: Document | ShadowRoot, modules: [StyleModule] | StyleModule)`\
@@ -78,2 +82,9 @@ Mount the given set of modules in the given DOM root, which ensures
 
+   A property called `specificity` has a special meaning: if it holds
+   a number _N_, greater than 0, the selector for the class will have
+   _N_ extra dummy classes added, and those dummy classes will also be
+   present in the class name string created for the style. This allows
+   you to create rules that take precedence over other rules, even
+   when they are defined earlier.
+
    A property in a style object can also be a sub-selector, which
@@ -80,0 +91,0 @@ extends the current context to add a pseudo-selector or a child

src/style-mod.d.ts

 export type StyleModule<S = {}> = {[id in keyof S]: string}
 
 export const StyleModule: {
-  new <S extends {[name: string]: Style}>(spec: S, options?: {priority?: 0 | 1 | 2}): StyleModule<{[id in keyof S]: string}>
+  new <S extends {[name: string]: Style}>(spec: S, options?: {generateClasses?: boolean}): StyleModule<{[id in keyof S]: string}>
   mount(root: Document | ShadowRoot | DocumentOrShadowRoot, module: StyleModule | ReadonlyArray<StyleModule>): void
+  newName(): string
 }
@@ -7,0 +8,0 @@

src/style-mod.js

@@ -10,6 +10,7 @@ function sym(name, random) {
 
-// :: (Object<Style>, number) → StyleModule
-// Instances of this class bind the property names
-// from `spec` to CSS class names that assign the styles in the
-// corresponding property values.
+// :: (Object<Style>, ?{generateClasses: ?boolean}) → StyleModule
+// Instances of this class bind the property names from `spec` to CSS
+// class names that assign the styles in the corresponding property
+// values, unless `generateClasses` is `false`, in which case the
+// property names in the spec are treated as plain CSS selectors.
 //
@@ -24,3 +25,3 @@ // A style module can only be used in a given DOM root after it has
 // create these dynamically, but treat them as one-time allocations.
-export function StyleModule(spec) {
+export function StyleModule(spec, options) {
   this[RULES] = []
@@ -30,10 +31,13 @@ top[COUNT] = top[COUNT] || 1
     let style = spec[name], specificity = style.specificity || 0
-    let id = "\u037c" + (top[COUNT]++).toString(36)
-    let selector = "." + id, className = id
-    for (let i = 0; i < specificity; i++) {
-      let name = "\u037c_" + (i ? i.toString(36) : "")
-      selector += "." + name
-      className += " " + name
+    let id = StyleModule.newName(), selector = name
+    if ((options && options.generateClasses) !== false) {
+      let className = id
+      selector = "." + id
+      for (let i = 0; i < specificity; i++) {
+        let name = "\u037c_" + (i ? i.toString(36) : "")
+        selector += "." + name
+        className += " " + name
+      }
+      this[name] = className
     }
-    this[name] = className
     renderStyle(selector, spec[name], this[RULES])
@@ -43,2 +47,6 @@ }
 
+// :: () → string
+// Generate a new unique CSS class name.
+StyleModule.newName = () => "\u037c" + (top[COUNT]++).toString(36)
+
 StyleModule.prototype = Object.create(null)
@@ -134,2 +142,9 @@
 //
+// A property called `specificity` has a special meaning: if it holds
+// a number _N_, greater than 0, the selector for the class will have
+// _N_ extra dummy classes added, and those dummy classes will also be
+// present in the class name string created for the style. This allows
+// you to create rules that take precedence over other rules, even
+// when they are defined earlier.
+//
 // A property in a style object can also be a sub-selector, which
@@ -136,0 +151,0 @@ // extends the current context to add a pseudo-selector or a child

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

22925

increased by10.57%

Lines of code

381

increased by8.55%

Number of lines in readme file

101

increased by12.22%

No dependency changes