style-mod - npm Package Compare versions

Comparing version 3.2.2 to 4.0.0

package.json

 {
   "name": "style-mod",
-  "version": "3.2.2",
+  "version": "4.0.0",
   "description": "A minimal CSS module shim",
@@ -5,0 +5,0 @@ "main": "dist/style-mod.cjs",

README.md

@@ -44,11 +44,7 @@ <!-- To edit this file, edit /src/README.md, not /README.md -->
 
- * `new `**`StyleModule`**`(spec: Object< Style >, options: ?{process: fn(string) → string, extend: fn(string, string) → string})`\
+ * `new `**`StyleModule`**`(spec: Object< Style >, options: ?{finish: ?fn(string) → string})`\
    Create a style module from the given spec.
 
-   When `process` is given, it is called on regular (non-`@`)
-   selector properties to provide the actual selector. When `extend`
-   is given, it is called when a property containing an `&` is
-   found, and should somehow combine the `&`-template (its first
-   argument) with the selector (its second argument) to produce an
-   extended selector.
+   When `finish` is given, it is called on regular (non-`@`)
+   selectors (after `&` expansion) to compute the final selector.
 
@@ -55,0 +51,0 @@ * **`getRules`**`() → string`\

src/style-mod.d.ts

 export class StyleModule {
-  constructor(spec: {[selector: string]: StyleSpec},
-              options?: {process(sel: string): string, extend(template: string, sel: string): string})
+  constructor(spec: {[selector: string]: StyleSpec}, options?: {
+    finish?(sel: string): string
+  })
   getRules(): string
@@ -5,0 +6,0 @@ static mount(root: Document | ShadowRoot | DocumentOrShadowRoot, module: StyleModule | ReadonlyArray<StyleModule>): void

src/style-mod.js

@@ -16,23 +16,17 @@ const C = "\u037c"
 export class StyleModule {
-  // :: (Object<Style>, ?{process: (string) → string, extend: (string, string) → string})
+  // :: (Object<Style>, ?{finish: ?(string) → string})
   // Create a style module from the given spec.
   //
-  // When `process` is given, it is called on regular (non-`@`)
-  // selector properties to provide the actual selector. When `extend`
-  // is given, it is called when a property containing an `&` is
-  // found, and should somehow combine the `&`-template (its first
-  // argument) with the selector (its second argument) to produce an
-  // extended selector.
+  // When `finish` is given, it is called on regular (non-`@`)
+  // selectors (after `&` expansion) to compute the final selector.
   constructor(spec, options) {
     this.rules = []
-    let {process, extend} = options || {}
+    let {finish} = options || {}
 
-    function processSelector(selector) {
-      if (/^@/.test(selector)) return [selector]
-      let selectors = selector.split(",")
-      return process ? selectors.map(process) : selectors
+    function splitSelector(selector) {
+      return /^@/.test(selector) ? [selector] : selector.split(/,\s*/)
     }
 
-    function render(selectors, spec, target) {
-      let local = [], isAt = /^@(\w+)\b/.exec(selectors[0])
+    function render(selectors, spec, target, isKeyframes) {
+      let local = [], isAt = /^@(\w+)\b/.exec(selectors[0]), keyframes = isAt && isAt[1] == "keyframes"
       if (isAt && spec == null) return target.push(selectors[0] + ";")
@@ -42,6 +36,7 @@ for (let prop in spec) {
         if (/&/.test(prop)) {
-          render(selectors.map(s => extend ? extend(prop, s) : prop.replace(/&/g, s)), value, target)
+          render(prop.split(/,\s*/).map(part => selectors.map(sel => part.replace(/&/, sel))).reduce((a, b) => a.concat(b)),
+                 value, target)
         } else if (value && typeof value == "object") {
           if (!isAt) throw new RangeError("The value of a property (" + prop + ") should be a primitive value.")
-          render(isAt[1] == "keyframes" ? [prop] : processSelector(prop), value, local)
+          render(splitSelector(prop), value, local, keyframes)
         } else if (value != null) {
@@ -51,6 +46,9 @@ local.push(prop.replace(/_.*/, "").replace(/[A-Z]/g, l => "-" + l.toLowerCase()) + ": " + value + ";")
       }
-      if (local.length || isAt && isAt[1] == "keyframes") target.push(selectors.join(",") + " {" + local.join(" ") + "}")
+      if (local.length || keyframes) {
+        target.push((finish && !isAt && !isKeyframes ? selectors.map(finish) : selectors).join(", ") +
+                    " {" + local.join(" ") + "}")
+      }
     }
 
-    for (let prop in spec) render(processSelector(prop), spec[prop], this.rules)
+    for (let prop in spec) render(splitSelector(prop), spec[prop], this.rules)
   }
@@ -57,0 +55,0 @@

test/test-style-mod.js

@@ -62,2 +62,11 @@ import {StyleModule} from "style-mod"
 
+  it("doesn't mangle keyframe names", () => {
+    ist(rules(new StyleModule({
+      "@keyframes foo": {
+        "0%": {color: "blue"},
+        "50%": {color: "red"}
+      }
+    }, {finish: s => ".foo " + s})), ["@keyframes foo {0% {color: blue;} 50% {color: red;}}"], eqRules)
+  })
+
   it("can render multiple instances of a property", () => {
@@ -87,3 +96,3 @@ ist(rules(new StyleModule({
     }, {
-      process: x => x.replace(/a/g, "u")
+      finish: x => x.replace(/a/g, "u")
     })), ["ubc, cbu {color: yellow;}", "@media stuff {ubc {font-weight: bold;}}"], eqRules)
@@ -90,0 +99,0 @@ })

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

Lines of code

387

increased by1.84%

Worsened metrics

Total package byte prevSize

22590

decreased by-0.85%

Number of lines in readme file

98

decreased by-3.92%

No dependency changes