@emotion/sheet
Advanced tools
Comparing version 0.8.1 to 0.9.0
@@ -1,2 +0,2 @@ | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.emotionSheet={})}(this,function(e){"use strict";var t=function(){function e(e){this.isSpeedy=void 0===e.speedy||e.speedy,this.maxLength=this.isSpeedy?65e3:1,this.tags=[],this.ctr=0,this.nonce=e.nonce,this.key=e.key,this.container=e.container}var t=e.prototype;return t.insert=function(e){if(this.ctr%this.maxLength==0){var t,n=(s=this,(i=document.createElement("style")).setAttribute("data-emotion",s.key),void 0!==s.nonce&&i.setAttribute("nonce",s.nonce),i.appendChild(document.createTextNode("")),i);t=0===this.tags.length?this.before:this.tags[this.tags.length-1].nextSibling,this.container.insertBefore(n,t),this.tags.push(n)}var s,i,o=this.tags[this.tags.length-1];if(this.isSpeedy){var h=function(e){if(e.sheet)return e.sheet;for(var t=0;t<document.styleSheets.length;t++)if(document.styleSheets[t].ownerNode===e)return document.styleSheets[t]}(o);try{h.insertRule(e,h.cssRules.length)}catch(e){}}else o.appendChild(document.createTextNode(e));this.ctr++},t.flush=function(){this.tags.forEach(function(e){return e.parentNode.removeChild(e)}),this.tags=[],this.ctr=0},e}();e.StyleSheet=t,Object.defineProperty(e,"__esModule",{value:!0})}); | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.emotionSheet={})}(this,function(e){"use strict";var t=function(){function e(e){this.isSpeedy=void 0===e.speedy||e.speedy,this.tags=[],this.ctr=0,this.nonce=e.nonce,this.key=e.key,this.container=e.container}var t=e.prototype;return t.insert=function(e){if(this.ctr%(this.isSpeedy?65e3:1)==0){var t,n=(s=this,(i=document.createElement("style")).setAttribute("data-emotion",s.key),void 0!==s.nonce&&i.setAttribute("nonce",s.nonce),i.appendChild(document.createTextNode("")),i);t=0===this.tags.length?this.before:this.tags[this.tags.length-1].nextSibling,this.container.insertBefore(n,t),this.tags.push(n)}var s,i,o=this.tags[this.tags.length-1];if(this.isSpeedy){var r=function(e){if(e.sheet)return e.sheet;for(var t=0;t<document.styleSheets.length;t++)if(document.styleSheets[t].ownerNode===e)return document.styleSheets[t]}(o);try{var h=105===e.charCodeAt(1)&&64===e.charCodeAt(0);r.insertRule(e,h?0:r.cssRules.length)}catch(e){}}else o.appendChild(document.createTextNode(e));this.ctr++},t.flush=function(){this.tags.forEach(function(e){return e.parentNode.removeChild(e)}),this.tags=[],this.ctr=0},e}();e.StyleSheet=t,Object.defineProperty(e,"__esModule",{value:!0})}); | ||
//# sourceMappingURL=index.min.js.map |
@@ -7,2 +7,4 @@ 'use strict'; | ||
Based off glamor's StyleSheet, thanks Sunil ❤️ | ||
high performance StyleSheet for css-in-js systems | ||
@@ -12,11 +14,8 @@ | ||
- uses `insertRule` for appending in production for *much* faster performance | ||
- 'polyfills' on server side | ||
// usage | ||
import StyleSheet from 'glamor/lib/sheet' | ||
let styleSheet = new StyleSheet() | ||
import { StyleSheet } from '@emotion/sheet' | ||
styleSheet.inject() | ||
- 'injects' the stylesheet into the page (or into memory if on server) | ||
let styleSheet = new StyleSheet({ key: '', container: document.head }) | ||
@@ -64,7 +63,3 @@ styleSheet.insert('#box { border: 1px solid red; }') | ||
function StyleSheet(options) { | ||
this.isSpeedy = options.speedy === undefined ? process.env.NODE_ENV === 'production' : options.speedy; // maxLength is how many rules we have per style tag, it's 65000 in speedy mode | ||
// it's 1 in dev because we insert source maps that map a single rule to a location | ||
// and you can only have one source map per style tag | ||
this.maxLength = this.isSpeedy ? 65000 : 1; | ||
this.isSpeedy = options.speedy === undefined ? process.env.NODE_ENV === 'production' : options.speedy; | ||
this.tags = []; | ||
@@ -81,3 +76,6 @@ this.ctr = 0; | ||
_proto.insert = function insert(rule) { | ||
if (this.ctr % this.maxLength === 0) { | ||
// the max length is how many rules we have per style tag, it's 65000 in speedy mode | ||
// it's 1 in dev because we insert source maps that map a single rule to a location | ||
// and you can only have one source map per style tag | ||
if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) { | ||
var _tag = createStyleElement(this); | ||
@@ -103,5 +101,19 @@ | ||
try { | ||
// this is the ultrafast version, works across browsers | ||
// this is a really hot path | ||
// we check the second character first because having "i" | ||
// as the second character will happen less often than | ||
// having "@" as the first character | ||
var isImportRule = rule.charCodeAt(1) === 105 && rule.charCodeAt(0) === 64; // this is the ultrafast version, works across browsers | ||
// the big drawback is that the css won't be editable in devtools | ||
sheet.insertRule(rule, sheet.cssRules.length); | ||
sheet.insertRule(rule, // we need to insert @import rules before anything else | ||
// otherwise there will be an error | ||
// technically this means that the @import rules will | ||
// _usually_(not always since there could be multiple style tags) | ||
// be the first ones in prod and generally later in dev | ||
// this shouldn't really matter in the real world though | ||
// @import is generally only used for font faces from google fonts and etc. | ||
// so while this could be technically correct then it would be slower and larger | ||
// for a tiny bit of correctness that won't matter in the real world | ||
isImportRule ? 0 : sheet.cssRules.length); | ||
} catch (e) { | ||
@@ -108,0 +120,0 @@ if (process.env.NODE_ENV !== 'production') { |
/* | ||
Based off glamor's StyleSheet, thanks Sunil ❤️ | ||
high performance StyleSheet for css-in-js systems | ||
@@ -7,11 +9,8 @@ | ||
- uses `insertRule` for appending in production for *much* faster performance | ||
- 'polyfills' on server side | ||
// usage | ||
import StyleSheet from 'glamor/lib/sheet' | ||
let styleSheet = new StyleSheet() | ||
import { StyleSheet } from '@emotion/sheet' | ||
styleSheet.inject() | ||
- 'injects' the stylesheet into the page (or into memory if on server) | ||
let styleSheet = new StyleSheet({ key: '', container: document.head }) | ||
@@ -59,7 +58,3 @@ styleSheet.insert('#box { border: 1px solid red; }') | ||
function StyleSheet(options) { | ||
this.isSpeedy = options.speedy === undefined ? process.env.NODE_ENV === 'production' : options.speedy; // maxLength is how many rules we have per style tag, it's 65000 in speedy mode | ||
// it's 1 in dev because we insert source maps that map a single rule to a location | ||
// and you can only have one source map per style tag | ||
this.maxLength = this.isSpeedy ? 65000 : 1; | ||
this.isSpeedy = options.speedy === undefined ? process.env.NODE_ENV === 'production' : options.speedy; | ||
this.tags = []; | ||
@@ -76,3 +71,6 @@ this.ctr = 0; | ||
_proto.insert = function insert(rule) { | ||
if (this.ctr % this.maxLength === 0) { | ||
// the max length is how many rules we have per style tag, it's 65000 in speedy mode | ||
// it's 1 in dev because we insert source maps that map a single rule to a location | ||
// and you can only have one source map per style tag | ||
if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) { | ||
var _tag = createStyleElement(this); | ||
@@ -98,5 +96,19 @@ | ||
try { | ||
// this is the ultrafast version, works across browsers | ||
// this is a really hot path | ||
// we check the second character first because having "i" | ||
// as the second character will happen less often than | ||
// having "@" as the first character | ||
var isImportRule = rule.charCodeAt(1) === 105 && rule.charCodeAt(0) === 64; // this is the ultrafast version, works across browsers | ||
// the big drawback is that the css won't be editable in devtools | ||
sheet.insertRule(rule, sheet.cssRules.length); | ||
sheet.insertRule(rule, // we need to insert @import rules before anything else | ||
// otherwise there will be an error | ||
// technically this means that the @import rules will | ||
// _usually_(not always since there could be multiple style tags) | ||
// be the first ones in prod and generally later in dev | ||
// this shouldn't really matter in the real world though | ||
// @import is generally only used for font faces from google fonts and etc. | ||
// so while this could be technically correct then it would be slower and larger | ||
// for a tiny bit of correctness that won't matter in the real world | ||
isImportRule ? 0 : sheet.cssRules.length); | ||
} catch (e) { | ||
@@ -103,0 +115,0 @@ if (process.env.NODE_ENV !== 'production') { |
'use strict'; | ||
Object.defineProperty(exports, '__esModule', { value: true }); | ||
/* | ||
high performance StyleSheet for css-in-js systems | ||
- uses multiple style tags behind the scenes for millions of rules | ||
- uses `insertRule` for appending in production for *much* faster performance | ||
- 'polyfills' on server side | ||
// usage | ||
import StyleSheet from 'glamor/lib/sheet' | ||
let styleSheet = new StyleSheet() | ||
styleSheet.inject() | ||
- 'injects' the stylesheet into the page (or into memory if on server) | ||
styleSheet.insert('#box { border: 1px solid red; }') | ||
- appends a css rule into the stylesheet | ||
styleSheet.flush() | ||
- empties the stylesheet of all its contents | ||
*/ | ||
// $FlowFixMe | ||
function sheetForTag(tag) { | ||
if (tag.sheet) { | ||
// $FlowFixMe | ||
return tag.sheet; | ||
} // this weirdness brought to you by firefox | ||
/* istanbul ignore next */ | ||
for (var i = 0; i < document.styleSheets.length; i++) { | ||
if (document.styleSheets[i].ownerNode === tag) { | ||
// $FlowFixMe | ||
return document.styleSheets[i]; | ||
} | ||
} | ||
if (process.env.NODE_ENV === 'production') { | ||
module.exports = require('./sheet.cjs.prod.js'); | ||
} else { | ||
module.exports = require('./sheet.cjs.dev.js'); | ||
} | ||
function createStyleElement(options) { | ||
var tag = document.createElement('style'); | ||
tag.setAttribute('data-emotion', options.key); | ||
if (options.nonce !== undefined) { | ||
tag.setAttribute('nonce', options.nonce); | ||
} | ||
tag.appendChild(document.createTextNode('')); | ||
return tag; | ||
} | ||
var StyleSheet = | ||
/*#__PURE__*/ | ||
function () { | ||
function StyleSheet(options) { | ||
this.isSpeedy = options.speedy === undefined ? process.env.NODE_ENV === 'production' : options.speedy; // maxLength is how many rules we have per style tag, it's 65000 in speedy mode | ||
// it's 1 in dev because we insert source maps that map a single rule to a location | ||
// and you can only have one source map per style tag | ||
this.maxLength = this.isSpeedy ? 65000 : 1; | ||
this.tags = []; | ||
this.ctr = 0; | ||
this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets | ||
this.key = options.key; | ||
this.container = options.container; | ||
} | ||
var _proto = StyleSheet.prototype; | ||
_proto.insert = function insert(rule) { | ||
if (this.ctr % this.maxLength === 0) { | ||
var _tag = createStyleElement(this); | ||
var before; | ||
if (this.tags.length === 0) { | ||
before = this.before; | ||
} else { | ||
before = this.tags[this.tags.length - 1].nextSibling; | ||
} | ||
this.container.insertBefore(_tag, before); | ||
this.tags.push(_tag); | ||
} | ||
var tag = this.tags[this.tags.length - 1]; | ||
if (this.isSpeedy) { | ||
var sheet = sheetForTag(tag); | ||
try { | ||
// this is the ultrafast version, works across browsers | ||
// the big drawback is that the css won't be editable in devtools | ||
sheet.insertRule(rule, sheet.cssRules.length); | ||
} catch (e) { | ||
if (process.env.NODE_ENV !== 'production') { | ||
console.warn("There was a problem inserting the following rule: \"" + rule + "\"", e); | ||
} | ||
} | ||
} else { | ||
tag.appendChild(document.createTextNode(rule)); | ||
} | ||
this.ctr++; | ||
}; | ||
_proto.flush = function flush() { | ||
// $FlowFixMe | ||
this.tags.forEach(function (tag) { | ||
return tag.parentNode.removeChild(tag); | ||
}); | ||
this.tags = []; | ||
this.ctr = 0; | ||
}; | ||
return StyleSheet; | ||
}(); | ||
exports.StyleSheet = StyleSheet; |
/* | ||
Based off glamor's StyleSheet, thanks Sunil ❤️ | ||
high performance StyleSheet for css-in-js systems | ||
@@ -7,11 +9,8 @@ | ||
- uses `insertRule` for appending in production for *much* faster performance | ||
- 'polyfills' on server side | ||
// usage | ||
import StyleSheet from 'glamor/lib/sheet' | ||
let styleSheet = new StyleSheet() | ||
import { StyleSheet } from '@emotion/sheet' | ||
styleSheet.inject() | ||
- 'injects' the stylesheet into the page (or into memory if on server) | ||
let styleSheet = new StyleSheet({ key: '', container: document.head }) | ||
@@ -59,7 +58,3 @@ styleSheet.insert('#box { border: 1px solid red; }') | ||
function StyleSheet(options) { | ||
this.isSpeedy = options.speedy === undefined ? process.env.NODE_ENV === 'production' : options.speedy; // maxLength is how many rules we have per style tag, it's 65000 in speedy mode | ||
// it's 1 in dev because we insert source maps that map a single rule to a location | ||
// and you can only have one source map per style tag | ||
this.maxLength = this.isSpeedy ? 65000 : 1; | ||
this.isSpeedy = options.speedy === undefined ? process.env.NODE_ENV === 'production' : options.speedy; | ||
this.tags = []; | ||
@@ -76,3 +71,6 @@ this.ctr = 0; | ||
_proto.insert = function insert(rule) { | ||
if (this.ctr % this.maxLength === 0) { | ||
// the max length is how many rules we have per style tag, it's 65000 in speedy mode | ||
// it's 1 in dev because we insert source maps that map a single rule to a location | ||
// and you can only have one source map per style tag | ||
if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) { | ||
var _tag = createStyleElement(this); | ||
@@ -98,5 +96,19 @@ | ||
try { | ||
// this is the ultrafast version, works across browsers | ||
// this is a really hot path | ||
// we check the second character first because having "i" | ||
// as the second character will happen less often than | ||
// having "@" as the first character | ||
var isImportRule = rule.charCodeAt(1) === 105 && rule.charCodeAt(0) === 64; // this is the ultrafast version, works across browsers | ||
// the big drawback is that the css won't be editable in devtools | ||
sheet.insertRule(rule, sheet.cssRules.length); | ||
sheet.insertRule(rule, // we need to insert @import rules before anything else | ||
// otherwise there will be an error | ||
// technically this means that the @import rules will | ||
// _usually_(not always since there could be multiple style tags) | ||
// be the first ones in prod and generally later in dev | ||
// this shouldn't really matter in the real world though | ||
// @import is generally only used for font faces from google fonts and etc. | ||
// so while this could be technically correct then it would be slower and larger | ||
// for a tiny bit of correctness that won't matter in the real world | ||
isImportRule ? 0 : sheet.cssRules.length); | ||
} catch (e) { | ||
@@ -103,0 +115,0 @@ if (process.env.NODE_ENV !== 'production') { |
{ | ||
"name": "@emotion/sheet", | ||
"version": "0.8.1", | ||
"version": "0.9.0", | ||
"description": "emotion's stylesheet", | ||
@@ -16,3 +16,3 @@ "main": "dist/sheet.cjs.js", | ||
}, | ||
"repository": "https://github.com/emotion-js/emotion/tree/master/next-packages/sheet", | ||
"repository": "https://github.com/emotion-js/emotion/tree/master/packages/sheet", | ||
"publishConfig": { | ||
@@ -23,3 +23,4 @@ "access": "public" | ||
"src", | ||
"dist" | ||
"dist", | ||
"types" | ||
], | ||
@@ -29,4 +30,3 @@ "umd:main": "./dist/index.min.js", | ||
"dtslint": "^0.3.0" | ||
}, | ||
"gitHead": "94fed7652759a0f1962da66b922299398e39fe4d" | ||
} | ||
} |
// @flow | ||
/* | ||
Based off glamor's StyleSheet, thanks Sunil ❤️ | ||
high performance StyleSheet for css-in-js systems | ||
@@ -8,11 +10,8 @@ | ||
- uses `insertRule` for appending in production for *much* faster performance | ||
- 'polyfills' on server side | ||
// usage | ||
import StyleSheet from 'glamor/lib/sheet' | ||
let styleSheet = new StyleSheet() | ||
import { StyleSheet } from '@emotion/sheet' | ||
styleSheet.inject() | ||
- 'injects' the stylesheet into the page (or into memory if on server) | ||
let styleSheet = new StyleSheet({ key: '', container: document.head }) | ||
@@ -48,4 +47,3 @@ styleSheet.insert('#box { border: 1px solid red; }') | ||
container: HTMLElement, | ||
speedy?: boolean, | ||
maxLength?: number | ||
speedy?: boolean | ||
} | ||
@@ -71,3 +69,2 @@ | ||
container: HTMLElement | ||
maxLength: number | ||
key: string | ||
@@ -81,6 +78,2 @@ nonce: string | void | ||
: options.speedy | ||
// maxLength is how many rules we have per style tag, it's 65000 in speedy mode | ||
// it's 1 in dev because we insert source maps that map a single rule to a location | ||
// and you can only have one source map per style tag | ||
this.maxLength = this.isSpeedy ? 65000 : 1 | ||
this.tags = [] | ||
@@ -94,3 +87,6 @@ this.ctr = 0 | ||
insert(rule: string) { | ||
if (this.ctr % this.maxLength === 0) { | ||
// the max length is how many rules we have per style tag, it's 65000 in speedy mode | ||
// it's 1 in dev because we insert source maps that map a single rule to a location | ||
// and you can only have one source map per style tag | ||
if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) { | ||
let tag = createStyleElement(this) | ||
@@ -111,5 +107,23 @@ let before | ||
try { | ||
// this is a really hot path | ||
// we check the second character first because having "i" | ||
// as the second character will happen less often than | ||
// having "@" as the first character | ||
let isImportRule = | ||
rule.charCodeAt(1) === 105 && rule.charCodeAt(0) === 64 | ||
// this is the ultrafast version, works across browsers | ||
// the big drawback is that the css won't be editable in devtools | ||
sheet.insertRule(rule, sheet.cssRules.length) | ||
sheet.insertRule( | ||
rule, | ||
// we need to insert @import rules before anything else | ||
// otherwise there will be an error | ||
// technically this means that the @import rules will | ||
// _usually_(not always since there could be multiple style tags) | ||
// be the first ones in prod and generally later in dev | ||
// this shouldn't really matter in the real world though | ||
// @import is generally only used for font faces from google fonts and etc. | ||
// so while this could be technically correct then it would be slower and larger | ||
// for a tiny bit of correctness that won't matter in the real world | ||
isImportRule ? 0 : sheet.cssRules.length | ||
) | ||
} catch (e) { | ||
@@ -116,0 +130,0 @@ if (process.env.NODE_ENV !== 'production') { |
Sorry, the diff of this file is not supported yet
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
35610
16
730
2