Socket
Socket
Sign inDemoInstall

styled-jsx

Package Overview
Dependencies
Maintainers
3
Versions
121
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

styled-jsx - npm Package Compare versions

Comparing version 5.0.4 to 5.0.5

2

babel.js

@@ -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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc