styled-jsx
Advanced tools
Comparing version 5.0.4 to 5.0.5
@@ -1,1 +0,1 @@ | ||
module.exports = require('./dist/babel') | ||
module.exports = require('./dist/babel').default |
@@ -1,759 +0,496 @@ | ||
/******/ (function() { // webpackBootstrap | ||
/******/ "use strict"; | ||
/******/ var __webpack_modules__ = ({ | ||
var React = require('react'); | ||
/***/ 583: | ||
/***/ (function(module) { | ||
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } | ||
var React__default = /*#__PURE__*/_interopDefaultLegacy(React); | ||
function hash(str) { | ||
var hash = 5381, | ||
i = str.length; | ||
while(i) { | ||
hash = (hash * 33) ^ str.charCodeAt(--i); | ||
} | ||
/* JavaScript does bitwise operations (like XOR, above) on 32-bit signed | ||
* integers. Since we want the results to be always positive, convert the | ||
* signed int to an unsigned by doing an unsigned bitshift. */ | ||
return hash >>> 0; | ||
} | ||
module.exports = hash; | ||
/***/ }), | ||
/***/ 590: | ||
/***/ (function(__unused_webpack_module, exports, __nccwpck_require__) { | ||
exports.__esModule = true; | ||
exports.computeId = computeId; | ||
exports.computeSelector = computeSelector; | ||
var _stringHash = _interopRequireDefault(__nccwpck_require__(583)); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } | ||
var sanitize = function sanitize(rule) { | ||
return rule.replace(/\/style/gi, '\\/style'); | ||
}; | ||
var cache = {}; | ||
/** | ||
* computeId | ||
* | ||
* Compute and memoize a jsx id from a basedId and optionally props. | ||
*/ | ||
function computeId(baseId, props) { | ||
if (!props) { | ||
return "jsx-" + baseId; | ||
} | ||
var propsToString = String(props); | ||
var key = baseId + propsToString; | ||
if (!cache[key]) { | ||
cache[key] = "jsx-" + (0, _stringHash["default"])(baseId + "-" + propsToString); | ||
} | ||
return cache[key]; | ||
} | ||
/** | ||
* computeSelector | ||
* | ||
* Compute and memoize dynamic selectors. | ||
*/ | ||
function computeSelector(id, css) { | ||
var selectoPlaceholderRegexp = /__jsx-style-dynamic-selector/g; // Sanitize SSR-ed CSS. | ||
// Client side code doesn't need to be sanitized since we use | ||
// document.createTextNode (dev) and the CSSOM api sheet.insertRule (prod). | ||
if (typeof window === 'undefined') { | ||
css = sanitize(css); | ||
} | ||
var idcss = id + css; | ||
if (!cache[idcss]) { | ||
cache[idcss] = css.replace(selectoPlaceholderRegexp, id); | ||
} | ||
return cache[idcss]; | ||
} | ||
/***/ }), | ||
/***/ 503: | ||
/***/ (function(__unused_webpack_module, exports) { | ||
exports.__esModule = true; | ||
exports["default"] = void 0; | ||
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } | ||
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } | ||
/* | ||
Based on Glamor's sheet | ||
https://github.com/threepointone/glamor/blob/667b480d31b3721a905021b26e1290ce92ca2879/src/sheet.js | ||
*/ | ||
var isProd = typeof process !== 'undefined' && process.env && process.env.NODE_ENV === 'production'; | ||
var isString = function isString(o) { | ||
return Object.prototype.toString.call(o) === '[object String]'; | ||
*/ function _defineProperties(target, props) { | ||
for(var i = 0; i < props.length; i++){ | ||
var descriptor = props[i]; | ||
descriptor.enumerable = descriptor.enumerable || false; | ||
descriptor.configurable = true; | ||
if ("value" in descriptor) descriptor.writable = true; | ||
Object.defineProperty(target, descriptor.key, descriptor); | ||
} | ||
} | ||
function _createClass(Constructor, protoProps, staticProps) { | ||
if (protoProps) _defineProperties(Constructor.prototype, protoProps); | ||
if (staticProps) _defineProperties(Constructor, staticProps); | ||
return Constructor; | ||
} | ||
var isProd = typeof process !== "undefined" && process.env && process.env.NODE_ENV === "production"; | ||
var isString = function(o) { | ||
return Object.prototype.toString.call(o) === "[object String]"; | ||
}; | ||
var StyleSheet = /*#__PURE__*/function () { | ||
function StyleSheet(_temp) { | ||
var _ref = _temp === void 0 ? {} : _temp, | ||
_ref$name = _ref.name, | ||
name = _ref$name === void 0 ? 'stylesheet' : _ref$name, | ||
_ref$optimizeForSpeed = _ref.optimizeForSpeed, | ||
optimizeForSpeed = _ref$optimizeForSpeed === void 0 ? isProd : _ref$optimizeForSpeed, | ||
_ref$isBrowser = _ref.isBrowser, | ||
isBrowser = _ref$isBrowser === void 0 ? typeof window !== 'undefined' : _ref$isBrowser; | ||
invariant(isString(name), '`name` must be a string'); | ||
this._name = name; | ||
this._deletedRulePlaceholder = "#" + name + "-deleted-rule____{}"; | ||
invariant(typeof optimizeForSpeed === 'boolean', '`optimizeForSpeed` must be a boolean'); | ||
this._optimizeForSpeed = optimizeForSpeed; | ||
this._isBrowser = isBrowser; | ||
this._serverSheet = undefined; | ||
this._tags = []; | ||
this._injected = false; | ||
this._rulesCount = 0; | ||
var node = this._isBrowser && document.querySelector('meta[property="csp-nonce"]'); | ||
this._nonce = node ? node.getAttribute('content') : null; | ||
} | ||
var _proto = StyleSheet.prototype; | ||
_proto.setOptimizeForSpeed = function setOptimizeForSpeed(bool) { | ||
invariant(typeof bool === 'boolean', '`setOptimizeForSpeed` accepts a boolean'); | ||
invariant(this._rulesCount === 0, 'optimizeForSpeed cannot be when rules have already been inserted'); | ||
this.flush(); | ||
this._optimizeForSpeed = bool; | ||
this.inject(); | ||
}; | ||
_proto.isOptimizeForSpeed = function isOptimizeForSpeed() { | ||
return this._optimizeForSpeed; | ||
}; | ||
_proto.inject = function inject() { | ||
var _this = this; | ||
invariant(!this._injected, 'sheet already injected'); | ||
this._injected = true; | ||
if (this._isBrowser && this._optimizeForSpeed) { | ||
this._tags[0] = this.makeStyleTag(this._name); | ||
this._optimizeForSpeed = 'insertRule' in this.getSheet(); | ||
if (!this._optimizeForSpeed) { | ||
if (!isProd) { | ||
console.warn('StyleSheet: optimizeForSpeed mode not supported falling back to standard mode.'); | ||
} | ||
var StyleSheet = /*#__PURE__*/ function() { | ||
function StyleSheet(param) { | ||
var ref = param === void 0 ? {} : param, _name = ref.name, name = _name === void 0 ? "stylesheet" : _name, _optimizeForSpeed = ref.optimizeForSpeed, optimizeForSpeed = _optimizeForSpeed === void 0 ? isProd : _optimizeForSpeed; | ||
invariant$1(isString(name), "`name` must be a string"); | ||
this._name = name; | ||
this._deletedRulePlaceholder = "#" + name + "-deleted-rule____{}"; | ||
invariant$1(typeof optimizeForSpeed === "boolean", "`optimizeForSpeed` must be a boolean"); | ||
this._optimizeForSpeed = optimizeForSpeed; | ||
this._serverSheet = undefined; | ||
this._tags = []; | ||
this._injected = false; | ||
this._rulesCount = 0; | ||
var node = typeof window !== "undefined" && document.querySelector('meta[property="csp-nonce"]'); | ||
this._nonce = node ? node.getAttribute("content") : null; | ||
} | ||
var _proto = StyleSheet.prototype; | ||
_proto.setOptimizeForSpeed = function setOptimizeForSpeed(bool) { | ||
invariant$1(typeof bool === "boolean", "`setOptimizeForSpeed` accepts a boolean"); | ||
invariant$1(this._rulesCount === 0, "optimizeForSpeed cannot be when rules have already been inserted"); | ||
this.flush(); | ||
this._optimizeForSpeed = bool; | ||
this.inject(); | ||
}; | ||
_proto.isOptimizeForSpeed = function isOptimizeForSpeed() { | ||
return this._optimizeForSpeed; | ||
}; | ||
_proto.inject = function inject() { | ||
var _this = this; | ||
invariant$1(!this._injected, "sheet already injected"); | ||
this._injected = true; | ||
} | ||
return; | ||
} | ||
this._serverSheet = { | ||
cssRules: [], | ||
insertRule: function insertRule(rule, index) { | ||
if (typeof index === 'number') { | ||
_this._serverSheet.cssRules[index] = { | ||
cssText: rule | ||
}; | ||
if (typeof window !== "undefined" && this._optimizeForSpeed) { | ||
this._tags[0] = this.makeStyleTag(this._name); | ||
this._optimizeForSpeed = "insertRule" in this.getSheet(); | ||
if (!this._optimizeForSpeed) { | ||
if (!isProd) { | ||
console.warn("StyleSheet: optimizeForSpeed mode not supported falling back to standard mode."); | ||
} | ||
this.flush(); | ||
this._injected = true; | ||
} | ||
return; | ||
} | ||
this._serverSheet = { | ||
cssRules: [], | ||
insertRule: function(rule, index) { | ||
if (typeof index === "number") { | ||
_this._serverSheet.cssRules[index] = { | ||
cssText: rule | ||
}; | ||
} else { | ||
_this._serverSheet.cssRules.push({ | ||
cssText: rule | ||
}); | ||
} | ||
return index; | ||
}, | ||
deleteRule: function(index) { | ||
_this._serverSheet.cssRules[index] = null; | ||
} | ||
}; | ||
}; | ||
_proto.getSheetForTag = function getSheetForTag(tag) { | ||
if (tag.sheet) { | ||
return tag.sheet; | ||
} | ||
// this weirdness brought to you by firefox | ||
for(var i = 0; i < document.styleSheets.length; i++){ | ||
if (document.styleSheets[i].ownerNode === tag) { | ||
return document.styleSheets[i]; | ||
} | ||
} | ||
}; | ||
_proto.getSheet = function getSheet() { | ||
return this.getSheetForTag(this._tags[this._tags.length - 1]); | ||
}; | ||
_proto.insertRule = function insertRule(rule, index) { | ||
invariant$1(isString(rule), "`insertRule` accepts only strings"); | ||
if (typeof window === "undefined") { | ||
if (typeof index !== "number") { | ||
index = this._serverSheet.cssRules.length; | ||
} | ||
this._serverSheet.insertRule(rule, index); | ||
return this._rulesCount++; | ||
} | ||
if (this._optimizeForSpeed) { | ||
var sheet = this.getSheet(); | ||
if (typeof index !== "number") { | ||
index = sheet.cssRules.length; | ||
} | ||
// this weirdness for perf, and chrome's weird bug | ||
// https://stackoverflow.com/questions/20007992/chrome-suddenly-stopped-accepting-insertrule | ||
try { | ||
sheet.insertRule(rule, index); | ||
} catch (error) { | ||
if (!isProd) { | ||
console.warn("StyleSheet: illegal rule: \n\n" + rule + "\n\nSee https://stackoverflow.com/q/20007992 for more info"); | ||
} | ||
return -1; | ||
} | ||
} else { | ||
_this._serverSheet.cssRules.push({ | ||
cssText: rule | ||
}); | ||
var insertionPoint = this._tags[index]; | ||
this._tags.push(this.makeStyleTag(this._name, rule, insertionPoint)); | ||
} | ||
return this._rulesCount++; | ||
}; | ||
_proto.replaceRule = function replaceRule(index, rule) { | ||
if (this._optimizeForSpeed || typeof window === "undefined") { | ||
var sheet = typeof window !== "undefined" ? this.getSheet() : this._serverSheet; | ||
if (!rule.trim()) { | ||
rule = this._deletedRulePlaceholder; | ||
} | ||
if (!sheet.cssRules[index]) { | ||
// @TBD Should we throw an error? | ||
return index; | ||
} | ||
sheet.deleteRule(index); | ||
try { | ||
sheet.insertRule(rule, index); | ||
} catch (error) { | ||
if (!isProd) { | ||
console.warn("StyleSheet: illegal rule: \n\n" + rule + "\n\nSee https://stackoverflow.com/q/20007992 for more info"); | ||
} | ||
// In order to preserve the indices we insert a deleteRulePlaceholder | ||
sheet.insertRule(this._deletedRulePlaceholder, index); | ||
} | ||
} else { | ||
var tag = this._tags[index]; | ||
invariant$1(tag, "old rule at index `" + index + "` not found"); | ||
tag.textContent = rule; | ||
} | ||
return index; | ||
}, | ||
deleteRule: function deleteRule(index) { | ||
_this._serverSheet.cssRules[index] = null; | ||
} | ||
}; | ||
}; | ||
_proto.getSheetForTag = function getSheetForTag(tag) { | ||
if (tag.sheet) { | ||
return tag.sheet; | ||
} // this weirdness brought to you by firefox | ||
for (var i = 0; i < document.styleSheets.length; i++) { | ||
if (document.styleSheets[i].ownerNode === tag) { | ||
return document.styleSheets[i]; | ||
} | ||
} | ||
}; | ||
_proto.getSheet = function getSheet() { | ||
return this.getSheetForTag(this._tags[this._tags.length - 1]); | ||
}; | ||
_proto.insertRule = function insertRule(rule, index) { | ||
invariant(isString(rule), '`insertRule` accepts only strings'); | ||
if (!this._isBrowser) { | ||
if (typeof index !== 'number') { | ||
index = this._serverSheet.cssRules.length; | ||
} | ||
this._serverSheet.insertRule(rule, index); | ||
return this._rulesCount++; | ||
} | ||
if (this._optimizeForSpeed) { | ||
var sheet = this.getSheet(); | ||
if (typeof index !== 'number') { | ||
index = sheet.cssRules.length; | ||
} // this weirdness for perf, and chrome's weird bug | ||
// https://stackoverflow.com/questions/20007992/chrome-suddenly-stopped-accepting-insertrule | ||
try { | ||
sheet.insertRule(rule, index); | ||
} catch (error) { | ||
if (!isProd) { | ||
console.warn("StyleSheet: illegal rule: \n\n" + rule + "\n\nSee https://stackoverflow.com/q/20007992 for more info"); | ||
_proto.deleteRule = function deleteRule(index) { | ||
if (typeof window === "undefined") { | ||
this._serverSheet.deleteRule(index); | ||
return; | ||
} | ||
return -1; | ||
} | ||
} else { | ||
var insertionPoint = this._tags[index]; | ||
this._tags.push(this.makeStyleTag(this._name, rule, insertionPoint)); | ||
if (this._optimizeForSpeed) { | ||
this.replaceRule(index, ""); | ||
} else { | ||
var tag = this._tags[index]; | ||
invariant$1(tag, "rule at index `" + index + "` not found"); | ||
tag.parentNode.removeChild(tag); | ||
this._tags[index] = null; | ||
} | ||
}; | ||
_proto.flush = function flush() { | ||
this._injected = false; | ||
this._rulesCount = 0; | ||
if (typeof window !== "undefined") { | ||
this._tags.forEach(function(tag) { | ||
return tag && tag.parentNode.removeChild(tag); | ||
}); | ||
this._tags = []; | ||
} else { | ||
// simpler on server | ||
this._serverSheet.cssRules = []; | ||
} | ||
}; | ||
_proto.cssRules = function cssRules() { | ||
var _this = this; | ||
if (typeof window === "undefined") { | ||
return this._serverSheet.cssRules; | ||
} | ||
return this._tags.reduce(function(rules, tag) { | ||
if (tag) { | ||
rules = rules.concat(Array.prototype.map.call(_this.getSheetForTag(tag).cssRules, function(rule) { | ||
return rule.cssText === _this._deletedRulePlaceholder ? null : rule; | ||
})); | ||
} else { | ||
rules.push(null); | ||
} | ||
return rules; | ||
}, []); | ||
}; | ||
_proto.makeStyleTag = function makeStyleTag(name, cssString, relativeToTag) { | ||
if (cssString) { | ||
invariant$1(isString(cssString), "makeStyleTag accepts only strings as second parameter"); | ||
} | ||
var tag = document.createElement("style"); | ||
if (this._nonce) tag.setAttribute("nonce", this._nonce); | ||
tag.type = "text/css"; | ||
tag.setAttribute("data-" + name, ""); | ||
if (cssString) { | ||
tag.appendChild(document.createTextNode(cssString)); | ||
} | ||
var head = document.head || document.getElementsByTagName("head")[0]; | ||
if (relativeToTag) { | ||
head.insertBefore(tag, relativeToTag); | ||
} else { | ||
head.appendChild(tag); | ||
} | ||
return tag; | ||
}; | ||
_createClass(StyleSheet, [ | ||
{ | ||
key: "length", | ||
get: function get() { | ||
return this._rulesCount; | ||
} | ||
} | ||
]); | ||
return StyleSheet; | ||
}(); | ||
function invariant$1(condition, message) { | ||
if (!condition) { | ||
throw new Error("StyleSheet: " + message + "."); | ||
} | ||
} | ||
return this._rulesCount++; | ||
}; | ||
_proto.replaceRule = function replaceRule(index, rule) { | ||
if (this._optimizeForSpeed || !this._isBrowser) { | ||
var sheet = this._isBrowser ? this.getSheet() : this._serverSheet; | ||
if (!rule.trim()) { | ||
rule = this._deletedRulePlaceholder; | ||
} | ||
if (!sheet.cssRules[index]) { | ||
// @TBD Should we throw an error? | ||
return index; | ||
} | ||
sheet.deleteRule(index); | ||
try { | ||
sheet.insertRule(rule, index); | ||
} catch (error) { | ||
if (!isProd) { | ||
console.warn("StyleSheet: illegal rule: \n\n" + rule + "\n\nSee https://stackoverflow.com/q/20007992 for more info"); | ||
} // In order to preserve the indices we insert a deleteRulePlaceholder | ||
sheet.insertRule(this._deletedRulePlaceholder, index); | ||
} | ||
} else { | ||
var tag = this._tags[index]; | ||
invariant(tag, "old rule at index `" + index + "` not found"); | ||
tag.textContent = rule; | ||
function hash(str) { | ||
var _$hash = 5381, i = str.length; | ||
while(i){ | ||
_$hash = _$hash * 33 ^ str.charCodeAt(--i); | ||
} | ||
/* JavaScript does bitwise operations (like XOR, above) on 32-bit signed | ||
* integers. Since we want the results to be always positive, convert the | ||
* signed int to an unsigned by doing an unsigned bitshift. */ return _$hash >>> 0; | ||
} | ||
var stringHash = hash; | ||
return index; | ||
}; | ||
_proto.deleteRule = function deleteRule(index) { | ||
if (!this._isBrowser) { | ||
this._serverSheet.deleteRule(index); | ||
return; | ||
var sanitize = function(rule) { | ||
return rule.replace(/\/style/gi, "\\/style"); | ||
}; | ||
var cache = {}; | ||
/** | ||
* computeId | ||
* | ||
* Compute and memoize a jsx id from a basedId and optionally props. | ||
*/ function computeId(baseId, props) { | ||
if (!props) { | ||
return "jsx-" + baseId; | ||
} | ||
if (this._optimizeForSpeed) { | ||
this.replaceRule(index, ''); | ||
} else { | ||
var tag = this._tags[index]; | ||
invariant(tag, "rule at index `" + index + "` not found"); | ||
tag.parentNode.removeChild(tag); | ||
this._tags[index] = null; | ||
var propsToString = String(props); | ||
var key = baseId + propsToString; | ||
if (!cache[key]) { | ||
cache[key] = "jsx-" + stringHash(baseId + "-" + propsToString); | ||
} | ||
}; | ||
_proto.flush = function flush() { | ||
this._injected = false; | ||
this._rulesCount = 0; | ||
if (this._isBrowser) { | ||
this._tags.forEach(function (tag) { | ||
return tag && tag.parentNode.removeChild(tag); | ||
}); | ||
this._tags = []; | ||
} else { | ||
// simpler on server | ||
this._serverSheet.cssRules = []; | ||
return cache[key]; | ||
} | ||
/** | ||
* computeSelector | ||
* | ||
* Compute and memoize dynamic selectors. | ||
*/ function computeSelector(id, css) { | ||
var selectoPlaceholderRegexp = /__jsx-style-dynamic-selector/g; | ||
// Sanitize SSR-ed CSS. | ||
// Client side code doesn't need to be sanitized since we use | ||
// document.createTextNode (dev) and the CSSOM api sheet.insertRule (prod). | ||
if (typeof window === "undefined") { | ||
css = sanitize(css); | ||
} | ||
}; | ||
_proto.cssRules = function cssRules() { | ||
var _this2 = this; | ||
if (!this._isBrowser) { | ||
return this._serverSheet.cssRules; | ||
var idcss = id + css; | ||
if (!cache[idcss]) { | ||
cache[idcss] = css.replace(selectoPlaceholderRegexp, id); | ||
} | ||
return this._tags.reduce(function (rules, tag) { | ||
if (tag) { | ||
rules = rules.concat(Array.prototype.map.call(_this2.getSheetForTag(tag).cssRules, function (rule) { | ||
return rule.cssText === _this2._deletedRulePlaceholder ? null : rule; | ||
})); | ||
} else { | ||
rules.push(null); | ||
} | ||
return rules; | ||
}, []); | ||
}; | ||
_proto.makeStyleTag = function makeStyleTag(name, cssString, relativeToTag) { | ||
if (cssString) { | ||
invariant(isString(cssString), 'makeStyleTag accepts only strings as second parameter'); | ||
} | ||
var tag = document.createElement('style'); | ||
if (this._nonce) tag.setAttribute('nonce', this._nonce); | ||
tag.type = 'text/css'; | ||
tag.setAttribute("data-" + name, ''); | ||
if (cssString) { | ||
tag.appendChild(document.createTextNode(cssString)); | ||
} | ||
var head = document.head || document.getElementsByTagName('head')[0]; | ||
if (relativeToTag) { | ||
head.insertBefore(tag, relativeToTag); | ||
} else { | ||
head.appendChild(tag); | ||
} | ||
return tag; | ||
}; | ||
_createClass(StyleSheet, [{ | ||
key: "length", | ||
get: function get() { | ||
return this._rulesCount; | ||
} | ||
}]); | ||
return StyleSheet; | ||
}(); | ||
exports["default"] = StyleSheet; | ||
function invariant(condition, message) { | ||
if (!condition) { | ||
throw new Error("StyleSheet: " + message + "."); | ||
} | ||
return cache[idcss]; | ||
} | ||
/***/ }), | ||
/***/ 449: | ||
/***/ (function(__unused_webpack_module, exports, __nccwpck_require__) { | ||
exports.__esModule = true; | ||
exports["default"] = JSXStyle; | ||
var _react = _interopRequireDefault(__nccwpck_require__(522)); | ||
var _stylesheetRegistry = __nccwpck_require__(147); | ||
var _hash = __nccwpck_require__(590); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } | ||
// Opt-into the new `useInsertionEffect` API in React 18, fallback to `useLayoutEffect`. | ||
// https://github.com/reactwg/react-18/discussions/110 | ||
var useInsertionEffect = _react["default"].useInsertionEffect || _react["default"].useLayoutEffect; | ||
var defaultRegistry = typeof window !== 'undefined' ? (0, _stylesheetRegistry.createStyleRegistry)() : undefined; | ||
function JSXStyle(props) { | ||
var registry = defaultRegistry ? defaultRegistry : (0, _stylesheetRegistry.useStyleRegistry)(); // If `registry` does not exist, we do nothing here. | ||
if (!registry) { | ||
return null; | ||
} | ||
if (typeof window === 'undefined') { | ||
registry.add(props); | ||
return null; | ||
} | ||
useInsertionEffect(function () { | ||
registry.add(props); | ||
return function () { | ||
registry.remove(props); | ||
}; // props.children can be string[], will be striped since id is identical | ||
}, [props.id, String(props.dynamic)]); | ||
return null; | ||
} | ||
JSXStyle.dynamic = function (info) { | ||
return info.map(function (tagInfo) { | ||
var baseId = tagInfo[0]; | ||
var props = tagInfo[1]; | ||
return (0, _hash.computeId)(baseId, props); | ||
}).join(' '); | ||
}; | ||
/***/ }), | ||
/***/ 147: | ||
/***/ (function(__unused_webpack_module, exports, __nccwpck_require__) { | ||
exports.__esModule = true; | ||
exports.createStyleRegistry = createStyleRegistry; | ||
exports.StyleRegistry = StyleRegistry; | ||
exports.useStyleRegistry = useStyleRegistry; | ||
exports.StyleSheetContext = exports.StyleSheetRegistry = void 0; | ||
var _react = _interopRequireWildcard(__nccwpck_require__(522)); | ||
var _stylesheet = _interopRequireDefault(__nccwpck_require__(503)); | ||
var _hash = __nccwpck_require__(590); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } | ||
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; } | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; } | ||
function mapRulesToStyle(cssRules, options) { | ||
if (options === void 0) { | ||
options = {}; | ||
} | ||
return cssRules.map(function (args) { | ||
var id = args[0]; | ||
var css = args[1]; | ||
return _react["default"].createElement('style', { | ||
id: "__" + id, | ||
// Avoid warnings upon render with a key | ||
key: "__" + id, | ||
nonce: options.nonce ? options.nonce : undefined, | ||
dangerouslySetInnerHTML: { | ||
__html: css | ||
} | ||
if (options === void 0) options = {}; | ||
return cssRules.map(function(args) { | ||
var id = args[0]; | ||
var css = args[1]; | ||
return /*#__PURE__*/ React__default["default"].createElement("style", { | ||
id: "__" + id, | ||
// Avoid warnings upon render with a key | ||
key: "__" + id, | ||
nonce: options.nonce ? options.nonce : undefined, | ||
dangerouslySetInnerHTML: { | ||
__html: css | ||
} | ||
}); | ||
}); | ||
}); | ||
} | ||
var StyleSheetRegistry = /*#__PURE__*/function () { | ||
function StyleSheetRegistry(_temp) { | ||
var _ref = _temp === void 0 ? {} : _temp, | ||
_ref$styleSheet = _ref.styleSheet, | ||
styleSheet = _ref$styleSheet === void 0 ? null : _ref$styleSheet, | ||
_ref$optimizeForSpeed = _ref.optimizeForSpeed, | ||
optimizeForSpeed = _ref$optimizeForSpeed === void 0 ? false : _ref$optimizeForSpeed, | ||
_ref$isBrowser = _ref.isBrowser, | ||
isBrowser = _ref$isBrowser === void 0 ? typeof window !== 'undefined' : _ref$isBrowser; | ||
this._sheet = styleSheet || new _stylesheet["default"]({ | ||
name: 'styled-jsx', | ||
optimizeForSpeed: optimizeForSpeed | ||
}); | ||
this._sheet.inject(); | ||
if (styleSheet && typeof optimizeForSpeed === 'boolean') { | ||
this._sheet.setOptimizeForSpeed(optimizeForSpeed); | ||
this._optimizeForSpeed = this._sheet.isOptimizeForSpeed(); | ||
var StyleSheetRegistry = /*#__PURE__*/ function() { | ||
function StyleSheetRegistry(param) { | ||
var ref = param === void 0 ? {} : param, _styleSheet = ref.styleSheet, styleSheet = _styleSheet === void 0 ? null : _styleSheet, _optimizeForSpeed = ref.optimizeForSpeed, optimizeForSpeed = _optimizeForSpeed === void 0 ? false : _optimizeForSpeed; | ||
this._sheet = styleSheet || new StyleSheet({ | ||
name: "styled-jsx", | ||
optimizeForSpeed: optimizeForSpeed | ||
}); | ||
this._sheet.inject(); | ||
if (styleSheet && typeof optimizeForSpeed === "boolean") { | ||
this._sheet.setOptimizeForSpeed(optimizeForSpeed); | ||
this._optimizeForSpeed = this._sheet.isOptimizeForSpeed(); | ||
} | ||
this._fromServer = undefined; | ||
this._indices = {}; | ||
this._instancesCounts = {}; | ||
} | ||
this._isBrowser = isBrowser; | ||
this._fromServer = undefined; | ||
this._indices = {}; | ||
this._instancesCounts = {}; | ||
} | ||
var _proto = StyleSheetRegistry.prototype; | ||
_proto.add = function add(props) { | ||
var _this = this; | ||
if (undefined === this._optimizeForSpeed) { | ||
this._optimizeForSpeed = Array.isArray(props.children); | ||
this._sheet.setOptimizeForSpeed(this._optimizeForSpeed); | ||
this._optimizeForSpeed = this._sheet.isOptimizeForSpeed(); | ||
} | ||
if (this._isBrowser && !this._fromServer) { | ||
this._fromServer = this.selectFromServer(); | ||
this._instancesCounts = Object.keys(this._fromServer).reduce(function (acc, tagName) { | ||
acc[tagName] = 0; | ||
return acc; | ||
}, {}); | ||
} | ||
var _this$getIdAndRules = this.getIdAndRules(props), | ||
styleId = _this$getIdAndRules.styleId, | ||
rules = _this$getIdAndRules.rules; // Deduping: just increase the instances count. | ||
if (styleId in this._instancesCounts) { | ||
this._instancesCounts[styleId] += 1; | ||
return; | ||
} | ||
var indices = rules.map(function (rule) { | ||
return _this._sheet.insertRule(rule); | ||
}) // Filter out invalid rules | ||
.filter(function (index) { | ||
return index !== -1; | ||
}); | ||
this._indices[styleId] = indices; | ||
this._instancesCounts[styleId] = 1; | ||
}; | ||
_proto.remove = function remove(props) { | ||
var _this2 = this; | ||
var _this$getIdAndRules2 = this.getIdAndRules(props), | ||
styleId = _this$getIdAndRules2.styleId; | ||
invariant(styleId in this._instancesCounts, "styleId: `" + styleId + "` not found"); | ||
this._instancesCounts[styleId] -= 1; | ||
if (this._instancesCounts[styleId] < 1) { | ||
var tagFromServer = this._fromServer && this._fromServer[styleId]; | ||
if (tagFromServer) { | ||
tagFromServer.parentNode.removeChild(tagFromServer); | ||
delete this._fromServer[styleId]; | ||
} else { | ||
this._indices[styleId].forEach(function (index) { | ||
return _this2._sheet.deleteRule(index); | ||
var _proto = StyleSheetRegistry.prototype; | ||
_proto.add = function add(props) { | ||
var _this = this; | ||
if (undefined === this._optimizeForSpeed) { | ||
this._optimizeForSpeed = Array.isArray(props.children); | ||
this._sheet.setOptimizeForSpeed(this._optimizeForSpeed); | ||
this._optimizeForSpeed = this._sheet.isOptimizeForSpeed(); | ||
} | ||
if (typeof window !== "undefined" && !this._fromServer) { | ||
this._fromServer = this.selectFromServer(); | ||
this._instancesCounts = Object.keys(this._fromServer).reduce(function(acc, tagName) { | ||
acc[tagName] = 0; | ||
return acc; | ||
}, {}); | ||
} | ||
var ref = this.getIdAndRules(props), styleId = ref.styleId, rules = ref.rules; | ||
// Deduping: just increase the instances count. | ||
if (styleId in this._instancesCounts) { | ||
this._instancesCounts[styleId] += 1; | ||
return; | ||
} | ||
var indices = rules.map(function(rule) { | ||
return _this._sheet.insertRule(rule); | ||
})// Filter out invalid rules | ||
.filter(function(index) { | ||
return index !== -1; | ||
}); | ||
delete this._indices[styleId]; | ||
} | ||
delete this._instancesCounts[styleId]; | ||
} | ||
}; | ||
_proto.update = function update(props, nextProps) { | ||
this.add(nextProps); | ||
this.remove(props); | ||
}; | ||
_proto.flush = function flush() { | ||
this._sheet.flush(); | ||
this._sheet.inject(); | ||
this._fromServer = undefined; | ||
this._indices = {}; | ||
this._instancesCounts = {}; | ||
}; | ||
_proto.cssRules = function cssRules() { | ||
var _this3 = this; | ||
var fromServer = this._fromServer ? Object.keys(this._fromServer).map(function (styleId) { | ||
return [styleId, _this3._fromServer[styleId]]; | ||
}) : []; | ||
var cssRules = this._sheet.cssRules(); | ||
return fromServer.concat(Object.keys(this._indices).map(function (styleId) { | ||
return [styleId, _this3._indices[styleId].map(function (index) { | ||
return cssRules[index].cssText; | ||
}).join(_this3._optimizeForSpeed ? '' : '\n')]; | ||
}) // filter out empty rules | ||
.filter(function (rule) { | ||
return Boolean(rule[1]); | ||
})); | ||
}; | ||
_proto.styles = function styles(options) { | ||
return mapRulesToStyle(this.cssRules(), options); | ||
}; | ||
_proto.getIdAndRules = function getIdAndRules(props) { | ||
var css = props.children, | ||
dynamic = props.dynamic, | ||
id = props.id; | ||
if (dynamic) { | ||
var styleId = (0, _hash.computeId)(id, dynamic); | ||
return { | ||
styleId: styleId, | ||
rules: Array.isArray(css) ? css.map(function (rule) { | ||
return (0, _hash.computeSelector)(styleId, rule); | ||
}) : [(0, _hash.computeSelector)(styleId, css)] | ||
}; | ||
} | ||
return { | ||
styleId: (0, _hash.computeId)(id), | ||
rules: Array.isArray(css) ? css : [css] | ||
this._indices[styleId] = indices; | ||
this._instancesCounts[styleId] = 1; | ||
}; | ||
} | ||
/** | ||
_proto.remove = function remove(props) { | ||
var _this = this; | ||
var styleId = this.getIdAndRules(props).styleId; | ||
invariant(styleId in this._instancesCounts, "styleId: `" + styleId + "` not found"); | ||
this._instancesCounts[styleId] -= 1; | ||
if (this._instancesCounts[styleId] < 1) { | ||
var tagFromServer = this._fromServer && this._fromServer[styleId]; | ||
if (tagFromServer) { | ||
tagFromServer.parentNode.removeChild(tagFromServer); | ||
delete this._fromServer[styleId]; | ||
} else { | ||
this._indices[styleId].forEach(function(index) { | ||
return _this._sheet.deleteRule(index); | ||
}); | ||
delete this._indices[styleId]; | ||
} | ||
delete this._instancesCounts[styleId]; | ||
} | ||
}; | ||
_proto.update = function update(props, nextProps) { | ||
this.add(nextProps); | ||
this.remove(props); | ||
}; | ||
_proto.flush = function flush() { | ||
this._sheet.flush(); | ||
this._sheet.inject(); | ||
this._fromServer = undefined; | ||
this._indices = {}; | ||
this._instancesCounts = {}; | ||
}; | ||
_proto.cssRules = function cssRules() { | ||
var _this = this; | ||
var fromServer = this._fromServer ? Object.keys(this._fromServer).map(function(styleId) { | ||
return [ | ||
styleId, | ||
_this._fromServer[styleId] | ||
]; | ||
}) : []; | ||
var cssRules1 = this._sheet.cssRules(); | ||
return fromServer.concat(Object.keys(this._indices).map(function(styleId) { | ||
return [ | ||
styleId, | ||
_this._indices[styleId].map(function(index) { | ||
return cssRules1[index].cssText; | ||
}).join(_this._optimizeForSpeed ? "" : "\n") | ||
]; | ||
})// filter out empty rules | ||
.filter(function(rule) { | ||
return Boolean(rule[1]); | ||
})); | ||
}; | ||
_proto.styles = function styles(options) { | ||
return mapRulesToStyle(this.cssRules(), options); | ||
}; | ||
_proto.getIdAndRules = function getIdAndRules(props) { | ||
var css = props.children, dynamic = props.dynamic, id = props.id; | ||
if (dynamic) { | ||
var styleId = computeId(id, dynamic); | ||
return { | ||
styleId: styleId, | ||
rules: Array.isArray(css) ? css.map(function(rule) { | ||
return computeSelector(styleId, rule); | ||
}) : [ | ||
computeSelector(styleId, css) | ||
] | ||
}; | ||
} | ||
return { | ||
styleId: computeId(id), | ||
rules: Array.isArray(css) ? css : [ | ||
css | ||
] | ||
}; | ||
}; | ||
/** | ||
* selectFromServer | ||
* | ||
* Collects style tags from the document with id __jsx-XXX | ||
*/ | ||
; | ||
_proto.selectFromServer = function selectFromServer() { | ||
var elements = Array.prototype.slice.call(document.querySelectorAll('[id^="__jsx-"]')); | ||
return elements.reduce(function (acc, element) { | ||
var id = element.id.slice(2); | ||
acc[id] = element; | ||
return acc; | ||
}, {}); | ||
}; | ||
return StyleSheetRegistry; | ||
*/ _proto.selectFromServer = function selectFromServer() { | ||
var elements = Array.prototype.slice.call(document.querySelectorAll('[id^="__jsx-"]')); | ||
return elements.reduce(function(acc, element) { | ||
var id = element.id.slice(2); | ||
acc[id] = element; | ||
return acc; | ||
}, {}); | ||
}; | ||
return StyleSheetRegistry; | ||
}(); | ||
exports.StyleSheetRegistry = StyleSheetRegistry; | ||
function invariant(condition, message) { | ||
if (!condition) { | ||
throw new Error("StyleSheetRegistry: " + message + "."); | ||
} | ||
if (!condition) { | ||
throw new Error("StyleSheetRegistry: " + message + "."); | ||
} | ||
} | ||
var StyleSheetContext = (0, _react.createContext)(null); | ||
exports.StyleSheetContext = StyleSheetContext; | ||
var StyleSheetContext = /*#__PURE__*/ React.createContext(null); | ||
function createStyleRegistry() { | ||
return new StyleSheetRegistry(); | ||
return new StyleSheetRegistry(); | ||
} | ||
function StyleRegistry(_ref2) { | ||
var configuredRegistry = _ref2.registry, | ||
children = _ref2.children; | ||
var rootRegistry = (0, _react.useContext)(StyleSheetContext); | ||
var _useState = (0, _react.useState)(function () { | ||
return rootRegistry || configuredRegistry || createStyleRegistry(); | ||
}), | ||
registry = _useState[0]; | ||
return _react["default"].createElement(StyleSheetContext.Provider, { | ||
value: registry | ||
}, children); | ||
function StyleRegistry(param) { | ||
var configuredRegistry = param.registry, children = param.children; | ||
var rootRegistry = React.useContext(StyleSheetContext); | ||
var ref = React.useState(function() { | ||
return rootRegistry || configuredRegistry || createStyleRegistry(); | ||
}), registry = ref[0]; | ||
return /*#__PURE__*/ React__default["default"].createElement(StyleSheetContext.Provider, { | ||
value: registry | ||
}, children); | ||
} | ||
function useStyleRegistry() { | ||
return (0, _react.useContext)(StyleSheetContext); | ||
return React.useContext(StyleSheetContext); | ||
} | ||
/***/ }), | ||
// Opt-into the new `useInsertionEffect` API in React 18, fallback to `useLayoutEffect`. | ||
// https://github.com/reactwg/react-18/discussions/110 | ||
var useInsertionEffect = React__default["default"].useInsertionEffect || React__default["default"].useLayoutEffect; | ||
var defaultRegistry = typeof window !== "undefined" ? createStyleRegistry() : undefined; | ||
function JSXStyle(props) { | ||
var registry = defaultRegistry ? defaultRegistry : useStyleRegistry(); | ||
// If `registry` does not exist, we do nothing here. | ||
if (!registry) { | ||
return null; | ||
} | ||
if (typeof window === "undefined") { | ||
registry.add(props); | ||
return null; | ||
} | ||
useInsertionEffect(function() { | ||
registry.add(props); | ||
return function() { | ||
registry.remove(props); | ||
}; | ||
// props.children can be string[], will be striped since id is identical | ||
}, [ | ||
props.id, | ||
String(props.dynamic) | ||
]); | ||
return null; | ||
}JSXStyle.dynamic = function(info) { | ||
return info.map(function(tagInfo) { | ||
var baseId = tagInfo[0]; | ||
var props = tagInfo[1]; | ||
return computeId(baseId, props); | ||
}).join(" "); | ||
}; | ||
/***/ 522: | ||
/***/ (function(module) { | ||
module.exports = require("react"); | ||
/***/ }) | ||
/******/ }); | ||
/************************************************************************/ | ||
/******/ // The module cache | ||
/******/ var __webpack_module_cache__ = {}; | ||
/******/ | ||
/******/ // The require function | ||
/******/ function __nccwpck_require__(moduleId) { | ||
/******/ // Check if module is in cache | ||
/******/ var cachedModule = __webpack_module_cache__[moduleId]; | ||
/******/ if (cachedModule !== undefined) { | ||
/******/ return cachedModule.exports; | ||
/******/ } | ||
/******/ // Create a new module (and put it into the cache) | ||
/******/ var module = __webpack_module_cache__[moduleId] = { | ||
/******/ // no module.id needed | ||
/******/ // no module.loaded needed | ||
/******/ exports: {} | ||
/******/ }; | ||
/******/ | ||
/******/ // Execute the module function | ||
/******/ var threw = true; | ||
/******/ try { | ||
/******/ __webpack_modules__[moduleId](module, module.exports, __nccwpck_require__); | ||
/******/ threw = false; | ||
/******/ } finally { | ||
/******/ if(threw) delete __webpack_module_cache__[moduleId]; | ||
/******/ } | ||
/******/ | ||
/******/ // Return the exports of the module | ||
/******/ return module.exports; | ||
/******/ } | ||
/******/ | ||
/************************************************************************/ | ||
/******/ /* webpack/runtime/compat */ | ||
/******/ | ||
/******/ if (typeof __nccwpck_require__ !== 'undefined') __nccwpck_require__.ab = __dirname + "/"; | ||
/******/ | ||
/************************************************************************/ | ||
var __webpack_exports__ = {}; | ||
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk. | ||
!function() { | ||
var exports = __webpack_exports__; | ||
exports.__esModule = true; | ||
exports.style = exports.useStyleRegistry = exports.createStyleRegistry = exports.StyleRegistry = void 0; | ||
var _stylesheetRegistry = __nccwpck_require__(147); | ||
exports.StyleRegistry = _stylesheetRegistry.StyleRegistry; | ||
exports.createStyleRegistry = _stylesheetRegistry.createStyleRegistry; | ||
exports.useStyleRegistry = _stylesheetRegistry.useStyleRegistry; | ||
var _style = _interopRequireDefault(__nccwpck_require__(449)); | ||
exports.style = _style["default"]; | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } | ||
}(); | ||
module.exports = __webpack_exports__; | ||
/******/ })() | ||
; | ||
exports.StyleRegistry = StyleRegistry; | ||
exports.createStyleRegistry = createStyleRegistry; | ||
exports.style = JSXStyle; | ||
exports.useStyleRegistry = useStyleRegistry; |
{ | ||
"name": "styled-jsx", | ||
"version": "5.0.4", | ||
"version": "5.0.5", | ||
"license": "MIT", | ||
@@ -26,6 +26,6 @@ "repository": "vercel/styled-jsx", | ||
"scripts": { | ||
"build": "rm -rf dist && rm -rf out && babel src --out-dir out && yarn build-babel && yarn build-webpack && yarn build-index", | ||
"build-babel": "ncc build out/babel.js -e react -e babel-plugin-macros --target es5 -o dist/babel", | ||
"build-webpack": "ncc build out/webpack.js -e react -e babel-plugin-macros --target es5 -o dist/webpack", | ||
"build-index": "ncc build out/index.js -e react -e babel-plugin-macros --target es5 -o dist/index", | ||
"build": "rm -rf dist && rm -rf out && yarn build-babel && yarn build-webpack && yarn build-index", | ||
"build-babel": "bunchee src/babel.js -f cjs --runtime node -e react -e babel-plugin-macros -o dist/babel/index.js", | ||
"build-webpack": "bunchee src/webpack.js -f cjs --runtime node -e react -e babel-plugin-macros -o dist/webpack/index.js", | ||
"build-index": "bunchee src/index.js -f cjs --runtime node -o dist/index/index.js", | ||
"test": "ava", | ||
@@ -69,3 +69,3 @@ "lint": "eslint ./src", | ||
"devDependencies": { | ||
"@babel/cli": "7.12.1", | ||
"@babel/cli": "7.18.10", | ||
"@babel/core": "7.12.3", | ||
@@ -82,5 +82,5 @@ "@babel/plugin-proposal-object-rest-spread": "7.12.1", | ||
"@babel/types": "7.15.0", | ||
"@vercel/ncc": "0.33.1", | ||
"ava": "1.2.1", | ||
"ava": "4.3.1", | ||
"babel-plugin-macros": "2.8.0", | ||
"bunchee": "2.0.3", | ||
"convert-source-map": "1.7.0", | ||
@@ -87,0 +87,0 @@ "eslint": "7.32.0", |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Filesystem access
Supply chain riskAccesses the file system, and could potentially read sensitive data.
Found 1 instance in 1 package
High entropy strings
Supply chain riskContains high entropy strings. This could be a sign of encrypted data, leaked secrets or obfuscated code.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Filesystem access
Supply chain riskAccesses the file system, and could potentially read sensitive data.
Found 1 instance in 1 package
High entropy strings
Supply chain riskContains high entropy strings. This could be a sign of encrypted data, leaked secrets or obfuscated code.
Found 1 instance in 1 package
991150
27361
20