style-mod.cjs 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. var C = "\u037c"
  2. var COUNT = typeof Symbol == "undefined" ? "__" + C : Symbol.for(C)
  3. var SET = typeof Symbol == "undefined" ? "__styleSet" + Math.floor(Math.random() * 1e8) : Symbol("styleSet")
  4. var top = typeof globalThis != "undefined" ? globalThis : typeof window != "undefined" ? window : {}
  5. // :: - Style modules encapsulate a set of CSS rules defined from
  6. // JavaScript. Their definitions are only available in a given DOM
  7. // root after it has been _mounted_ there with `StyleModule.mount`.
  8. //
  9. // Style modules should be created once and stored somewhere, as
  10. // opposed to re-creating them every time you need them. The amount of
  11. // CSS rules generated for a given DOM root is bounded by the amount
  12. // of style modules that were used. So to avoid leaking rules, don't
  13. // create these dynamically, but treat them as one-time allocations.
  14. var StyleModule = exports.StyleModule = function StyleModule(spec, options) {
  15. this.rules = []
  16. var ref = options || {};
  17. var finish = ref.finish;
  18. function splitSelector(selector) {
  19. return /^@/.test(selector) ? [selector] : selector.split(/,\s*/)
  20. }
  21. function render(selectors, spec, target, isKeyframes) {
  22. var local = [], isAt = /^@(\w+)\b/.exec(selectors[0]), keyframes = isAt && isAt[1] == "keyframes"
  23. if (isAt && spec == null) { return target.push(selectors[0] + ";") }
  24. for (var prop in spec) {
  25. var value = spec[prop]
  26. if (/&/.test(prop)) {
  27. render(prop.split(/,\s*/).map(function (part) { return selectors.map(function (sel) { return part.replace(/&/, sel); }); }).reduce(function (a, b) { return a.concat(b); }),
  28. value, target)
  29. } else if (value && typeof value == "object") {
  30. if (!isAt) { throw new RangeError("The value of a property (" + prop + ") should be a primitive value.") }
  31. render(splitSelector(prop), value, local, keyframes)
  32. } else if (value != null) {
  33. local.push(prop.replace(/_.*/, "").replace(/[A-Z]/g, function (l) { return "-" + l.toLowerCase(); }) + ": " + value + ";")
  34. }
  35. }
  36. if (local.length || keyframes) {
  37. target.push((finish && !isAt && !isKeyframes ? selectors.map(finish) : selectors).join(", ") +
  38. " {" + local.join(" ") + "}")
  39. }
  40. }
  41. for (var prop in spec) { render(splitSelector(prop), spec[prop], this.rules) }
  42. };
  43. // :: () → string
  44. // Returns a string containing the module's CSS rules.
  45. StyleModule.prototype.getRules = function getRules () { return this.rules.join("\n") };
  46. // :: () → string
  47. // Generate a new unique CSS class name.
  48. StyleModule.newName = function newName () {
  49. var id = top[COUNT] || 1
  50. top[COUNT] = id + 1
  51. return C + id.toString(36)
  52. };
  53. // :: (union<Document, ShadowRoot>, union<[StyleModule], StyleModule>)
  54. //
  55. // Mount the given set of modules in the given DOM root, which ensures
  56. // that the CSS rules defined by the module are available in that
  57. // context.
  58. //
  59. // Rules are only added to the document once per root.
  60. //
  61. // Rule order will follow the order of the modules, so that rules from
  62. // modules later in the array take precedence of those from earlier
  63. // modules. If you call this function multiple times for the same root
  64. // in a way that changes the order of already mounted modules, the old
  65. // order will be changed.
  66. StyleModule.mount = function mount (root, modules) {
  67. (root[SET] || new StyleSet(root)).mount(Array.isArray(modules) ? modules : [modules])
  68. };
  69. var adoptedSet = null
  70. var StyleSet = function StyleSet(root) {
  71. if (!root.head && root.adoptedStyleSheets && typeof CSSStyleSheet != "undefined") {
  72. if (adoptedSet) {
  73. root.adoptedStyleSheets = [adoptedSet.sheet].concat(root.adoptedStyleSheets)
  74. return root[SET] = adoptedSet
  75. }
  76. this.sheet = new CSSStyleSheet
  77. root.adoptedStyleSheets = [this.sheet].concat(root.adoptedStyleSheets)
  78. adoptedSet = this
  79. } else {
  80. this.styleTag = (root.ownerDocument || root).createElement("style")
  81. var target = root.head || root
  82. target.insertBefore(this.styleTag, target.firstChild)
  83. }
  84. this.modules = []
  85. root[SET] = this
  86. };
  87. StyleSet.prototype.mount = function mount (modules) {
  88. var sheet = this.sheet
  89. var pos = 0 /* Current rule offset */, j = 0 /* Index into this.modules */
  90. for (var i = 0; i < modules.length; i++) {
  91. var mod = modules[i], index = this.modules.indexOf(mod)
  92. if (index < j && index > -1) { // Ordering conflict
  93. this.modules.splice(index, 1)
  94. j--
  95. index = -1
  96. }
  97. if (index == -1) {
  98. this.modules.splice(j++, 0, mod)
  99. if (sheet) { for (var k = 0; k < mod.rules.length; k++)
  100. { sheet.insertRule(mod.rules[k], pos++) } }
  101. } else {
  102. while (j < index) { pos += this.modules[j++].rules.length }
  103. pos += mod.rules.length
  104. j++
  105. }
  106. }
  107. if (!sheet) {
  108. var text = ""
  109. for (var i$1 = 0; i$1 < this.modules.length; i$1++)
  110. { text += this.modules[i$1].getRules() + "\n" }
  111. this.styleTag.textContent = text
  112. }
  113. };
  114. // Style::Object<union<Style,string>>
  115. //
  116. // A style is an object that, in the simple case, maps CSS property
  117. // names to strings holding their values, as in `{color: "red",
  118. // fontWeight: "bold"}`. The property names can be given in
  119. // camel-case—the library will insert a dash before capital letters
  120. // when converting them to CSS.
  121. //
  122. // If you include an underscore in a property name, it and everything
  123. // after it will be removed from the output, which can be useful when
  124. // providing a property multiple times, for browser compatibility
  125. // reasons.
  126. //
  127. // A property in a style object can also be a sub-selector, which
  128. // extends the current context to add a pseudo-selector or a child
  129. // selector. Such a property should contain a `&` character, which
  130. // will be replaced by the current selector. For example `{"&:before":
  131. // {content: '"hi"'}}`. Sub-selectors and regular properties can
  132. // freely be mixed in a given object. Any property containing a `&` is
  133. // assumed to be a sub-selector.
  134. //
  135. // Finally, a property can specify an @-block to be wrapped around the
  136. // styles defined inside the object that's the property's value. For
  137. // example to create a media query you can do `{"@media screen and
  138. // (min-width: 400px)": {...}}`.