Spaces:
Sleeping
Sleeping
File size: 4,612 Bytes
56fda74 |
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 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 |
import * as React from 'react'
import {
EmotionCache,
getRegisteredStyles,
insertStyles,
registerStyles,
SerializedStyles
} from '@emotion/utils'
import { CSSInterpolation, serializeStyles } from '@emotion/serialize'
import isDevelopment from '#is-development'
import { withEmotionCache } from './context'
import { Theme, ThemeContext } from './theming'
import { useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks'
import isBrowser from '#is-browser'
export interface ArrayClassNamesArg extends Array<ClassNamesArg> {}
export type ClassNamesArg =
| undefined
| null
| string
| boolean
| { [className: string]: boolean | null | undefined }
| ArrayClassNamesArg
let classnames = (args: ArrayClassNamesArg): string => {
let len = args.length
let i = 0
let cls = ''
for (; i < len; i++) {
let arg = args[i]
if (arg == null) continue
let toAdd
switch (typeof arg) {
case 'boolean':
break
case 'object': {
if (Array.isArray(arg)) {
toAdd = classnames(arg)
} else {
if (
isDevelopment &&
arg.styles !== undefined &&
arg.name !== undefined
) {
console.error(
'You have passed styles created with `css` from `@emotion/react` package to the `cx`.\n' +
'`cx` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the `css` received from <ClassNames/> component.'
)
}
toAdd = ''
for (const k in arg) {
if (arg[k] && k) {
toAdd && (toAdd += ' ')
toAdd += k
}
}
}
break
}
default: {
toAdd = arg
}
}
if (toAdd) {
cls && (cls += ' ')
cls += toAdd
}
}
return cls
}
function merge(
registered: EmotionCache['registered'],
css: ClassNamesContent['css'],
className: string
) {
const registeredStyles: string[] = []
const rawClassName = getRegisteredStyles(
registered,
registeredStyles,
className
)
if (registeredStyles.length < 2) {
return className
}
return rawClassName + css(registeredStyles)
}
const Insertion = ({
cache,
serializedArr
}: {
cache: EmotionCache
serializedArr: SerializedStyles[]
}) => {
let rules = useInsertionEffectAlwaysWithSyncFallback(() => {
let rules = ''
for (let i = 0; i < serializedArr.length; i++) {
let res = insertStyles(cache, serializedArr[i], false)
if (!isBrowser && res !== undefined) {
rules += res
}
}
if (!isBrowser) {
return rules
}
})
if (!isBrowser && rules!.length !== 0) {
return (
<style
{...{
[`data-emotion`]: `${cache.key} ${serializedArr
.map(serialized => serialized.name)
.join(' ')}`,
dangerouslySetInnerHTML: { __html: rules! },
nonce: cache.sheet.nonce
}}
/>
)
}
return null
}
export interface ClassNamesContent {
css(template: TemplateStringsArray, ...args: Array<CSSInterpolation>): string
css(...args: Array<CSSInterpolation>): string
cx(...args: Array<ClassNamesArg>): string
theme: Theme
}
export interface ClassNamesProps {
children(content: ClassNamesContent): React.ReactNode
}
export const ClassNames = /* #__PURE__ */ withEmotionCache<ClassNamesProps>(
(props, cache) => {
let hasRendered = false
let serializedArr: SerializedStyles[] = []
let css: ClassNamesContent['css'] = (...args) => {
if (hasRendered && isDevelopment) {
throw new Error('css can only be used during render')
}
let serialized = serializeStyles(args, cache.registered)
serializedArr.push(serialized)
// registration has to happen here as the result of this might get consumed by `cx`
registerStyles(cache, serialized, false)
return `${cache.key}-${serialized.name}`
}
let cx = (...args: Array<ClassNamesArg>) => {
if (hasRendered && isDevelopment) {
throw new Error('cx can only be used during render')
}
return merge(cache.registered, css, classnames(args))
}
let content = {
css,
cx,
theme: React.useContext(ThemeContext)
}
let ele = props.children(content)
hasRendered = true
return (
<>
<Insertion cache={cache} serializedArr={serializedArr} />
{ele}
</>
)
}
)
if (isDevelopment) {
ClassNames.displayName = 'EmotionClassNames'
}
|