Premier commit déjà bien avancé

frontend/node_modules/style-mod/LICENSE

@@ -0,0 +1,19 @@
+Copyright (C) 2018 by Marijn Haverbeke <marijn@haverbeke.berlin> and others
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

frontend/node_modules/style-mod/README.md

@@ -0,0 +1,98 @@
+<!-- To edit this file, edit /src/README.md, not /README.md -->
+
+# style-mod
+
+Minimal CSS module shim for generating CSS rules for sets of style
+-declarations and attaching such a set to a document or shadow root.
+
+Using it would look something like this:
+
+```javascript
+const {StyleModule} = require("style-mod")
+const myModule = new StyleModule({
+  "#main": {
+    fontFamily: "Georgia, 'Nimbus Roman No9 L'",
+    margin: "0"
+  },
+  ".callout": {
+    color: "red",
+    fontWeight: "bold",
+    "&:hover": {color: "orange"}
+  }
+})
+StyleModule.mount(document, myModule)
+```
+
+This code is open source, released under an MIT license.
+    
+## Documentation
+
+### class StyleModule
+
+Style modules encapsulate a set of CSS rules defined from
+JavaScript. Their definitions are only available in a given DOM
+root after it has been _mounted_ there with `StyleModule.mount`.
+
+Style modules should be created once and stored somewhere, as
+opposed to re-creating them every time you need them. The amount of
+CSS rules generated for a given DOM root is bounded by the amount
+of style modules that were used. So to avoid leaking rules, don't
+create these dynamically, but treat them as one-time allocations.
+
+ * `new `**`StyleModule`**`(spec: Object< Style >, options: ?{finish: ?fn(string) → string})`\
+   Create a style module from the given spec.
+
+   When `finish` is given, it is called on regular (non-`@`)
+   selectors (after `&` expansion) to compute the final selector.
+
+ * **`getRules`**`() → string`\
+   Returns a string containing the module's CSS rules.
+
+ * `static `**`newName`**`() → string`\
+   Generate a new unique CSS class name.
+
+ * `static `**`mount`**`(root: Document | ShadowRoot, modules: [StyleModule] | StyleModule, options: ?{nonce: ?string})`\
+   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.
+
+   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.
+
+   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:
+
+ * **`Style`**`: Object< Style | string >`\
+   A style is an object that, in the simple case, maps CSS property
+   names to strings holding their values, as in `{color: "red",
+   fontWeight: "bold"}`. The property names can be given in
+   camel-case—the library will insert a dash before capital letters
+   when converting them to CSS.
+
+   If you include an underscore in a property name, it and everything
+   after it will be removed from the output, which can be useful when
+   providing a property multiple times, for browser compatibility
+   reasons.
+
+   A property in a style object can also be a sub-selector, which
+   extends the current context to add a pseudo-selector or a child
+   selector. Such a property should contain a `&` character, which
+   will be replaced by the current selector. For example `{"&:before":
+   {content: '"hi"'}}`. Sub-selectors and regular properties can
+   freely be mixed in a given object. Any property containing a `&` is
+   assumed to be a sub-selector.
+
+   Finally, a property can specify an @-block to be wrapped around the
+   styles defined inside the object that's the property's value. For
+   example to create a media query you can do `{"@media screen and
+   (min-width: 400px)": {...}}`.
+
+

frontend/node_modules/style-mod/dist/style-mod.cjs

