forked from emotion-js/emotion
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
146 lines (131 loc) · 4.36 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
// @flow
/*
Based off glamor's StyleSheet, thanks Sunil ❤️
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
// usage
import { StyleSheet } from '@emotion/sheet'
let styleSheet = new StyleSheet({ key: '', container: document.head })
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: HTMLStyleElement): CSSStyleSheet {
if (tag.sheet) {
// $FlowFixMe
return tag.sheet
}
// this weirdness brought to you by firefox
/* istanbul ignore next */
for (let i = 0; i < document.styleSheets.length; i++) {
if (document.styleSheets[i].ownerNode === tag) {
// $FlowFixMe
return document.styleSheets[i]
}
}
}
export type Options = {
nonce?: string,
key: string,
container: HTMLElement,
speedy?: boolean,
prepend?: boolean
}
function createStyleElement(options: {
key: string,
nonce: string | void
}): HTMLStyleElement {
let 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
}
export class StyleSheet {
isSpeedy: boolean
ctr: number
tags: HTMLStyleElement[]
container: HTMLElement
key: string
nonce: string | void
prepend: boolean | void
before: Element | null
constructor(options: Options) {
this.isSpeedy =
options.speedy === undefined
? process.env.NODE_ENV === 'production'
: options.speedy
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
this.prepend = options.prepend
this.before = null
}
insert(rule: string) {
// 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)
let before
if (this.tags.length === 0) {
before = this.prepend ? this.container.firstChild : this.before
} else {
before = this.tags[this.tags.length - 1].nextSibling
}
this.container.insertBefore(tag, before)
this.tags.push(tag)
}
const tag = this.tags[this.tags.length - 1]
if (this.isSpeedy) {
const sheet = sheetForTag(tag)
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,
// 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) {
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++
}
flush() {
// $FlowFixMe
this.tags.forEach(tag => tag.parentNode.removeChild(tag))
this.tags = []
this.ctr = 0
}
}