You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

1 line
13 KiB

  1. {"ast":null,"code":"'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _createClass = function () {\n function defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, descriptor.key, descriptor);\n }\n }\n\n return function (Constructor, protoProps, staticProps) {\n if (protoProps) defineProperties(Constructor.prototype, protoProps);\n if (staticProps) defineProperties(Constructor, staticProps);\n return Constructor;\n };\n}();\n\nvar _warning = require('warning');\n\nvar _warning2 = _interopRequireDefault(_warning);\n\nvar _sheets = require('../sheets');\n\nvar _sheets2 = _interopRequireDefault(_sheets);\n\nvar _StyleRule = require('../rules/StyleRule');\n\nvar _StyleRule2 = _interopRequireDefault(_StyleRule);\n\nvar _toCssValue = require('../utils/toCssValue');\n\nvar _toCssValue2 = _interopRequireDefault(_toCssValue);\n\nfunction _interopRequireDefault(obj) {\n return obj && obj.__esModule ? obj : {\n 'default': obj\n };\n}\n\nfunction _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n}\n/**\n * Cache the value from the first time a function is called.\n */\n\n\nvar memoize = function memoize(fn) {\n var value = void 0;\n return function () {\n if (!value) value = fn();\n return value;\n };\n};\n/**\n * Get a style property value.\n */\n\n\nfunction getPropertyValue(cssRule, prop) {\n try {\n return cssRule.style.getPropertyValue(prop);\n } catch (err) {\n // IE may throw if property is unknown.\n return '';\n }\n}\n/**\n * Set a style property.\n */\n\n\nfunction setProperty(cssRule, prop, value) {\n try {\n var cssValue = value;\n\n if (Array.isArray(value)) {\n cssValue = (0, _toCssValue2['default'])(value, true);\n\n if (value[value.length - 1] === '!important') {\n cssRule.style.setProperty(prop, cssValue, 'important');\n return true;\n }\n }\n\n cssRule.style.setProperty(prop, cssValue);\n } catch (err) {\n // IE may throw if property is unknown.\n return false;\n }\n\n return true;\n}\n/**\n * Remove a style property.\n */\n\n\nfunction removeProperty(cssRule, prop) {\n try {\n cssRule.style.removeProperty(prop);\n } catch (err) {\n (0, _warning2['default'])(false, '[JSS] DOMException \"%s\" was thrown. Tried to remove property \"%s\".', err.message, prop);\n }\n}\n\nvar CSSRuleTypes = {\n STYLE_RULE: 1,\n KEYFRAMES_RULE: 7\n /**\n * Get the CSS Rule key.\n */\n\n};\n\nvar getKey = function () {\n var extractKey = function extractKey(cssText) {\n var from = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;\n return cssText.substr(from, cssText.indexOf('{') - 1);\n };\n\n return function (cssRule) {\n if (cssRule.type === CSSRuleTypes.STYLE_RULE) return cssRule.selectorText;\n\n if (cssRule.type === CSSRuleTypes.KEYFRAMES_RULE) {\n var name = cssRule.name;\n if (name) return '@keyframes ' + name; // There is no rule.name in the following browsers:\n // - IE 9\n // - Safari 7.1.8\n // - Mobile Safari 9.0.0\n\n var cssText = cssRule.cssText;\n return '@' + extractKey(cssText, cssText.indexOf('keyframes'));\n } // Conditionals.\n\n\n return extractKey(cssRule.cssText);\n };\n}();\n/**\n * Set the selector.\n */\n\n\nfunction setSelector(cssRule, selectorText) {\n cssRule.selectorText = selectorText; // Return false if setter was not successful.\n // Currently works in chrome only.\n\n return cssRule.selectorText === selectorText;\n}\n/**\n * Gets the `head` element upon the first call and caches it.\n */\n\n\nvar getHead = memoize(function () {\n return document.head || document.getElementsByTagName('head')[0];\n});\n/**\n * Gets a map of rule keys, where the property is an unescaped key and value\n * is a potentially escaped one.\n * It is used to identify CSS rules and the corresponding JSS rules. As an identifier\n * for CSSStyleRule we normally use `selectorText`. Though if original selector text\n * contains escaped code points e.g. `:not(#\\\\20)`, CSSOM will compile it to `:not(# )`\n * and so CSS rule's `selectorText` won't match JSS rule selector.\n *\n * https://www.w3.org/International/questions/qa-escapes#cssescapes\n */\n\nvar getUnescapedKeysMap = function () {\n var style = void 0;\n var isAttached = false;\n return function (rules) {\n var map = {}; // https://github.com/facebook/flow/issues/2696\n\n if (!style) style = document.createElement('style');\n\n for (var i = 0; i < rules.length; i++) {\n var rule = rules[i];\n if (!(rule instanceof _StyleRule2['default'])) continue;\n var selector = rule.selector; // Only unescape selector over CSSOM if it contains a back slash.\n\n if (selector && selector.indexOf('\\\\') !== -1) {\n // Lazilly attach when needed.\n if (!isAttached) {\n getHead().appendChild(style);\n isAttached = true;\n }\n\n style.textContent = selector + ' {}';\n var _style = style,\n sheet = _style.sheet;\n\n if (sheet) {\n var cssRules = sheet.cssRules;\n if (cssRules) map[cssRules[0].selectorText] = rule.key;\n }\n }\n }\n\n if (isAttached) {\n getHead().removeChild(style);\n isAttached = false;\n }\n\n return map;\n };\n}();\n/**\n * Find attached sheet with an index higher than the passed one.\n */\n\n\nfunction findHigherSheet(registry, options) {\n for (var i = 0; i < registry.length; i++) {\n var sheet = registry[i];\n\n if (sheet.attached && sheet.options.index > options.index && sheet.options.insertionPoint === options.insertionPoint) {\n return sheet;\n }\n }\n\n return null;\n}\n/**\n * Find attached sheet with the highest index.\n */\n\n\nfunction findHighestSheet(registry, options) {\n for (var i = registry.length - 1; i >= 0; i--) {\n var sheet = registry[i];\n\n if (sheet.attached && sheet.options.insertionPoint === options.insertionPoint) {\n return sheet;\n }\n }\n\n return null;\n}\n/**\n * Find a comment with \"jss\" inside.\n */\n\n\nfunction findCommentNode(text) {\n var head = getHead();\n\n for (var i = 0; i < head.childNodes.length; i++) {\n var node = head.childNodes[i];\n\n if (node.nodeType === 8 && node.nodeValue.trim() === text) {\n return node;\n }\n }\n\n return null;\n}\n/**\n * Find a node before which we can insert the sheet.\n */\n\n\nfunction findPrevNode(options) {\n var registry = _sheets2['default'].registry;\n\n if (registry.length > 0) {\n // Try to insert before the next higher sheet.\n var sheet = findHigherSheet(registry, options);\n if (sheet) return sheet.renderer.element; // Otherwise insert after the last attached.\n\n sheet = findHighestSheet(registry, options);\n if (sheet) return sheet.renderer.element.nextElementSibling;\n } // Try to find a comment placeholder if registry is empty.\n\n\n var insertionPoint = options.insertionPoint;\n\n if (insertionPoint && typeof insertionPoint === 'string') {\n var comment = findCommentNode(insertionPoint);\n if (comment) return comment.nextSibling; // If user specifies an insertion point and it can't be found in the document -\n // bad specificity issues may appear.\n\n (0, _warning2['default'])(insertionPoint === 'jss', '[JSS] Insertion point \"%s\" not found.', insertionPoint);\n }\n\n return null;\n}\n/**\n * Insert style element into the DOM.\n */\n\n\nfunction insertStyle(style, options) {\n var insertionPoint = options.insertionPoint;\n var prevNode = findPrevNode(options);\n\n if (prevNode) {\n var parentNode = prevNode.parentNode;\n if (parentNode) parentNode.insertBefore(style, prevNode);\n return;\n } // Works with iframes and any node types.\n\n\n if (insertionPoint && typeof insertionPoint.nodeType === 'number') {\n // https://stackoverflow.com/questions/41328728/force-casting-in-flow\n var insertionPointElement = insertionPoint;\n var _parentNode = insertionPointElement.parentNode;\n if (_parentNode) _parentNode.insertBefore(style, insertionPointElement.nextSibling);else (0, _warning2['default'])(false, '[JSS] Insertion point is not in the DOM.');\n return;\n }\n\n getHead().insertBefore(style, prevNode);\n}\n/**\n * Read jss nonce setting from the page if the user has set it.\n */\n\n\nvar getNonce = memoize(function () {\n var node = document.querySelector('meta[property=\"csp-nonce\"]');\n return node ? node.getAttribute('content') : null;\n});\n\nvar DomRenderer = function () {\n function DomRenderer(sheet) {\n _classCallCheck(this, DomRenderer);\n\n this.getPropertyValue = getPropertyValue;\n this.setProperty = setProperty;\n this.removeProperty = removeProperty;\n this.setSelector = setSelector;\n this.getKey = getKey;\n this.getUnescapedKeysMap = getUnescapedKeysMap;\n this.hasInsertedRules = false; // There is no sheet when the renderer is used from a standalone StyleRule.\n\n if (sheet) _sheets2['default'].add(sheet);\n this.sheet = sheet;\n\n var _ref = this.sheet ? this.sheet.options : {},\n media = _ref.media,\n meta = _ref.meta,\n element = _ref.element;\n\n this.element = element || document.createElement('style');\n this.element.setAttribute('data-jss', '');\n if (media) this.element.setAttribute('media', media);\n if (meta) this.element.setAttribute('data-meta', meta);\n var nonce = getNonce();\n if (nonce) this.element.setAttribute('nonce', nonce);\n }\n /**\n * Insert style element into render tree.\n */\n // HTMLStyleElement needs fixing https://github.com/facebook/flow/issues/2696\n\n\n _createClass(DomRenderer, [{\n key: 'attach',\n value: function attach() {\n // In the case the element node is external and it is already in the DOM.\n if (this.element.parentNode || !this.sheet) return; // When rules are inserted using `insertRule` API, after `sheet.detach().attach()`\n // browsers remove those rules.\n // TODO figure out if its a bug and if it is known.\n // Workaround is to redeploy the sheet before attaching as a string.\n\n if (this.hasInsertedRules) {\n this.deploy();\n this.hasInsertedRules = false;\n }\n\n insertStyle(this.element, this.sheet.options);\n }\n /**\n * Remove style element from render tree.\n */\n\n }, {\n key: 'detach',\n value: function detach() {\n this.element.parentNode.removeChild(this.element);\n }\n /**\n * Inject CSS string into element.\n */\n\n }, {\n key: 'deploy',\n value: function deploy() {\n if (!this.sheet) return;\n this.element.textContent = '\\n' + this.sheet.toString() + '\\n';\n }\n /**\n * Insert a rule into element.\n */\n\n }, {\n key: 'insertRule',\n value: function insertRule(rule, index) {\n var sheet = this.element.sheet;\n var cssRules = sheet.cssRules;\n var str = rule.toString();\n if (!index) index = cssRules.length;\n if (!str) return false;\n\n try {\n sheet.insertRule(str, index);\n } catch (err) {\n (0, _warning2['default'])(false, '[JSS] Can not insert an unsupported rule \\n\\r%s', rule);\n return false;\n }\n\n this.hasInsertedRules = true;\n return cssRules[index];\n }\n /**\n * Delete a rule.\n */\n\n }, {\n key: 'deleteRule',\n value: function deleteRule(cssRule) {\n var sheet = this.element.sheet;\n var index = this.indexOf(cssRule);\n if (index === -1) return false;\n sheet.deleteRule(index);\n return true;\n }\n /**\n * Get index of a CSS Rule.\n */\n\n }, {\n key: 'indexOf',\n value: function indexOf(cssRule) {\n var cssRules = this.element.sheet.cssRules;\n\n for (var _index = 0; _index < cssRules.length; _index++) {\n if (cssRule === cssRules[_index]) return _index;\n }\n\n return -1;\n }\n /**\n * Generate a new CSS rule and replace the existing one.\n */\n\n }, {\n key: 'replaceRule',\n value: function replaceRule(cssRule, rule) {\n var index = this.indexOf(cssRule);\n var newCssRule = this.insertRule(rule, index);\n this.element.sheet.deleteRule(index);\n return newCssRule;\n }\n /**\n * Get all rules elements.\n */\n\n }, {\n key: 'getRules',\n value: function getRules() {\n return this.element.sheet.cssRules;\n }\n }]);\n\n return DomRenderer;\n}();\n\nexports['default'] = DomRenderer;","map":null,"metadata":{},"sourceType":"script"}