@@ -0,0 +1,165 @@
+var C = "\u037c"
+var COUNT = typeof Symbol == "undefined" ? "__" + C : Symbol.for(C)
+var SET = typeof Symbol == "undefined" ? "__styleSet" + Math.floor(Math.random() * 1e8) : Symbol("styleSet")
+var top = typeof globalThis != "undefined" ? globalThis : typeof window != "undefined" ? window : {}
+
+// :: - Style modules encapsulate a set of CSS rules defined from
+// JavaScript. Their definitions are only available in a given DOM
+// root after it has been _mounted_ there with `StyleModule.mount`.
+//
+// Style modules should be created once and stored somewhere, as
+// opposed to re-creating them every time you need them. The amount of
+// CSS rules generated for a given DOM root is bounded by the amount
+// of style modules that were used. So to avoid leaking rules, don't
+// create these dynamically, but treat them as one-time allocations.
+var StyleModule = exports.StyleModule = function StyleModule(spec, options) {
+  this.rules = []
+  var ref = options || {};
+  var finish = ref.finish;
+
+  function splitSelector(selector) {
+    return /^@/.test(selector) ? [selector] : selector.split(/,\s*/)
+  }
+
+  function render(selectors, spec, target, isKeyframes) {
+    var local = [], isAt = /^@(\w+)\b/.exec(selectors[0]), keyframes = isAt && isAt[1] == "keyframes"
+    if (isAt && spec == null) { return target.push(selectors[0] + ";") }
+    for (var prop in spec) {
+      var value = spec[prop]
+      if (/&/.test(prop)) {
+        render(prop.split(/,\s*/).map(function (part) { return selectors.map(function (sel) { return part.replace(/&/, sel); }); }).reduce(function (a, b) { return 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(splitSelector(prop), value, local, keyframes)
+      } else if (value != null) {
+        local.push(prop.replace(/_.*/, "").replace(/[A-Z]/g, function (l) { return "-" + l.toLowerCase(); }) + ": " + value + ";")
+      }
+    }
+    if (local.length || keyframes) {
+      target.push((finish && !isAt && !isKeyframes ? selectors.map(finish) : selectors).join(", ") +
+                  " {" + local.join(" ") + "}")
+    }
+  }
+
+  for (var prop in spec) { render(splitSelector(prop), spec[prop], this.rules) }
+};
+
+// :: () → string
+// Returns a string containing the module's CSS rules.
+StyleModule.prototype.getRules = function getRules () { return this.rules.join("\n") };
+
+// :: () → string
+// Generate a new unique CSS class name.
+StyleModule.newName = function newName () {
+  var id = top[COUNT] || 1
+  top[COUNT] = id + 1
+  return C + id.toString(36)
+};
+
+// :: (union<Document, ShadowRoot>, union<[StyleModule], StyleModule>, ?{nonce: ?string})
+//
+// 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.
+//
+// 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.
+//
+// If a Content Security Policy nonce is provided, it is added to
+// the `<style>` tag generated by the library.
+StyleModule.mount = function mount (root, modules, options) {
+  var 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], root)
+};
+
+var adoptedSet = new Map //<Document, StyleSet>
+
+var StyleSet = function StyleSet(root, nonce) {
+  var doc = root.ownerDocument || root, win = doc.defaultView
+  if (!root.head && root.adoptedStyleSheets && win.CSSStyleSheet) {
+    var adopted = adoptedSet.get(doc)
+    if (adopted) { return root[SET] = adopted }
+    this.sheet = new win.CSSStyleSheet
+    adoptedSet.set(doc, this)
+  } else {
+    this.styleTag = doc.createElement("style")
+    if (nonce) { this.styleTag.setAttribute("nonce", nonce) }
+  }
+  this.modules = []
+  root[SET] = this
+};
+
+StyleSet.prototype.mount = function mount (modules, root) {
+  var sheet = this.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
+    }
+    if (index == -1) {
+      this.modules.splice(j++, 0, mod)
+      if (sheet) { 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++
+    }
+  }
+
+  if (sheet) {
+    if (root.adoptedStyleSheets.indexOf(this.sheet) < 0)
+      { root.adoptedStyleSheets = [this.sheet ].concat( root.adoptedStyleSheets) }
+  } else {
+    var text = ""
+    for (var i$1 = 0; i$1 < this.modules.length; i$1++)
+      { text += this.modules[i$1].getRules() + "\n" }
+    this.styleTag.textContent = text
+    var target = root.head || root
+    if (this.styleTag.parentNode != target)
+      { target.insertBefore(this.styleTag, target.firstChild) }
+  }
+};
+
+StyleSet.prototype.setNonce = function setNonce (nonce) {
+  if (this.styleTag && this.styleTag.getAttribute("nonce") != nonce)
+    { this.styleTag.setAttribute("nonce", nonce) }
+};
+
+// Style::Object<union<Style,string>>
+//
+// A style is an object that, in the simple case, maps CSS property
+// names to strings holding their values, as in `{color: "red",
+// fontWeight: "bold"}`. The property names can be given in
+// camel-case—the library will insert a dash before capital letters
+// when converting them to CSS.
+//
+// If you include an underscore in a property name, it and everything
+// after it will be removed from the output, which can be useful when
+// providing a property multiple times, for browser compatibility
+// reasons.
+//
+// A property in a style object can also be a sub-selector, which
+// extends the current context to add a pseudo-selector or a child
+// selector. Such a property should contain a `&` character, which
+// will be replaced by the current selector. For example `{"&:before":
+// {content: '"hi"'}}`. Sub-selectors and regular properties can
+// freely be mixed in a given object. Any property containing a `&` is
+// assumed to be a sub-selector.
+//
+// Finally, a property can specify an @-block to be wrapped around the
+// styles defined inside the object that's the property's value. For
+// example to create a media query you can do `{"@media screen and
+// (min-width: 400px)": {...}}`.
+

