style-mod - npm Package Compare versions

Comparing version 4.0.3 to 4.1.0

package.json

 {
   "name": "style-mod",
-  "version": "4.0.3",
+  "version": "4.1.0",
   "description": "A minimal CSS module shim",
@@ -27,2 +27,6 @@ "main": "dist/style-mod.cjs",
   ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/marijnh/style-mod.git"
+  },
   "author": "Marijn Haverbeke <[e-mail]>",
@@ -29,0 +33,0 @@ "license": "MIT",

README.md

@@ -5,5 +5,4 @@ <!-- To edit this file, edit /src/README.md, not /README.md -->
 
-Minimal CSS module shim for generating CSS rules and anonymous class
-names for sets of style declarations and attaching such a set to a
-document or shadow root.
+Minimal CSS module shim for generating CSS rules for sets of style
+-declarations and attaching such a set to a document or shadow root.
 
@@ -15,7 +14,7 @@ Using it would look something like this:
 const myModule = new StyleModule({
-  main: {
+  "#main": {
     fontFamily: "Georgia, 'Nimbus Roman No9 L'",
     margin: "0"
   },
-  callout: {
+  ".callout": {
     color: "red",
@@ -27,3 +26,2 @@ fontWeight: "bold",
 StyleModule.mount(document, myModule)
-document.body.className = myModule.main
 ```
@@ -59,3 +57,3 @@
 
- * `static `**`mount`**`(root: Document | ShadowRoot, modules: [StyleModule] | StyleModule)`\
+ * `static `**`mount`**`(root: Document | ShadowRoot, modules: [StyleModule] | StyleModule, options: ?{nonce: ?string})`\
    Mount the given set of modules in the given DOM root, which ensures
@@ -73,3 +71,6 @@ that the CSS rules defined by the module are available in that
 
+   If a Content Security Policy nonce is provided, it is added to
+   the `<style>` tag generated by the library.
 
+
 Where the `Style` type is defined as:
@@ -76,0 +77,0 @@

src/README.md

@@ -5,5 +5,4 @@ <!-- To edit this file, edit /src/README.md, not /README.md -->
 
-Minimal CSS module shim for generating CSS rules and anonymous class
-names for sets of style declarations and attaching such a set to a
-document or shadow root.
+Minimal CSS module shim for generating CSS rules for sets of style
+-declarations and attaching such a set to a document or shadow root.
 
@@ -15,7 +14,7 @@ Using it would look something like this:
 const myModule = new StyleModule({
-  main: {
+  "#main": {
     fontFamily: "Georgia, 'Nimbus Roman No9 L'",
     margin: "0"
   },
-  callout: {
+  ".callout": {
     color: "red",
@@ -27,3 +26,2 @@ fontWeight: "bold",
 StyleModule.mount(document, myModule)
-document.body.className = myModule.main
 ```
@@ -30,0 +28,0 @@

src/style-mod.d.ts

@@ -6,3 +6,7 @@ export class StyleModule {
   getRules(): string
-  static mount(root: Document | ShadowRoot | DocumentOrShadowRoot, module: StyleModule | ReadonlyArray<StyleModule>): void
+  static mount(
+    root: Document | ShadowRoot | DocumentOrShadowRoot,
+    module: StyleModule | ReadonlyArray<StyleModule>,
+    options?: {nonce?: string}
+  ): void
   static newName(): string
@@ -9,0 +13,0 @@ }

src/style-mod.js

@@ -65,3 +65,3 @@ const C = "\u037c"
 
-  // :: (union<Document, ShadowRoot>, union<[StyleModule], StyleModule>)
+  // :: (union<Document, ShadowRoot>, union<[StyleModule], StyleModule>, ?{nonce: ?string})
   //
@@ -79,4 +79,10 @@ // Mount the given set of modules in the given DOM root, which ensures
   // order will be changed.
-  static mount(root, modules) {
-    (root[SET] || new StyleSet(root)).mount(Array.isArray(modules) ? modules : [modules])
+  //
+  // If a Content Security Policy nonce is provided, it is added to
+  // the `<style>` tag generated by the library.
+  static mount(root, modules, options) {
+    let set = root[SET], nonce = options && options.nonce
+    if (!set) set = new StyleSet(root, nonce)
+    else if (nonce) set.setNonce(nonce)
+    set.mount(Array.isArray(modules) ? modules : [modules])
   }
@@ -88,3 +94,3 @@ }
 class StyleSet {
-  constructor(root) {
+  constructor(root, nonce) {
     let doc = root.ownerDocument || root, win = doc.defaultView
@@ -102,2 +108,3 @@ if (!root.head && root.adoptedStyleSheets && win.CSSStyleSheet) {
       this.styleTag = doc.createElement("style")
+      if (nonce) this.styleTag.setAttribute("nonce", nonce)
       let target = root.head || root
@@ -138,2 +145,7 @@ target.insertBefore(this.styleTag, target.firstChild)
   }
+
+  setNonce(nonce) {
+    if (this.styleTag && this.styleTag.getAttribute("nonce") != nonce)
+      this.styleTag.setAttribute("nonce", nonce)
+  }
 }
@@ -140,0 +152,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

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

23525

increased by3.3%

Lines of code

417

increased by6.65%

Number of lines in readme file

99

increased by1.02%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of package files

8

decreased by-11.11%

No dependency changes