/packages/server/src"
34 | }
35 | },
36 | "devDependencies": {
37 | "babel-core": "^6.26.0",
38 | "babel-eslint": "^7.2.3",
39 | "babel-macros": "^0.5.2",
40 | "babel-preset-env": "^1.6.0",
41 | "babel-preset-flow": "^6.23.0",
42 | "babel-preset-react": "^6.24.1",
43 | "babel-preset-stage-0": "^6.24.1",
44 | "bundlesize": "^0.13.2",
45 | "codecov": "^2.3.0",
46 | "enzyme": "^2.9.1",
47 | "enzyme-to-json": "^1.5.1",
48 | "eslint": "^4.3.0",
49 | "eslint-config-prettier": "^2.3.0",
50 | "eslint-config-react": "^1.1.7",
51 | "eslint-config-standard": "^10.2.1",
52 | "eslint-config-standard-react": "^5.0.0",
53 | "eslint-plugin-import": "^2.7.0",
54 | "eslint-plugin-node": "^5.1.1",
55 | "eslint-plugin-prettier": "^2.1.2",
56 | "eslint-plugin-promise": "^3.5.0",
57 | "eslint-plugin-react": "^7.1.0",
58 | "eslint-plugin-standard": "^3.0.1",
59 | "jest": "^20.0.4",
60 | "jest-glamor-react": "^3.1.0",
61 | "lerna": "^2.1.0",
62 | "npm-run-all": "^4.0.2",
63 | "prettier": "^1.6.1",
64 | "react": "^15.6.1",
65 | "react-dom": "^15.6.1",
66 | "react-test-renderer": "^15.6.1",
67 | "rollup": "^0.48.2",
68 | "rollup-plugin-alias": "^1.3.1",
69 | "rollup-plugin-babel": "^3.0.2",
70 | "rollup-plugin-commonjs": "^8.2.0",
71 | "rollup-plugin-node-resolve": "^3.0.0",
72 | "rollup-plugin-replace": "^1.1.1",
73 | "rollup-plugin-uglify": "^2.0.1"
74 | },
75 | "bundlesize": [
76 | {
77 | "path": "./packages/core/dist/DO-NOT-USE.min.js",
78 | "threshold": "6 Kb"
79 | },
80 | {
81 | "path": "./packages/react/dist/DO-NOT-USE.min.js",
82 | "threshold": "7 Kb"
83 | }
84 | ]
85 | }
86 |
--------------------------------------------------------------------------------
/packages/benchmarks/tests/renderTweet.js:
--------------------------------------------------------------------------------
1 | import createRenderBenchmark from '../createRenderBenchmark'
2 | import Tweet from '../src/components/Tweet'
3 | import React from 'react'
4 |
5 | const tweet1 = {
6 | favorite_count: 30,
7 | favorited: true,
8 | id: '834889712556875776',
9 | lang: 'en',
10 | retweet_count: 6,
11 | retweeted: false,
12 | textParts: [
13 | {
14 | prefix: '',
15 | text: 'Living burrito to burrito '
16 | },
17 | {
18 | emoji: 'https://abs-0.twimg.com/emoji/v2/svg/1f32f.svg',
19 | isEmoji: true,
20 | prefix: '',
21 | text: '🌯'
22 | },
23 | {
24 | emoji: 'https://abs-0.twimg.com/emoji/v2/svg/1f32f.svg',
25 | isEmoji: true,
26 | prefix: '',
27 | text: '🌯'
28 | },
29 | {
30 | emoji: 'https://abs-0.twimg.com/emoji/v2/svg/1f32f.svg',
31 | isEmoji: true,
32 | prefix: '',
33 | text: '🌯'
34 | }
35 | ],
36 | timestamp: 'Feb 23',
37 | user: {
38 | fullName: 'Nicolas',
39 | screenName: 'necolas',
40 | profileImageUrl:
41 | 'https://pbs.twimg.com/profile_images/804365942360719360/dQnPejph_normal.jpg'
42 | }
43 | }
44 |
45 | const tweet2 = {
46 | favorite_count: 84,
47 | favorited: false,
48 | id: '730896800060579840',
49 | lang: 'en',
50 | media: {
51 | source: {
52 | uri: 'https://pbs.twimg.com/media/CiSqvsJVEAAtLZ1.jpg',
53 | width: 600,
54 | height: 338
55 | }
56 | },
57 | retweet_count: 4,
58 | retweeted: true,
59 | textParts: [
60 | {
61 | prefix: '',
62 | text: 'Presenting '
63 | },
64 | {
65 | displayUrl: 'mobile.twitter.com',
66 | expandedUrl: 'https://mobile.twitter.com',
67 | isEntity: true,
68 | isUrl: true,
69 | linkRelation: 'nofollow',
70 | prefix: '',
71 | text: '',
72 | textDirection: 'ltr',
73 | url: 'https://t.co/4hRCAxiUUG'
74 | },
75 | {
76 | prefix: '',
77 | text: ' with '
78 | },
79 | {
80 | isEntity: true,
81 | isMention: true,
82 | prefix: '@',
83 | text: 'davidbellona',
84 | textDirection: 'ltr',
85 | url: '/davidbellona'
86 | },
87 | {
88 | prefix: '',
89 | text: " at Twitter's all hands meeting "
90 | }
91 | ],
92 | timestamp: 'May 12',
93 | user: {
94 | fullName: 'Nicolas',
95 | screenName: 'necolas',
96 | profileImageUrl:
97 | 'https://pbs.twimg.com/profile_images/804365942360719360/dQnPejph_normal.jpg'
98 | }
99 | }
100 |
101 | const renderTweet = label =>
102 | createRenderBenchmark({
103 | name: `Tweet [${label}]`,
104 | runs: 10,
105 | getElement() {
106 | return (
107 |
108 |
109 |
110 |
111 | )
112 | }
113 | })
114 |
115 | export default renderTweet
116 |
--------------------------------------------------------------------------------
/packages/core/src/index.js:
--------------------------------------------------------------------------------
1 | import hashString from './hash'
2 | import StyleSheet from './sheet'
3 | import Stylis from './stylis'
4 |
5 | const stylis = new Stylis()
6 |
7 | export const sheet = new StyleSheet()
8 |
9 | sheet.inject()
10 |
11 | export const registered = {}
12 |
13 | export const inserted = {}
14 |
15 | function plugin(context, content, selector, parent) {
16 | switch (context) {
17 | // on property declaration
18 | case 1:
19 | return registered[content]
20 | // after a selector block
21 | case 2: {
22 | if (parent.length !== 0 && parent[0] === selector[0]) {
23 | break
24 | }
25 | }
26 | // after an at rule block
27 | case 3: // eslint-disable-line no-fallthrough
28 | sheet.insert(`${selector.join(',')}{${content}}`)
29 | }
30 | }
31 |
32 | stylis.use(plugin)
33 |
34 | const hyphenateRegex = /[A-Z]|^ms/g
35 |
36 | function flatten(inArr) {
37 | let arr = []
38 | inArr.forEach(val => {
39 | if (Array.isArray(val)) arr = arr.concat(flatten(val))
40 | else arr = arr.concat(val)
41 | })
42 |
43 | return arr
44 | }
45 |
46 | function handleInterpolation(interpolation) {
47 | if (typeof interpolation === 'object') {
48 | return createStringFromObject(interpolation)
49 | }
50 | return interpolation
51 | }
52 |
53 | function createStringFromObject(obj) {
54 | let string = ''
55 |
56 | if (Array.isArray(obj)) {
57 | flatten(obj).forEach(interpolation => {
58 | string += handleInterpolation(interpolation)
59 | })
60 | } else {
61 | Object.keys(obj).forEach(key => {
62 | if (typeof obj[key] === 'string') {
63 | string += `${key.replace(hyphenateRegex, '-$&').toLowerCase()}:${obj[
64 | key
65 | ]};`
66 | } else {
67 | string += `${key}{${createStringFromObject(obj[key])}}`
68 | }
69 | })
70 | }
71 | return string
72 | }
73 |
74 | function createCss(strings, ...interpolations) {
75 | let thing = strings[0] || ''
76 | interpolations.forEach((interpolation, i) => {
77 | if (typeof interpolation === 'string') {
78 | thing += interpolation
79 | } else if (typeof interpolation === 'object') {
80 | thing += createStringFromObject(interpolation)
81 | }
82 | thing += strings[i + 1]
83 | })
84 | return thing
85 | }
86 |
87 | export function css(...args) {
88 | const thing = createCss(...args)
89 | const hash = hashString(thing)
90 | const cls = `css-${hash}`
91 | if (registered[cls] === undefined) {
92 | registered[cls] = thing
93 | }
94 | if (inserted[cls] === undefined) {
95 | stylis(`.${cls}`, thing)
96 | inserted[cls] = true
97 | }
98 | return cls
99 | }
100 |
101 | export function injectGlobal(...args) {
102 | const thing = createCss(...args)
103 | const hash = hashString(thing)
104 | if (inserted[hash] === undefined) {
105 | stylis('', thing)
106 | inserted[hash] = true
107 | }
108 | }
109 |
110 | export function hydrate(ids) {
111 | ids.forEach(id => {
112 | inserted[id] = true
113 | })
114 | }
115 |
--------------------------------------------------------------------------------
/packages/react/src/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'react'
2 | import { css } from 'new-css-in-js'
3 |
4 | export * from 'new-css-in-js'
5 |
6 | // use babel-plugin-codegen to make this later
7 | const reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|accept|acceptCharset|accessKey|action|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|default|defer|dir|disabled|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|itemProp|itemScope|itemType|itemID|itemRef|results|security|unselectable)|(on[A-Z].*)|((data|aria)-.*))$/
8 |
9 | const testOmitPropsOnStringTag = key => reactPropsRegex.test(key)
10 | const testOmitPropsOnComponent = key => key !== 'theme' && key !== 'innerRef'
11 |
12 | const omitAssign = function(testFn, target) {
13 | let i = 2
14 | let length = arguments.length
15 | for (; i < length; i++) {
16 | let source = arguments[i]
17 | let key
18 | for (key in source) {
19 | if (testFn(key)) {
20 | target[key] = source[key]
21 | }
22 | }
23 | }
24 | return target
25 | }
26 |
27 | export default function(tag) {
28 | return (initialStrings, ...initialInterpolations) => {
29 | const baseTag = tag.__emotion_base || tag
30 |
31 | const omitFn =
32 | typeof baseTag === 'string'
33 | ? testOmitPropsOnStringTag
34 | : testOmitPropsOnComponent
35 | const strings =
36 | tag.__emotion_strings !== undefined
37 | ? tag.__emotion_strings.concat(initialStrings)
38 | : initialStrings
39 | const interpolations =
40 | tag.__emotion_interp !== undefined
41 | ? tag.__emotion_interp.concat([';'], initialInterpolations)
42 | : initialInterpolations
43 | const Styled = (props, context) => {
44 | let className = css(
45 | strings,
46 | ...interpolations.map(v => {
47 | if (typeof v === 'function') {
48 | return v(props, context)
49 | }
50 | return v
51 | })
52 | )
53 | if (props.className) {
54 | className += ` ${props.className}`
55 | }
56 |
57 | return createElement(
58 | baseTag,
59 | omitAssign(omitFn, {}, props, { className, ref: props.innerRef })
60 | )
61 | }
62 | Styled.__emotion_strings = strings
63 | Styled.__emotion_interp = interpolations
64 | Styled.__emotion_base = baseTag
65 | return Styled
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
6 |
7 | ## Our Standards
8 |
9 | Examples of behavior that contributes to creating a positive environment include:
10 |
11 | * Using welcoming and inclusive language
12 | * Being respectful of differing viewpoints and experiences
13 | * Gracefully accepting constructive criticism
14 | * Focusing on what is best for the community
15 | * Showing empathy towards other community members
16 |
17 | Examples of unacceptable behavior by participants include:
18 |
19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances
20 | * Trolling, insulting/derogatory comments, and personal or political attacks
21 | * Public or private harassment
22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission
23 | * Other conduct which could reasonably be considered inappropriate in a professional setting
24 |
25 | ## Our Responsibilities
26 |
27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
28 |
29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
30 |
31 | ## Scope
32 |
33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
34 |
35 | ## Enforcement
36 |
37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at mitchell@mitchellhamilton.me. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
38 |
39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
40 |
41 | ## Attribution
42 |
43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
44 |
45 | [homepage]: http://contributor-covenant.org
46 | [version]: http://contributor-covenant.org/version/1/4/
47 |
--------------------------------------------------------------------------------
/packages/benchmarks/src/components/TweetTextPart/index.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/prop-types */
2 | import { Image, StyleSheet, Text } from 'react-native'
3 | import PropTypes from 'prop-types'
4 | import React from 'react'
5 | import theme from '../theme'
6 |
7 | const createTextEntity = ({ part }) => (
8 | {`${part.prefix}${part.text}`}
9 | )
10 |
11 | const createTwemojiEntity = ({ part }) => (
12 |
18 | )
19 |
20 | // @mention, #hashtag, $cashtag
21 | const createSymbolEntity = ({ displayMode, part }) => {
22 | const links = displayMode === 'links'
23 | return (
24 |
29 | {`${part.prefix}${part.text}`}
30 |
31 | )
32 | }
33 |
34 | // internal links
35 | const createLinkEntity = ({ displayMode, part }) => {
36 | const { displayUrl, linkRelation, url } = part
37 | const links = displayMode === 'links'
38 |
39 | return (
40 |
46 | {displayUrl}
47 |
48 | )
49 | }
50 |
51 | // external links
52 | const createExternalLinkEntity = ({ displayMode, part }) => {
53 | const { displayUrl, linkRelation, url } = part
54 | const links = displayMode === 'links'
55 |
56 | return (
57 |
64 | {displayUrl}
65 |
66 | )
67 | }
68 |
69 | class TweetTextPart extends React.Component {
70 | static displayName = 'TweetTextPart'
71 |
72 | static propTypes = {
73 | displayMode: PropTypes.oneOf(['links', 'no-links']),
74 | part: PropTypes.object
75 | }
76 |
77 | static defaultProps = {
78 | displayMode: 'links'
79 | }
80 |
81 | render() {
82 | let renderer
83 | const {
84 | isEmoji,
85 | isEntity,
86 | isHashtag,
87 | isMention,
88 | isMedia,
89 | isUrl
90 | } = this.props.part
91 |
92 | if (isEmoji || isEntity || isUrl || isMedia) {
93 | if (isUrl) {
94 | renderer = createExternalLinkEntity
95 | } else if (isHashtag || isMention) {
96 | renderer = createSymbolEntity
97 | } else if (isEmoji) {
98 | renderer = createTwemojiEntity
99 | } else {
100 | renderer = createLinkEntity
101 | }
102 | } else {
103 | renderer = createTextEntity
104 | }
105 |
106 | return renderer(this.props)
107 | }
108 | }
109 |
110 | const styles = StyleSheet.create({
111 | link: {
112 | color: theme.colors.blue,
113 | textDecorationLine: 'none',
114 | unicodeBidi: 'embed'
115 | },
116 | twemoji: {
117 | display: 'inline-block',
118 | height: '1.25em',
119 | width: '1.25em',
120 | paddingRight: '0.05em',
121 | paddingLeft: '0.1em',
122 | verticalAlign: '-0.2em'
123 | }
124 | })
125 |
126 | export default TweetTextPart
127 |
--------------------------------------------------------------------------------
/packages/core/__tests__/__snapshots__/css.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`css @supports 1`] = `
4 | @supports (display:grid) {
5 | .glamor-0 {
6 | display: grid;
7 | }
8 | }
9 |
10 |
13 | `;
14 |
15 | exports[`css css variables 1`] = `
16 | .glamor-0 {
17 | --some-var: 1px;
18 | width: var(--some-var);
19 | }
20 |
21 |
24 | `;
25 |
26 | exports[`css empty rule 1`] = `
27 |
30 | `;
31 |
32 | exports[`css float property 1`] = `
33 | .glamor-0 {
34 | float: left;
35 | }
36 |
37 |
40 | `;
41 |
42 | exports[`css handles more than 10 dynamic properties 1`] = `
43 | .glamor-0 {
44 | text-decoration: underline;
45 | border-right: solid blue 54px;
46 | background: white;
47 | color: black;
48 | display: block;
49 | border-radius: 3px;
50 | padding: 25px;
51 | width: 500px;
52 | z-index: ;
53 | font-size: 18px;
54 | text-align: center;
55 | }
56 |
57 |
60 | `;
61 |
62 | exports[`css nested 1`] = `
63 | .glamor-0 .some-class .some-other-class {
64 | background-color: hotpink;
65 | }
66 |
67 | .glamor-0 .some-class {
68 | display: -webkit-box;
69 | display: -webkit-flex;
70 | display: -ms-flexbox;
71 | display: flex;
72 | }
73 |
74 | .glamor-0 {
75 | color: yellow;
76 | }
77 |
78 | @media (max-width:600px) {
79 | .glamor-0 .some-class {
80 | background-color: pink;
81 | }
82 | }
83 |
84 |
95 | `;
96 |
97 | exports[`css nested at rules 1`] = `
98 | @supports (display:flex) {
99 | .glamor-0 {
100 | display: -webkit-box;
101 | display: -webkit-flex;
102 | display: -ms-flexbox;
103 | display: flex;
104 | }
105 | }
106 |
107 | @supports (display:grid) {
108 | .glamor-0 {
109 | display: grid;
110 | }
111 | }
112 |
113 | @media (max-width:500px) {
114 | .glamor-0 {
115 | color: hotpink;
116 | }
117 | }
118 |
119 | @media (min-width:420px) {
120 | .glamor-0 {
121 | color: pink;
122 | }
123 | }
124 |
125 |
128 | `;
129 |
130 | exports[`css random expression 1`] = `
131 | .glamor-0 {
132 | font-size: 20px;
133 | background: green;
134 | }
135 |
136 | @media (min-width:420px) {
137 | .glamor-0 {
138 | color: blue;
139 | width: 96px;
140 | height: 96px;
141 | line-height: 40px;
142 | }
143 | }
144 |
145 |
148 | `;
149 |
150 | exports[`css with array interpolation 1`] = `
151 | .glamor-0 {
152 | display: -webkit-box;
153 | display: -webkit-flex;
154 | display: -ms-flexbox;
155 | display: flex;
156 | -webkit-box-pack: center;
157 | -webkit-justify-content: center;
158 | -ms-flex-pack: center;
159 | justify-content: center;
160 | align-items: center;
161 | }
162 |
163 |
166 | `;
167 |
168 | exports[`css with object interpolation 1`] = `
169 | .glamor-0 {
170 | display: -webkit-box;
171 | display: -webkit-flex;
172 | display: -ms-flexbox;
173 | display: flex;
174 | }
175 |
176 |
179 | `;
180 |
--------------------------------------------------------------------------------
/packages/core/src/sheet.js:
--------------------------------------------------------------------------------
1 | function last(arr) {
2 | return arr[arr.length - 1]
3 | }
4 |
5 | function sheetForTag(tag) {
6 | if (tag.sheet) {
7 | return tag.sheet
8 | }
9 |
10 | // this weirdness brought to you by firefox
11 | for (let i = 0; i < document.styleSheets.length; i++) {
12 | if (document.styleSheets[i].ownerNode === tag) {
13 | return document.styleSheets[i]
14 | }
15 | }
16 | }
17 |
18 | const isBrowser: boolean = typeof window !== 'undefined'
19 | const isDev: boolean = process.env.NODE_ENV !== 'production'
20 |
21 | function makeStyleTag() {
22 | let tag = document.createElement('style')
23 | tag.type = 'text/css'
24 | tag.setAttribute('data-new-css-in-js', '')
25 | tag.appendChild(document.createTextNode(''))
26 | document.head.appendChild(tag)
27 | return tag
28 | }
29 |
30 | export default class StyleSheet {
31 | constructor(speedy = !isDev) {
32 | this.isSpeedy = speedy // the big drawback here is that the css won't be editable in devtools
33 | this.sheet = undefined
34 | this.tags = []
35 | this.maxLength = 65000
36 | this.ctr = 0
37 | }
38 | getSheet() {
39 | return sheetForTag(last(this.tags))
40 | }
41 | inject() {
42 | if (this.injected) {
43 | throw new Error('already injected!')
44 | }
45 | if (isBrowser) {
46 | this.tags[0] = makeStyleTag()
47 | } else {
48 | // server side 'polyfill'. just enough behavior to be useful.
49 | this.sheet = {
50 | cssRules: [],
51 | insertRule: rule => {
52 | // enough 'spec compliance' to be able to extract the rules later
53 | // in other words, just the cssText field
54 | this.sheet.cssRules.push({ cssText: rule })
55 | }
56 | }
57 | }
58 | this.injected = true
59 | }
60 | speedy(bool) {
61 | if (this.ctr !== 0) {
62 | // cannot change speedy mode after inserting any rule to sheet. Either call speedy(${bool}) earlier in your app, or call flush() before speedy(${bool})
63 | throw new Error(`cannot change speedy now`)
64 | }
65 | this.isSpeedy = !!bool
66 | }
67 | _insert(rule) {
68 | // this weirdness for perf, and chrome's weird bug
69 | // https://stackoverflow.com/questions/20007992/chrome-suddenly-stopped-accepting-insertrule
70 | let sheet = this.getSheet()
71 | sheet.insertRule(rule, sheet.cssRules.length)
72 | }
73 | insert(rule) {
74 | if (isBrowser) {
75 | // this is the ultrafast version, works across browsers
76 | if (this.isSpeedy && this.getSheet().insertRule) {
77 | this._insert(rule)
78 | } else {
79 | // more browser weirdness. I don't even know
80 | // else if(this.tags.length > 0 && this.tags::last().styleSheet) {
81 | // this.tags::last().styleSheet.cssText+= rule
82 | // }
83 | last(this.tags).appendChild(document.createTextNode(rule))
84 | }
85 | } else {
86 | // server side is pretty simple
87 | this.sheet.insertRule(rule)
88 | }
89 |
90 | this.ctr++
91 | if (isBrowser && this.ctr % this.maxLength === 0) {
92 | this.tags.push(makeStyleTag())
93 | }
94 | return this.ctr - 1
95 | }
96 | flush() {
97 | if (isBrowser) {
98 | this.tags.forEach(tag => tag.parentNode.removeChild(tag))
99 | this.tags = []
100 | this.sheet = null
101 | this.ctr = 0
102 | // todo - look for remnants in document.styleSheets
103 | } else {
104 | // simpler on server
105 | this.sheet.cssRules = []
106 | }
107 | this.injected = false
108 | }
109 | }
110 |
--------------------------------------------------------------------------------
/packages/core/__tests__/css.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { render } from 'enzyme'
3 | import serializer from 'jest-glamor-react'
4 | import { css, sheet } from '../src'
5 |
6 | expect.addSnapshotSerializer(serializer(sheet))
7 |
8 | describe('css', () => {
9 | test('float property', () => {
10 | const cls1 = css`float: left;`
11 |
12 | const tree = render()
13 | expect(tree).toMatchSnapshot()
14 | })
15 |
16 | test('handles more than 10 dynamic properties', () => {
17 | const cls1 = css`
18 | text-decoration: ${'underline'};
19 | border-right: solid blue 54px;
20 | background: ${'white'};
21 | color: ${'black'};
22 | display: ${'block'};
23 | border-radius: ${'3px'};
24 | padding: ${'25px'};
25 | width: ${'500px'};
26 | z-index: ${100};
27 | font-size: ${'18px'};
28 | text-align: ${'center'};
29 | `
30 |
31 | const tree = render()
32 | expect(tree).toMatchSnapshot()
33 | })
34 |
35 | test('random expression', () => {
36 | const cls1 = css`
37 | font-size: 20px;
38 | @media (min-width: 420px) {
39 | color: blue;
40 | ${css`
41 | width: 96px;
42 | height: 96px;
43 | `};
44 | line-height: 40px;
45 | }
46 | background: green;
47 | `
48 | const tree = render()
49 | expect(tree).toMatchSnapshot()
50 | })
51 | test('@supports', () => {
52 | const cls1 = css`@supports (display: grid) {display: grid;}`
53 | const tree = render()
54 | expect(tree).toMatchSnapshot()
55 | })
56 | test('nested at rules', () => {
57 | const cls1 = css`
58 | @supports (display: grid) {
59 | display: grid;
60 | @supports (display: flex) {
61 | display: flex;
62 | }
63 | }
64 | @media (min-width: 420px) {
65 | color: pink;
66 | @media (max-width: 500px) {
67 | color: hotpink;
68 | }
69 | }
70 | `
71 | const tree = render()
72 | expect(tree).toMatchSnapshot()
73 | })
74 | test('nested', () => {
75 | const cls1 = css`
76 | color: yellow;
77 | & .some-class {
78 | display: flex;
79 | & .some-other-class {
80 | background-color: hotpink;
81 | }
82 | @media (max-width: 600px) {
83 | background-color: pink;
84 | }
85 | }
86 | &.another-class {
87 | display: flex;
88 | }
89 | `
90 | const tree = render(
91 |
96 | )
97 | expect(tree).toMatchSnapshot()
98 | })
99 | test('empty rule', () => {
100 | const cls1 = css``
101 |
102 | const tree = render()
103 | expect(tree).toMatchSnapshot()
104 | })
105 | test('css variables', () => {
106 | const cls1 = css`
107 | --some-var: 1px;
108 | width: var(--some-var);
109 | `
110 | const tree = render()
111 | expect(tree).toMatchSnapshot()
112 | })
113 | test('with object interpolation', () => {
114 | const cls1 = css`${{ display: 'flex' }};`
115 | const tree = render()
116 | expect(tree).toMatchSnapshot()
117 | })
118 | test('with array interpolation', () => {
119 | const cls = css`align-items: center;`
120 | const cls1 = css`${[{ display: 'flex' }, `justify-content: center;`, cls]};`
121 | const tree = render()
122 | expect(tree).toMatchSnapshot()
123 | })
124 | })
125 |
--------------------------------------------------------------------------------
/packages/benchmarks/index.js:
--------------------------------------------------------------------------------
1 | // import aphrodite from './src/aphrodite'
2 | import cssModules from './src/css-modules'
3 | import emotion from './src/emotion'
4 | import emotionCSS from './src/emotion-css'
5 | import emotionObjStyle from './src/emotion-obj-style'
6 | import glamor from './src/glamor'
7 | import glamorous from './src/glamorous'
8 | import newCssInJs from './src/new-css-in-js'
9 | // import jss from './src/jss'
10 | // import radium from './src/radium'
11 | // import reactNative from './src/react-native'
12 | // import reactNativeStyleSheet from './src/react-native-stylesheet'
13 | import styledComponents from './src/styled-components'
14 | // import styledComponentsPrimitives from './src/styled-components-primitives'
15 | // import styletron from './src/styletron'
16 | // import xp from './src/reactxp'
17 |
18 | import renderDeepTree from './tests/renderDeepTree'
19 | // import renderTweet from './tests/renderTweet'
20 | import renderWideTree from './tests/renderWideTree'
21 |
22 | const allTests = {
23 | emotion: [
24 | () => renderDeepTree('emotion', emotion),
25 | () => renderWideTree('emotion', emotion)
26 | ],
27 | emotionCSS: [
28 | () => renderDeepTree('emotionCSS', emotionCSS),
29 | () => renderWideTree('emotionCSS', emotionCSS)
30 | ],
31 | emotionObjStyle: [
32 | () => renderDeepTree('emotionObjStyle', emotionObjStyle),
33 | () => renderWideTree('emotionObjStyle', emotionObjStyle)
34 | ],
35 | glamor: [
36 | () => renderDeepTree('glamor', glamor),
37 | () => renderWideTree('glamor', glamor)
38 | ],
39 | glamorous: [
40 | () => renderDeepTree('glamorous', glamorous),
41 | () => renderWideTree('glamorous', glamorous)
42 | ],
43 | 'styled-components': [
44 | () => renderDeepTree('styled-components', styledComponents),
45 | () => renderWideTree('styled-components', styledComponents)
46 | ],
47 | 'new-css-in-js': [
48 | () => renderDeepTree('new-css-in-js', newCssInJs),
49 | () => renderWideTree('new-css-in-js', newCssInJs)
50 | ],
51 | 'css-modules': [
52 | () => renderDeepTree('css-modules', cssModules),
53 | () => renderWideTree('css-modules', cssModules)
54 | ]
55 | }
56 |
57 | // const coreTests = [
58 | // () => renderTweet('emotion', emotion),
59 | // () => renderDeepTree('emotionCSS', emotionCSS),
60 | // () => renderWideTree('emotionCSS', emotionCSS),
61 | // () => renderDeepTree('emotionObjStyle', emotionObjStyle),
62 | // () => renderWideTree('emotionObjStyle', emotionObjStyle),
63 | // () => renderTweet('react-native-web', reactNative),
64 | // () => renderDeepTree('css-modules', cssModules),
65 | // () => renderWideTree('css-modules', cssModules),
66 | // () => renderTweet('react-native-web/stylesheet', reactNativeStyleSheet),
67 | // () => renderDeepTree('react-native-web/stylesheet', reactNativeStyleSheet),
68 | // () => renderWideTree('react-native-web/stylesheet', reactNativeStyleSheet),
69 | // () => renderDeepTree('react-native-web', reactNative),
70 | // () => renderWideTree('react-native-web', reactNative)
71 | // () => renderTweet('glamor', glamor),
72 | // () => renderTweet('glamorous', glamorous),
73 | // () => renderTweet('styled-components', styledComponents),
74 | // ]
75 |
76 | const tests = []
77 |
78 | if (window.location.hash) {
79 | window.location.hash
80 | .slice(1)
81 | .split(',')
82 | .forEach(test => {
83 | if (Array.isArray(allTests[test])) {
84 | tests.push(...allTests[test])
85 | } else {
86 | throw new Error(`Benchmark for ${test} not found`)
87 | }
88 | })
89 | } else {
90 | tests.push(...allTests['new-css-in-js'])
91 | tests.push(...allTests.emotion)
92 | tests.push(...allTests['css-modules'])
93 | tests.push(...allTests.glamorous)
94 | tests.push(...allTests['styled-components'])
95 | }
96 |
97 | tests.push(() => () => Promise.resolve(console.log('done')))
98 |
99 | tests.reduce((promise, test) => promise.then(test()), Promise.resolve())
100 |
--------------------------------------------------------------------------------
/packages/react/__tests__/__snapshots__/index.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`styled basic render 1`] = `
4 | .glamor-0 {
5 | color: blue;
6 | font-size: ;
7 | }
8 |
9 | @media (min-width:520px) {
10 | .glamor-0 {
11 | color: green;
12 | }
13 | }
14 |
15 | @media (min-width:420px) {
16 | .glamor-0 {
17 | color: blue;
18 | }
19 | }
20 |
21 |
24 | hello world
25 |
26 | `;
27 |
28 | exports[`styled composing components 1`] = `
29 | .glamor-0 {
30 | color: green;
31 | display: none;
32 | display: -webkit-box;
33 | display: -webkit-flex;
34 | display: -ms-flexbox;
35 | display: flex;
36 | -webkit-box-pack: center;
37 | -webkit-justify-content: center;
38 | -ms-flex-pack: center;
39 | justify-content: center;
40 | }
41 |
42 |
47 | `;
48 |
49 | exports[`styled composition 1`] = `
50 | .glamor-0 {
51 | font-size: 20px;
52 | font-size: ;
53 | }
54 |
55 |
58 | hello world
59 |
60 | `;
61 |
62 | exports[`styled function in expression 1`] = `
63 | .glamor-0 {
64 | font-size: 20px;
65 | font-size: 40px;
66 | }
67 |
68 |
71 | hello world
72 |
73 | `;
74 |
75 | exports[`styled handles more than 10 dynamic properties 1`] = `
76 | .glamor-0 {
77 | text-decoration: underline;
78 | border-right: solid blue 54px;
79 | background: white;
80 | color: black;
81 | display: block;
82 | border-radius: 3px;
83 | padding: 25px;
84 | width: 500px;
85 | z-index: ;
86 | font-size: 18px;
87 | text-align: center;
88 | border-left: blue;
89 | }
90 |
91 |
94 | hello world
95 |
96 | `;
97 |
98 | exports[`styled innerRef 1`] = `
99 | .glamor-0 {
100 | font-size: 12px;
101 | }
102 |
103 |
106 |
109 | hello world
110 |
111 |
112 | `;
113 |
114 | exports[`styled input placeholder 1`] = `
115 | .glamor-0::placeholder {
116 | background-color: green;
117 | }
118 |
119 |
122 | `;
123 |
124 | exports[`styled nested 1`] = `
125 | .glamor-1 div span {
126 | color: red;
127 | }
128 |
129 | .glamor-1 div {
130 | color: green;
131 | }
132 |
133 | .glamor-1 {
134 | display: -webkit-box;
135 | display: -webkit-flex;
136 | display: -ms-flexbox;
137 | display: flex;
138 | }
139 |
140 | .glamor-0 {
141 | font-size: 20px;
142 | }
143 |
144 |
147 | hello
148 |
151 | This will be green
152 |
153 | world
154 |
155 | `;
156 |
157 | exports[`styled no dynamic 1`] = `
158 | .glamor-0 {
159 | float: left;
160 | }
161 |
162 |
165 | hello world
166 |
167 | `;
168 |
169 | exports[`styled no prop filtering on non string tags 1`] = `
170 |
183 | hello world
184 |
185 | `;
186 |
187 | exports[`styled prop filtering 1`] = `
188 |
195 | hello world
196 |
197 | `;
198 |
199 | exports[`styled prop filtering on composed styled components that are string tags 1`] = `
200 |
207 | hello world
208 |
209 | `;
210 |
211 | exports[`styled random expressions undefined return 1`] = `
212 | .glamor-0 {
213 | color: green;
214 | }
215 |
216 |
219 | hello world
220 |
221 | `;
222 |
223 | exports[`styled random object expression 1`] = `
224 | .glamor-0 {
225 | background-color: hotpink;
226 | font-size: 1rem;
227 | margin-right: auto;
228 | margin-left: auto;
229 | color: green;
230 | }
231 |
232 |
235 | hello world
236 |
237 | `;
238 |
--------------------------------------------------------------------------------
/packages/benchmarks/src/components/Tweet/index.js:
--------------------------------------------------------------------------------
1 | import AspectRatio from '../AspectRatio'
2 | import GridView from '../GridView'
3 | import PropTypes from 'prop-types'
4 | import TweetActionsBar from '../TweetActionsBar'
5 | import TweetText from '../TweetText'
6 | import UserAvatar from '../UserAvatar'
7 | import UserNames from '../UserNames'
8 | import { Image, StyleSheet, Text, View } from 'react-native'
9 | import React, { Component } from 'react'
10 | import theme from '../theme'
11 |
12 | export class Tweet extends Component {
13 | static displayName = 'Tweet'
14 |
15 | static propTypes = {
16 | tweet: PropTypes.object.isRequired
17 | }
18 |
19 | render() {
20 | const { tweet } = this.props
21 | const { id, lang, media, textParts, timestamp, user } = tweet
22 | const { fullName, profileImageUrl, screenName } = user
23 |
24 | return (
25 |
26 |
27 |
28 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
47 |
48 |
49 |
50 |
51 |
56 |
57 |
58 | {media ? (
59 |
60 |
61 |
66 |
67 |
68 | ) : null}
69 |
70 |
71 |
90 |
91 |
92 |
93 | )
94 | }
95 | }
96 |
97 | const styles = StyleSheet.create({
98 | root: {
99 | paddingVertical: theme.createLength(theme.spaceY * 0.75, 'rem'),
100 | paddingHorizontal: theme.createLength(theme.spaceX, 'rem')
101 | },
102 | avatarColumn: {
103 | flexGrow: 1,
104 | minWidth: 32
105 | },
106 | bodyColumn: {
107 | flexGrow: 7
108 | },
109 | row: {
110 | flexDirection: 'row',
111 | justifyContent: 'space-between'
112 | },
113 | avatarLink: {
114 | display: 'block',
115 | flexShrink: 1,
116 | flexGrow: 0,
117 | width: '100%'
118 | },
119 | avatar: {
120 | width: '100%'
121 | },
122 | body: {
123 | marginTop: '-0.15rem'
124 | },
125 | timestamp: {
126 | color: theme.colors.deepGray,
127 | marginLeft: theme.createLength(theme.spaceX, 'rem'),
128 | order: 1,
129 | textDecorationLine: 'none',
130 | whiteSpace: 'nowrap'
131 | },
132 | actionBar: {
133 | marginTop: theme.createLength(theme.spaceY * 0.5, 'rem')
134 | },
135 | richContent: {
136 | borderRadius: '0.35rem',
137 | marginTop: theme.createLength(theme.spaceY * 0.5, 'rem'),
138 | overflow: 'hidden'
139 | },
140 | media: {
141 | ...StyleSheet.absoluteFillObject,
142 | margin: 'auto',
143 | width: 'auto',
144 | height: 'auto'
145 | }
146 | })
147 |
148 | export default Tweet
149 |
--------------------------------------------------------------------------------
/packages/react/__tests__/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import serializer from 'jest-glamor-react'
3 | import { css, sheet } from 'new-css-in-js'
4 | import styled from 'react-new-css-in-js'
5 | import { render, mount } from 'enzyme'
6 |
7 | expect.addSnapshotSerializer(serializer(sheet))
8 |
9 | describe('styled', () => {
10 | test('no dynamic', () => {
11 | const H1 = styled('h1')`float: left;`
12 |
13 | const tree = render(hello world
)
14 |
15 | expect(tree).toMatchSnapshot()
16 | })
17 |
18 | test('basic render', () => {
19 | const fontSize = 20
20 | const H1 = styled('h1')`
21 | color: blue;
22 | font-size: ${fontSize};
23 | @media (min-width: 420px) {
24 | color: blue;
25 | @media (min-width: 520px) {
26 | color: green;
27 | }
28 | }
29 | `
30 |
31 | const tree = render(hello world
)
32 |
33 | expect(tree).toMatchSnapshot()
34 | })
35 |
36 | test('nested', () => {
37 | const fontSize = '20px'
38 | const H1 = styled('h1')`font-size: ${fontSize};`
39 |
40 | const Thing = styled('div')`
41 | display: flex;
42 | & div {
43 | color: green;
44 |
45 | & span {
46 | color: red;
47 | }
48 | }
49 | `
50 |
51 | const tree = render(
52 |
53 | hello This will be green
world
54 |
55 | )
56 |
57 | expect(tree).toMatchSnapshot()
58 | })
59 |
60 | test.skip('random expressions', () => {
61 | const margin = (t, r, b, l) => {
62 | return props => css`
63 | margin-top: ${t};
64 | margin-right: ${r};
65 | margin-bottom: ${b};
66 | margin-left: ${l};
67 | `
68 | }
69 |
70 | const mq = css`
71 | @media (min-width: 420px) {
72 | color: blue;
73 | @media (min-width: 520px) {
74 | color: green;
75 | }
76 | }
77 | `
78 |
79 | const H1 = styled('h1')`
80 | ${mq};
81 | ${props => props.prop && css`font-size: 1rem;`};
82 | ${margin(0, 'auto', 0, 'auto')};
83 | color: green;
84 | `
85 |
86 | const tree = render(
87 |
88 | hello world
89 |
90 | )
91 |
92 | expect(tree).toMatchSnapshot()
93 | })
94 |
95 | test('random expressions undefined return', () => {
96 | const H1 = styled('h1')`
97 | ${props => props.prop && css`font-size: 1rem;`};
98 | color: green;
99 | `
100 |
101 | const tree = render(hello world
)
102 |
103 | expect(tree).toMatchSnapshot()
104 | })
105 |
106 | test('random object expression', () => {
107 | const margin = (t, r, b, l) => {
108 | return props => ({
109 | marginTop: t,
110 | marginRight: r,
111 | marginBottom: b,
112 | marginLeft: l
113 | })
114 | }
115 | const H1 = styled('h1')`
116 | background-color: hotpink;
117 | ${props => props.prop && { fontSize: '1rem' }};
118 | ${margin(0, 'auto', 0, 'auto')};
119 | color: green;
120 | `
121 |
122 | const tree = render(
123 |
124 | hello world
125 |
126 | )
127 |
128 | expect(tree).toMatchSnapshot()
129 | })
130 |
131 | test('composition', () => {
132 | const fontSize = 20
133 | const H1 = styled('h1')`font-size: ${fontSize + 'px'};`
134 |
135 | const H2 = styled(H1)`font-size: ${fontSize * 2 / 3};`
136 |
137 | const tree = render(hello world
)
138 |
139 | expect(tree).toMatchSnapshot()
140 | })
141 |
142 | test('input placeholder', () => {
143 | const Input = styled('input')`
144 | ::placeholder {
145 | background-color: green;
146 | }
147 | `
148 | const tree = render()
149 |
150 | expect(tree).toMatchSnapshot()
151 | })
152 |
153 | test('handles more than 10 dynamic properties', () => {
154 | const H1 = styled('h1')`
155 | text-decoration: ${'underline'};
156 | border-right: solid blue 54px;
157 | background: ${'white'};
158 | color: ${'black'};
159 | display: ${'block'};
160 | border-radius: ${'3px'};
161 | padding: ${'25px'};
162 | width: ${'500px'};
163 | z-index: ${100};
164 | font-size: ${'18px'};
165 | text-align: ${'center'};
166 | border-left: ${p => p.theme.blue};
167 | `
168 |
169 | const tree = render(
170 |
171 | hello world
172 |
173 | )
174 |
175 | expect(tree).toMatchSnapshot()
176 | })
177 |
178 | test('function in expression', () => {
179 | const fontSize = 20
180 | const H1 = styled('h1')`font-size: ${fontSize + 'px'};`
181 |
182 | const H2 = styled(H1)`font-size: ${({ scale }) => fontSize * scale + 'px'};`
183 |
184 | const tree = render(
185 |
186 | hello world
187 |
188 | )
189 |
190 | expect(tree).toMatchSnapshot()
191 | })
192 |
193 | test('innerRef', () => {
194 | const H1 = styled('h1')`font-size: 12px;`
195 |
196 | const refFunction = jest.fn()
197 |
198 | const tree = mount(hello world
)
199 |
200 | expect(tree).toMatchSnapshot()
201 | expect(refFunction).toBeCalled()
202 | })
203 |
204 | test('composing components', () => {
205 | const Button = styled('button')`color: green;`
206 | const OtherButton = styled(Button)`display: none;`
207 |
208 | const AnotherButton = styled(OtherButton)`
209 | display: flex;
210 | justify-content: center;
211 | `
212 | const tree = render(hello world)
213 |
214 | expect(tree).toMatchSnapshot()
215 | })
216 |
217 | test('prop filtering', () => {
218 | const Link = styled('a')`color: green;`
219 | const rest = { m: [3], pt: [4] }
220 |
221 | const tree = render(
222 |
235 | hello world
236 |
237 | )
238 |
239 | expect(tree).toMatchSnapshot()
240 | })
241 | test('no prop filtering on non string tags', () => {
242 | const Link = styled(props => )`color: green;`
243 |
244 | const tree = render(
245 |
257 | hello world
258 |
259 | )
260 |
261 | expect(tree).toMatchSnapshot()
262 | })
263 | test('prop filtering on composed styled components that are string tags', () => {
264 | const BaseLink = styled('a')`background-color: hotpink;`
265 | const Link = styled(BaseLink)`color: green;`
266 |
267 | const tree = render(
268 |
280 | hello world
281 |
282 | )
283 |
284 | expect(tree).toMatchSnapshot()
285 | })
286 | })
287 |
--------------------------------------------------------------------------------
/packages/core/src/stylis.js:
--------------------------------------------------------------------------------
1 | var la=function ba(ca){function S(b,c,d,m){for(var a=0,h=0,k=0,f=0,l,n,e,v=0,z=0,A=0,x=0,t=l=0,q=0,p=0,w=n=0,H=0,B=d.length,I=B-1,u,g="",r="",R="",K="",E;pl)&&g.indexOf(" ")&&(g=g.replace(" ",":"))),0A||1>v[A-1].length)f=k+G+f}break;case 44:k="";default:f=1a&&(a=(c=c.trim()).charCodeAt(0));switch(a){case 38:switch(D+m){case 0:case 1:if(0===b.trim().length)break;default:return c.replace(K,"$1"+b.trim())}break;case 58:switch(c.charCodeAt(1)){case 103:if(0l||96l||95===l||45===l&&45!==k.charCodeAt(1)))switch(isNaN(parseFloat(k))+(-1!==k.indexOf("("))){case 1:switch(k){case "infinite":case "alternate":case "backwards":case "running":case "normal":case "forwards":case "both":case "none":case "linear":case "ease":case "ease-in":case "ease-out":case "ease-in-out":case "paused":case "reverse":case "alternate-reverse":case "inherit":case "initial":case "unset":case "step-start":case "step-end":break;
12 | default:k+=O}}f[m++]=k}b+=(0===h?"":",")+f.join(" ")}}else b+=110===c.charCodeAt(10)?d+(1===N?O:""):d;b=a+b+";";a=0b.charCodeAt(8))break;case 115:a=a.replace(b,"-webkit-"+b)+";"+a;break;case 207:case 102:a=a.replace(b,"-webkit-"+
14 | (102m&&(m=(d=d.trim()).charCodeAt(0));0])/g,Da=/([[}=:>])\s+/g,Ea=/(\{[^{]+?);(?=\})/g,Fa=/\s{2,}/g,ra=/([^\(])(:+) */g,X=/[svh]\w+-[tblr]{2}/,xa=/([\w-]+t\()/g,na=/\(\s*([^]*?)\s*\)/g,Aa=/([^]*?);/g,y=1,F=1,J=0,D=1,P=1,V=1,ka=0,fa=0,U=0,T=[],Y=[],C=0,ha=0,N=1,O="",G="",Q="";w.use=Z;w.set=aa;void 0!==ca&&aa(ca);return w};
20 | export default la
--------------------------------------------------------------------------------