frontend/node_modules/style-mod/dist/style-mod.d.cts

@@ -0,0 +1,16 @@
+export class StyleModule {
+  constructor(spec: {[selector: string]: StyleSpec}, options?: {
+    finish?(sel: string): string
+  })
+  getRules(): string
+  static mount(
+    root: Document | ShadowRoot | DocumentOrShadowRoot,
+    module: StyleModule | ReadonlyArray<StyleModule>,
+    options?: {nonce?: string}
+  ): void
+  static newName(): string
+}
+
+export type StyleSpec = {
+  [propOrSelector: string]: string | number | StyleSpec | null
+}

frontend/node_modules/style-mod/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "style-mod",
+  "version": "4.1.3",
+  "description": "A minimal CSS module shim",
+  "main": "dist/style-mod.cjs",
+  "type": "module",
+  "exports": {
+    "import": "./src/style-mod.js",
+    "require": "./dist/style-mod.cjs"
+  },
+  "module": "src/style-mod.js",
+  "types": "src/style-mod.d.ts",
+  "directories": {
+    "test": "test"
+  },
+  "scripts": {
+    "test": "npm run build && mocha test/test-*.js",
+    "build": "mkdir -p dist; buble --no modules src/style-mod.js | sed -e 's/export var StyleModule/var StyleModule = exports.StyleModule/' > dist/style-mod.cjs; cp src/style-mod.d.ts dist/style-mod.d.cts",
+    "prepare": "npm run build && npm run build-readme",
+    "build-readme": "builddocs --name style-mod --main src/README.md --format markdown src/*.js > README.md"
+  },
+  "keywords": [
+    "css",
+    "module",
+    "styling"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/marijnh/style-mod.git"
+  },
+  "author": "Marijn Haverbeke <marijn@haverbeke.berlin>",
+  "license": "MIT",
+  "devDependencies": {
+    "buble": "^0.20.0",
+    "builddocs": "^0.3.2",
+    "ist": "^1.1.1",
+    "mocha": "^7.2.0"
+  }
+}

frontend/node_modules/style-mod/src/README.md

@@ -0,0 +1,34 @@
+<!-- To edit this file, edit /src/README.md, not /README.md -->
+
+# style-mod
+
+Minimal CSS module shim for generating CSS rules for sets of style
+-declarations and attaching such a set to a document or shadow root.
+
+Using it would look something like this:
+
+```javascript
+const {StyleModule} = require("style-mod")
+const myModule = new StyleModule({
+  "#main": {
+    fontFamily: "Georgia, 'Nimbus Roman No9 L'",
+    margin: "0"
+  },
+  ".callout": {
+    color: "red",
+    fontWeight: "bold",
+    "&:hover": {color: "orange"}
+  }
+})
+StyleModule.mount(document, myModule)
+```
+
+This code is open source, released under an MIT license.
+    
+## Documentation
+
+@StyleModule
+
+Where the `Style` type is defined as:
+
+@Style

frontend/node_modules/style-mod/src/style-mod.d.ts

@@ -0,0 +1,16 @@
+export class StyleModule {
+  constructor(spec: {[selector: string]: StyleSpec}, options?: {
+    finish?(sel: string): string
+  })
+  getRules(): string
+  static mount(
+    root: Document | ShadowRoot | DocumentOrShadowRoot,
+    module: StyleModule | ReadonlyArray<StyleModule>,
+    options?: {nonce?: string}
+  ): void
+  static newName(): string
+}
+
+export type StyleSpec = {
+  [propOrSelector: string]: string | number | StyleSpec | null
+}

frontend/node_modules/style-mod/src/style-mod.js

@@ -0,0 +1,172 @@
+const C = "\u037c"
+const COUNT = typeof Symbol == "undefined" ? "__" + C : Symbol.for(C)
+const SET = typeof Symbol == "undefined" ? "__styleSet" + Math.floor(Math.random() * 1e8) : Symbol("styleSet")
+const top = typeof globalThis != "undefined" ? globalThis : typeof window != "undefined" ? window : {}
+
+// :: - Style modules encapsulate a set of CSS rules defined from
+// JavaScript. Their definitions are only available in a given DOM
+// root after it has been _mounted_ there with `StyleModule.mount`.
+//
+// Style modules should be created once and stored somewhere, as
+// opposed to re-creating them every time you need them. The amount of
+// CSS rules generated for a given DOM root is bounded by the amount
+// of style modules that were used. So to avoid leaking rules, don't
+// create these dynamically, but treat them as one-time allocations.
+export class StyleModule {
+  // :: (Object<Style>, ?{finish: ?(string) → string})
+  // Create a style module from the given spec.
+  //
+  // When `finish` is given, it is called on regular (non-`@`)
+  // selectors (after `&` expansion) to compute the final selector.
+  constructor(spec, options) {
+    this.rules = []
+    let {finish} = options || {}
+
+    function splitSelector(selector) {
+      return /^@/.test(selector) ? [selector] : selector.split(/,\s*/)
+    }
+
+    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] + ";")
+      for (let prop in spec) {
+        let value = spec[prop]
+        if (/&/.test(prop)) {
+          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(splitSelector(prop), value, local, keyframes)
+        } else if (value != null) {
+          local.push(prop.replace(/_.*/, "").replace(/[A-Z]/g, l => "-" + l.toLowerCase()) + ": " + value + ";")
+        }
+      }
+      if (local.length || keyframes) {
+        target.push((finish && !isAt && !isKeyframes ? selectors.map(finish) : selectors).join(", ") +
+                    " {" + local.join(" ") + "}")
+      }
+    }
+
+    for (let prop in spec) render(splitSelector(prop), spec[prop], this.rules)
+  }
+
+  // :: () → string
+  // Returns a string containing the module's CSS rules.
+  getRules() { return this.rules.join("\n") }
+
+  // :: () → string
+  // Generate a new unique CSS class name.
+  static newName() {
+    let id = top[COUNT] || 1
+    top[COUNT] = id + 1
+    return C + id.toString(36)
+  }
+
+  // :: (union<Document, ShadowRoot>, union<[StyleModule], StyleModule>, ?{nonce: ?string})
+  //
+  // 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.
+  //
+  // 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.
+  //
+  // 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], root)
+  }
+}
+
+let adoptedSet = new Map //<Document, StyleSet>
+
+class StyleSet {
+  constructor(root, nonce) {
+    let doc = root.ownerDocument || root, win = doc.defaultView
+    if (!root.head && root.adoptedStyleSheets && win.CSSStyleSheet) {
+      let adopted = adoptedSet.get(doc)
+      if (adopted) return root[SET] = adopted
+      this.sheet = new win.CSSStyleSheet
+      adoptedSet.set(doc, this)
+    } else {
+      this.styleTag = doc.createElement("style")
+      if (nonce) this.styleTag.setAttribute("nonce", nonce)
+    }
+    this.modules = []
+    root[SET] = this
+  }
+
+  mount(modules, root) {
+    let sheet = this.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
+      }
+      if (index == -1) {
+        this.modules.splice(j++, 0, mod)
+        if (sheet) 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++
+      }
+    }
+
+    if (sheet) {
+      if (root.adoptedStyleSheets.indexOf(this.sheet) < 0)
+        root.adoptedStyleSheets = [this.sheet, ...root.adoptedStyleSheets]
+    } else {
+      let text = ""
+      for (let i = 0; i < this.modules.length; i++)
+        text += this.modules[i].getRules() + "\n"
+      this.styleTag.textContent = text
+      let target = root.head || root
+      if (this.styleTag.parentNode != target)
+        target.insertBefore(this.styleTag, target.firstChild)
+    }
+  }
+
+  setNonce(nonce) {
+    if (this.styleTag && this.styleTag.getAttribute("nonce") != nonce)
+      this.styleTag.setAttribute("nonce", nonce)
+  }
+}
+
+// Style::Object<union<Style,string>>
+//
+// A style is an object that, in the simple case, maps CSS property
+// names to strings holding their values, as in `{color: "red",
+// fontWeight: "bold"}`. The property names can be given in
+// camel-case—the library will insert a dash before capital letters
+// when converting them to CSS.
+//
+// If you include an underscore in a property name, it and everything
+// after it will be removed from the output, which can be useful when
+// providing a property multiple times, for browser compatibility
+// reasons.
+//
+// A property in a style object can also be a sub-selector, which
+// extends the current context to add a pseudo-selector or a child
+// selector. Such a property should contain a `&` character, which
+// will be replaced by the current selector. For example `{"&:before":
+// {content: '"hi"'}}`. Sub-selectors and regular properties can
+// freely be mixed in a given object. Any property containing a `&` is
+// assumed to be a sub-selector.
+//
+// Finally, a property can specify an @-block to be wrapped around the
+// styles defined inside the object that's the property's value. For
+// example to create a media query you can do `{"@media screen and
+// (min-width: 400px)": {...}}`.

frontend/node_modules/style-mod/test/test-style-mod.js

@@ -0,0 +1,104 @@
+import {StyleModule} from "style-mod"
+import ist from "ist"
+
+describe("StyleModule", () => {
+  it("renders objects to CSS text", () => {
+    ist(rules(new StyleModule({main: {color: "red", border: "1px solid green"}})),
+        ["main {color: red; border: 1px solid green;}"], eqRules)
+  })
+
+  it("handles multiple rules", () => {
+    ist(rules(new StyleModule({
+      one: {color: "green"},
+      two: {color: "blue"}
+    })), [
+      "one {color: green;}",
+      "two {color: blue;}"
+    ], eqRules)
+  })
+
+  it("supports &-nesting", () => {
+    ist(rules(new StyleModule({
+      main: {
+        color: "yellow",
+        "&:hover": {fontWeight: "bold"}
+      }
+    })), [
+      "main:hover {font-weight: bold;}",
+      "main {color: yellow;}"
+    ], eqRules)
+  })
+
+  it("can replace multiple & markers", () => {
+    ist(rules(new StyleModule({
+      main: {
+        "p &, div &": {color: "blue"}
+      }
+    })), [
+      "p main, div main {color: blue;}"
+    ], eqRules)
+  })
+
+  it("supports media queries", () => {
+    ist(rules(new StyleModule({
+      "@media screen and (min-width: 400px)": {
+        main: {
+          fontFamily: '"URW Bookman"',
+          MozBoxSizing: "border-box"
+        }
+      }
+    })), ["@media screen and (min-width: 400px) {main {font-family: \"URW Bookman\"; -moz-box-sizing: border-box;}}"], eqRules)
+  })
+
+  it("can render keyframes", () => {
+    ist(rules(new StyleModule({
+      "@keyframes foo": {
+        "0%": {color: "blue"},
+        "50%": {color: "red"}
+      }
+    })), ["@keyframes foo {0% {color: blue;} 50% {color: red;}}"], eqRules)
+  })
+
+  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", () => {
+    ist(rules(new StyleModule({
+      main: {
+        color: "rgba(100, 100, 100, .5)",
+        color_2: "grey"
+      }
+    })), ["main {color: rgba(100, 100, 100, .5); color: grey;}"], eqRules)
+  })
+
+  it("can expand multiple selectors at once", () => {
+    ist(rules(new StyleModule({
+      "one, two": {
+        "&.x": {
+          color: "yellow"
+        }
+      }
+    })), ["one.x, two.x {color: yellow;}"], eqRules)
+  })
+
+  it("allows processing of selectors", () => {
+    ist(rules(new StyleModule({
+      "abc, cba": {color: "yellow"},
+      "@media stuff": {abc: {fontWeight: "bold"}}
+    }, {
+      finish: x => x.replace(/a/g, "u")
+    })), ["ubc, cbu {color: yellow;}", "@media stuff {ubc {font-weight: bold;}}"], eqRules)
+  })
+})
+
+function rules(module) { return module.rules }
+
+function eqRules(a, b) {
+  return JSON.stringify(a) == JSON.stringify(b)
+}