@tamagui/core 1.0.1-beta.102 → 1.0.1-beta.105
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ThemeManager.js +9 -3
- package/dist/cjs/ThemeManager.js.map +2 -2
- package/dist/cjs/createComponent.js +16 -16
- package/dist/cjs/createComponent.js.map +2 -2
- package/dist/cjs/createTamagui.js +16 -4
- package/dist/cjs/createTamagui.js.map +2 -2
- package/dist/cjs/createTheme.js +5 -2
- package/dist/cjs/createTheme.js.map +2 -2
- package/dist/cjs/helpers/createMediaStyle.js +3 -2
- package/dist/cjs/helpers/createMediaStyle.js.map +2 -2
- package/dist/cjs/helpers/createShallowUpdate.js.map +2 -2
- package/dist/cjs/helpers/getSplitStyles.js +27 -29
- package/dist/cjs/helpers/getSplitStyles.js.map +2 -2
- package/dist/cjs/helpers/getStylesAtomic.js +7 -7
- package/dist/cjs/helpers/getStylesAtomic.js.map +2 -2
- package/dist/cjs/helpers/insertStyleRule.js +15 -11
- package/dist/cjs/helpers/insertStyleRule.js.map +2 -2
- package/dist/cjs/helpers/wrapThemeManagerContext.js +5 -2
- package/dist/cjs/helpers/wrapThemeManagerContext.js.map +2 -2
- package/dist/cjs/hooks/getThemeUnwrapped.js +36 -0
- package/dist/cjs/hooks/getThemeUnwrapped.js.map +7 -0
- package/dist/cjs/hooks/useMedia.js +2 -0
- package/dist/cjs/hooks/useMedia.js.map +2 -2
- package/dist/cjs/hooks/useTheme.js +17 -21
- package/dist/cjs/hooks/useTheme.js.map +2 -2
- package/dist/cjs/insertFont.js +2 -1
- package/dist/cjs/insertFont.js.map +2 -2
- package/dist/cjs/types.js.map +1 -1
- package/dist/cjs/views/Slot.js +20 -0
- package/dist/cjs/views/Slot.js.map +2 -2
- package/dist/esm/ThemeManager.js +9 -3
- package/dist/esm/ThemeManager.js.map +2 -2
- package/dist/esm/createComponent.js +17 -17
- package/dist/esm/createComponent.js.map +2 -2
- package/dist/esm/createTamagui.js +16 -4
- package/dist/esm/createTamagui.js.map +2 -2
- package/dist/esm/createTheme.js +3 -1
- package/dist/esm/createTheme.js.map +2 -2
- package/dist/esm/helpers/createMediaStyle.js +3 -2
- package/dist/esm/helpers/createMediaStyle.js.map +2 -2
- package/dist/esm/helpers/createShallowUpdate.js.map +2 -2
- package/dist/esm/helpers/getSplitStyles.js +34 -31
- package/dist/esm/helpers/getSplitStyles.js.map +2 -2
- package/dist/esm/helpers/getStylesAtomic.js +7 -7
- package/dist/esm/helpers/getStylesAtomic.js.map +2 -2
- package/dist/esm/helpers/insertStyleRule.js +14 -10
- package/dist/esm/helpers/insertStyleRule.js.map +2 -2
- package/dist/esm/helpers/wrapThemeManagerContext.js +5 -2
- package/dist/esm/helpers/wrapThemeManagerContext.js.map +2 -2
- package/dist/esm/hooks/getThemeUnwrapped.js +12 -0
- package/dist/esm/hooks/getThemeUnwrapped.js.map +7 -0
- package/dist/esm/hooks/useMedia.js +2 -0
- package/dist/esm/hooks/useMedia.js.map +2 -2
- package/dist/esm/hooks/useTheme.js +16 -20
- package/dist/esm/hooks/useTheme.js.map +2 -2
- package/dist/esm/insertFont.js +2 -1
- package/dist/esm/insertFont.js.map +2 -2
- package/dist/esm/views/Slot.js +20 -0
- package/dist/esm/views/Slot.js.map +2 -2
- package/package.json +8 -8
- package/types/ThemeManager.d.ts +5 -6
- package/types/ThemeManager.d.ts.map +1 -1
- package/types/createComponent.d.ts.map +1 -1
- package/types/createTamagui.d.ts.map +1 -1
- package/types/createTheme.d.ts +1 -0
- package/types/createTheme.d.ts.map +1 -1
- package/types/helpers/createMediaStyle.d.ts +2 -4
- package/types/helpers/createMediaStyle.d.ts.map +1 -1
- package/types/helpers/createShallowUpdate.d.ts.map +1 -1
- package/types/helpers/createTamaguiProvider.d.ts +0 -1
- package/types/helpers/createTamaguiProvider.d.ts.map +1 -1
- package/types/helpers/getSplitStyles.d.ts +2 -1
- package/types/helpers/getSplitStyles.d.ts.map +1 -1
- package/types/helpers/getStylesAtomic.d.ts.map +1 -1
- package/types/helpers/insertStyleRule.d.ts +5 -2
- package/types/helpers/insertStyleRule.d.ts.map +1 -1
- package/types/helpers/wrapThemeManagerContext.d.ts +1 -1
- package/types/helpers/wrapThemeManagerContext.d.ts.map +1 -1
- package/types/hooks/getThemeUnwrapped.d.ts +3 -0
- package/types/hooks/getThemeUnwrapped.d.ts.map +1 -0
- package/types/hooks/useMedia.d.ts.map +1 -1
- package/types/hooks/useTheme.d.ts +6 -10
- package/types/hooks/useTheme.d.ts.map +1 -1
- package/types/insertFont.d.ts.map +1 -1
- package/types/types.d.ts +1 -0
- package/types/types.d.ts.map +1 -1
- package/types/views/Slot.d.ts.map +1 -1
- package/types/views/ThemeInverse.d.ts +0 -1
- package/types/views/ThemeInverse.d.ts.map +1 -1
- package/types/views/ThemeProvider.d.ts +0 -1
- package/types/views/ThemeProvider.d.ts.map +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createTamagui.ts"],
|
|
4
|
-
"sourcesContent": ["import { configListeners, getHasConfigured, setConfig } from './conf'\nimport { THEME_CLASSNAME_PREFIX } from './constants/constants'\nimport { isWeb } from './constants/platform'\nimport { SpacerProps } from './createComponent'\nimport { Variable, createVariable, isVariable } from './createVariable'\nimport { createVariables } from './createVariables'\nimport { createTamaguiProvider } from './helpers/createTamaguiProvider'\nimport { getInsertedRules } from './helpers/insertStyleRule'\nimport {\n registerCSSVariable,\n tokenRules,\n tokensValueToVariable,\n} from './helpers/registerCSSVariable'\nimport { configureMedia } from './hooks/useMedia'\nimport { parseFont, registerFontVariables } from './insertFont'\nimport { Tamagui } from './Tamagui'\nimport {\n AnimationDriver,\n CreateTamaguiConfig,\n GenericTamaguiConfig,\n MediaQueryKey,\n StackProps,\n TamaguiInternalConfig,\n TextProps,\n ThemeObject,\n} from './types'\n\nexport type CreateTamaguiProps =\n // user then re-defines the types after createTamagui returns the typed object they want\n Partial<Omit<GenericTamaguiConfig, 'themes' | 'tokens' | 'animations'>> & {\n animations?: AnimationDriver<any>\n tokens: GenericTamaguiConfig['tokens']\n themes: {\n [key: string]: {\n [key: string]: string | number | Variable\n }\n }\n\n defaultProps?: Record<string, any> & {\n Stack?: StackProps\n Text?: TextProps\n Spacer?: SpacerProps\n }\n\n // for the first render, determines which media queries are true\n // useful for SSR\n mediaQueryDefaultActive?: MediaQueryKey[]\n\n // what's between each CSS style rule, set to \"\\n\" to be easier to read\n // defaults: \"\\n\" when NODE_ENV=development, \"\" otherwise\n cssStyleSeparator?: string\n\n // (Advanced)\n // on the web, tamagui treats `dark` and `light` themes as special and\n // generates extra CSS to avoid having to re-render the entire page.\n // this CSS relies on specificity hacks that multiply by your sub-themes.\n // this sets the maxiumum number of nested dark/light themes you can do\n // defaults to 3 for a balance, but can be higher if you nest them deeply.\n maxDarkLightNesting?: number\n\n // adds @media(prefers-color-scheme) media queries for dark/light\n shouldAddPrefersColorThemes?: boolean\n\n // only if you put the theme classname on the html element we have to generate diff\n themeClassNameOnRoot?: boolean\n }\n\n// config is re-run by the @tamagui/static, dont double validate\nconst createdConfigs = new WeakMap<any, boolean>()\n\nexport type InferTamaguiConfig<Conf extends CreateTamaguiProps> = Conf extends Partial<\n CreateTamaguiConfig<infer A, infer B, infer C, infer D, infer E, infer F>\n>\n ? TamaguiInternalConfig<A, B, C, D, E, F>\n : unknown\n\nexport function createTamagui<Conf extends CreateTamaguiProps>(\n config: Conf\n): InferTamaguiConfig<Conf> {\n if (createdConfigs.has(config)) {\n return config as any\n }\n\n if (process.env.NODE_ENV === 'development') {\n if (!config.tokens) {\n throw new Error(`No tokens provided to Tamagui config`)\n }\n if (!config.themes) {\n throw new Error(`No themes provided to Tamagui config`)\n }\n if (!config.fonts) {\n throw new Error(`No fonts provided to Tamagui config`)\n }\n }\n\n // test env loads a few times as it runs diff tests\n if (getHasConfigured()) {\n console.warn(`Warning: createTamagui called twice (maybe HMR)`)\n }\n\n configureMedia({\n queries: config.media as any,\n defaultActive: config.mediaQueryDefaultActive,\n })\n\n const fontTokens = createVariables(config.fonts!)\n const fontsParsed = (() => {\n const res = {} as typeof fontTokens\n for (const familyName in fontTokens) {\n res[`$${familyName}`] = parseFont(fontTokens[familyName])\n }\n return res!\n })()\n\n const themeConfig = (() => {\n const themes = { ...config.themes }\n let cssRules: string[] = []\n\n if (isWeb) {\n for (const key in config.tokens) {\n for (const skey in config.tokens[key]) {\n const val = config.tokens[key][skey]\n registerCSSVariable(val)\n }\n }\n\n for (const key in fontsParsed) {\n const fontParsed = fontsParsed[key]\n registerFontVariables(fontParsed)\n }\n\n const sep = process.env.NODE_ENV === 'development' ? config.cssStyleSeparator || ' ' : ''\n cssRules.push(`:root {${sep}${[...tokenRules].join(`;${sep}`)}${sep}}`)\n }\n\n // special case for SSR\n const hasDarkLight = 'light' in config.themes && 'dark' in config.themes\n const CNP = `.${THEME_CLASSNAME_PREFIX}`\n\n // dedupe themes to avoid duplicate CSS generation\n type DedupedTheme = {\n names: string[]\n theme: ThemeObject\n }\n const dedupedThemes: {\n [key: string]: DedupedTheme\n } = {}\n const existing = new WeakMap<ThemeObject, DedupedTheme>()\n\n // first, de-dupe and parse them\n for (const themeName in themes) {\n const rawTheme = themes[themeName]\n\n // if existing, avoid\n if (existing.has(rawTheme)) {\n const e = existing.get(rawTheme)!\n themes[themeName] = e.theme\n e.names.push(themeName)\n continue\n }\n\n // parse into variables\n const theme = { ...config.themes[themeName] }\n for (const key in theme) {\n // make sure properly names theme variables\n ensureThemeVariable(theme, key)\n }\n themes[themeName] = theme\n\n // set deduped\n dedupedThemes[themeName] = {\n names: [themeName],\n theme,\n }\n existing.set(config.themes[themeName], dedupedThemes[themeName])\n }\n\n // then, generate from de-duped\n if (isWeb) {\n for (const themeName in dedupedThemes) {\n const { theme, names } = dedupedThemes[themeName]\n let vars = ''\n\n for (const themeKey in theme) {\n const variable = theme[themeKey] as Variable\n let value: any = null\n if (variable.isFloating || !tokensValueToVariable.has(variable.val)) {\n value = variable.val\n } else {\n value = tokensValueToVariable.get(variable.val)!.variable\n }\n vars += `--${themeKey}:${value};`\n }\n\n const isDarkOrLightBase = themeName === 'dark' || themeName === 'light'\n const selectors = names.map((name) => {\n return `${CNP}${name}`\n })\n\n // since we dont specify dark/light in classnames we have to do an awkward specificity war\n // use config.maxDarkLightNesting to determine how deep you can nest until it breaks\n if (hasDarkLight) {\n for (const subName of names) {\n const isDark = isDarkOrLightBase || subName.startsWith('dark_')\n const childSelector = `${CNP}${subName.replace(isDark ? 'dark_' : 'light_', '')}`\n const order = isDark ? ['dark', 'light'] : ['light', 'dark']\n if (isDarkOrLightBase) {\n order.reverse()\n }\n const [stronger, weaker] = order\n const max = config.maxDarkLightNesting ?? 3\n\n new Array(Math.round(max * 1.5)).fill(undefined).forEach((_, pi) => {\n const isOdd = pi % 2 === 1\n if (isOdd && pi < 3) return\n const parents = new Array(pi + 1).fill(undefined).map((_, psi) => {\n return `${CNP}${psi % 2 === 0 ? stronger : weaker}`\n })\n let parentSelectors = parents.length > 1 ? parents.slice(1) : parents\n if (isOdd) {\n const [_first, second, ...rest] = parentSelectors\n parentSelectors = [second, ...rest, second]\n }\n selectors.push(`${parentSelectors.join(' ')} ${childSelector}`)\n })\n }\n }\n\n const rootSep = config.themeClassNameOnRoot ? '' : ' '\n const css = `${selectors.map((x) => `:root${rootSep}${x}`).join(', ')} {${vars}}`\n cssRules.push(css)\n\n if (config.shouldAddPrefersColorThemes && isDarkOrLightBase) {\n // add media prefers for dark/light base\n const isDark = themeName.startsWith('dark')\n cssRules.push(\n `@media(prefers-color-scheme: ${isDark ? 'dark' : 'light'}) {\n body { background:${theme.background}; color: ${theme.color} }\n :root {${vars} } \n }`\n )\n }\n }\n }\n\n // proxy upwards to get parent variables (themes are subset going down)\n for (const themeName in themes) {\n // we could test if this is better as just a straight object spread or fancier proxy\n const cur: string[] = []\n // if theme is dark_blue_alt1_Button\n // this will be the parent names in order: ['dark', 'dark_blue', 'dark_blue_alt1\"]\n const parents = themeName\n .split('_')\n .slice(0, -1)\n .map((part) => {\n cur.push(part)\n return cur.join('_')\n })\n\n if (!parents.length) continue\n\n themes[themeName] = new Proxy(themes[themeName], {\n get(target, key) {\n if (Reflect.has(target, key)) {\n return Reflect.get(target, key)\n }\n // check parents\n for (let i = parents.length - 1; i >= 0; i--) {\n const parent = themes[parents[i]]\n if (!parent) {\n continue\n }\n if (Reflect.has(parent, key)) {\n return Reflect.get(parent, key)\n }\n }\n },\n })\n }\n\n tokensValueToVariable.clear()\n Object.freeze(cssRules)\n const css = cssRules.join('\\n')\n\n return {\n themes,\n cssRules,\n css,\n }\n })()\n\n // faster lookups token keys become $keys to match input\n const tokensParsed: any = parseTokens(config.tokens)\n\n const getCSS = () => {\n return `${themeConfig.css}\\n${getInsertedRules().join('\\n')}`\n }\n\n if (config.shorthands) {\n for (const key in config.shorthands) {\n reversedShorthands[config.shorthands[key]] = key\n }\n }\n\n const next: TamaguiInternalConfig = {\n defaultTheme: 'light',\n fonts: {},\n animations: {} as any,\n shorthands: {},\n media: {},\n ...config,\n themes: themeConfig.themes,\n fontsParsed,\n themeConfig,\n tokensParsed,\n parsed: true,\n getCSS,\n Provider: null as any,\n }\n\n next.Provider = createTamaguiProvider(next)\n\n setConfig(next)\n\n if (configListeners.size) {\n configListeners.forEach((cb) => cb(next))\n configListeners.clear()\n }\n\n createdConfigs.set(next, true)\n\n if (process.env.NODE_ENV === 'development') {\n if (!globalThis['Tamagui']) {\n globalThis['Tamagui'] = Tamagui\n }\n }\n\n // @ts-expect-error\n return next\n}\n\nexport const reversedShorthands: Record<string, string> = {}\n\nconst parseTokens = (tokens: any) => {\n const res: any = {}\n for (const key in tokens) {\n res[key] = {}\n for (const skey in tokens[key]) {\n res[key][`$${skey}`] = tokens[key][skey]\n }\n }\n return res\n}\n\n// mutates, freeze after\n// shared by createTamagui so extracted here\nfunction ensureThemeVariable(theme: any, key: string) {\n const val = theme[key]\n const themeKey = key\n if (!isVariable(val)) {\n theme[key] = createVariable({\n key: themeKey,\n name: themeKey,\n val,\n })\n } else {\n if (val.name !== themeKey) {\n // rename to theme name\n theme[key] = createVariable({\n key: val.name,\n name: themeKey,\n val: val.val,\n })\n }\n }\n}\n\n// for quick testing types:\n// const x = createTamagui({\n// shorthands: {},\n// media: {},\n// themes: {},\n// tokens: {\n// font: {},\n// color: {},\n// radius: {},\n// size: {},\n// space: {},\n// zIndex: {},\n// },\n// })\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA6D;AAC7D,uBAAuC;AACvC,sBAAsB;AAEtB,4BAAqD;AACrD,6BAAgC;AAChC,mCAAsC;AACtC,6BAAiC;AACjC,iCAIO;AACP,sBAA+B;AAC/B,wBAAiD;AACjD,qBAAwB;AAqDxB,MAAM,iBAAiB,oBAAI,QAAsB;AAQ1C,uBACL,QAC0B;AAC1B,MAAI,eAAe,IAAI,MAAM,GAAG;AAC9B,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,CAAC,OAAO,QAAQ;AAClB,YAAM,IAAI,MAAM,sCAAsC;AAAA,IACxD;AACA,QAAI,CAAC,OAAO,QAAQ;AAClB,YAAM,IAAI,MAAM,sCAAsC;AAAA,IACxD;AACA,QAAI,CAAC,OAAO,OAAO;AACjB,YAAM,IAAI,MAAM,qCAAqC;AAAA,IACvD;AAAA,EACF;AAGA,MAAI,kCAAiB,
|
|
4
|
+
"sourcesContent": ["import { configListeners, getHasConfigured, setConfig } from './conf'\nimport { THEME_CLASSNAME_PREFIX } from './constants/constants'\nimport { isWeb } from './constants/platform'\nimport { SpacerProps } from './createComponent'\nimport { themeToVariableToValueMap } from './createTheme'\nimport { Variable, createVariable, isVariable } from './createVariable'\nimport { createVariables } from './createVariables'\nimport { createTamaguiProvider } from './helpers/createTamaguiProvider'\nimport { getInsertedRules } from './helpers/insertStyleRule'\nimport {\n registerCSSVariable,\n tokenRules,\n tokensValueToVariable,\n} from './helpers/registerCSSVariable'\nimport { GetThemeUnwrapped } from './hooks/getThemeUnwrapped'\nimport { configureMedia } from './hooks/useMedia'\nimport { parseFont, registerFontVariables } from './insertFont'\nimport { Tamagui } from './Tamagui'\nimport {\n AnimationDriver,\n CreateTamaguiConfig,\n GenericTamaguiConfig,\n MediaQueryKey,\n StackProps,\n TamaguiInternalConfig,\n TextProps,\n ThemeObject,\n} from './types'\n\nexport type CreateTamaguiProps =\n // user then re-defines the types after createTamagui returns the typed object they want\n Partial<Omit<GenericTamaguiConfig, 'themes' | 'tokens' | 'animations'>> & {\n animations?: AnimationDriver<any>\n tokens: GenericTamaguiConfig['tokens']\n themes: {\n [key: string]: {\n [key: string]: string | number | Variable\n }\n }\n\n defaultProps?: Record<string, any> & {\n Stack?: StackProps\n Text?: TextProps\n Spacer?: SpacerProps\n }\n\n // for the first render, determines which media queries are true\n // useful for SSR\n mediaQueryDefaultActive?: MediaQueryKey[]\n\n // what's between each CSS style rule, set to \"\\n\" to be easier to read\n // defaults: \"\\n\" when NODE_ENV=development, \"\" otherwise\n cssStyleSeparator?: string\n\n // (Advanced)\n // on the web, tamagui treats `dark` and `light` themes as special and\n // generates extra CSS to avoid having to re-render the entire page.\n // this CSS relies on specificity hacks that multiply by your sub-themes.\n // this sets the maxiumum number of nested dark/light themes you can do\n // defaults to 3 for a balance, but can be higher if you nest them deeply.\n maxDarkLightNesting?: number\n\n // adds @media(prefers-color-scheme) media queries for dark/light\n shouldAddPrefersColorThemes?: boolean\n\n // only if you put the theme classname on the html element we have to generate diff\n themeClassNameOnRoot?: boolean\n }\n\n// config is re-run by the @tamagui/static, dont double validate\nconst createdConfigs = new WeakMap<any, boolean>()\n\nexport type InferTamaguiConfig<Conf extends CreateTamaguiProps> = Conf extends Partial<\n CreateTamaguiConfig<infer A, infer B, infer C, infer D, infer E, infer F>\n>\n ? TamaguiInternalConfig<A, B, C, D, E, F>\n : unknown\n\nexport function createTamagui<Conf extends CreateTamaguiProps>(\n config: Conf\n): InferTamaguiConfig<Conf> {\n if (createdConfigs.has(config)) {\n return config as any\n }\n\n if (process.env.NODE_ENV === 'development') {\n if (!config.tokens) {\n throw new Error(`No tokens provided to Tamagui config`)\n }\n if (!config.themes) {\n throw new Error(`No themes provided to Tamagui config`)\n }\n if (!config.fonts) {\n throw new Error(`No fonts provided to Tamagui config`)\n }\n }\n\n // test env loads a few times as it runs diff tests\n if (getHasConfigured() && process.env.IS_STATIC !== 'is_static') {\n console.trace(`Warning: createTamagui called twice (maybe HMR)`)\n }\n\n configureMedia({\n queries: config.media as any,\n defaultActive: config.mediaQueryDefaultActive,\n })\n\n const fontTokens = createVariables(config.fonts!)\n const fontsParsed = (() => {\n const res = {} as typeof fontTokens\n for (const familyName in fontTokens) {\n res[`$${familyName}`] = parseFont(fontTokens[familyName])\n }\n return res!\n })()\n\n const themeConfig = (() => {\n const themes = { ...config.themes }\n const cssRules: string[] = []\n\n if (isWeb) {\n for (const key in config.tokens) {\n for (const skey in config.tokens[key]) {\n const val = config.tokens[key][skey]\n registerCSSVariable(val)\n }\n }\n\n for (const key in fontsParsed) {\n const fontParsed = fontsParsed[key]\n registerFontVariables(fontParsed)\n }\n\n const sep = process.env.NODE_ENV === 'development' ? config.cssStyleSeparator || ' ' : ''\n cssRules.push(`:root {${sep}${[...tokenRules].join(`;${sep}`)}${sep}}`)\n }\n\n // special case for SSR\n const hasDarkLight = 'light' in config.themes && 'dark' in config.themes\n const CNP = `.${THEME_CLASSNAME_PREFIX}`\n\n // dedupe themes to avoid duplicate CSS generation\n type DedupedTheme = {\n names: string[]\n theme: ThemeObject\n }\n const dedupedThemes: {\n [key: string]: DedupedTheme\n } = {}\n const existing = new WeakMap<ThemeObject, DedupedTheme>()\n\n // first, de-dupe and parse them\n for (const themeName in themes) {\n const rawTheme = themes[themeName]\n\n // if existing, avoid\n if (existing.has(rawTheme)) {\n const e = existing.get(rawTheme)!\n themes[themeName] = e.theme\n e.names.push(themeName)\n continue\n }\n\n // parse into variables\n const theme = { ...config.themes[themeName] }\n for (const key in theme) {\n // make sure properly names theme variables\n ensureThemeVariable(theme, key)\n }\n themes[themeName] = theme\n\n // set deduped\n dedupedThemes[themeName] = {\n names: [themeName],\n theme,\n }\n existing.set(config.themes[themeName], dedupedThemes[themeName])\n }\n\n // then, generate from de-duped\n if (isWeb) {\n for (const themeName in dedupedThemes) {\n const { theme, names } = dedupedThemes[themeName]\n let vars = ''\n\n themeToVariableToValueMap.set(theme, {})\n const varToValMap = themeToVariableToValueMap.get(theme)\n for (const themeKey in theme) {\n const variable = theme[themeKey] as Variable\n let value: any = null\n if (varToValMap) {\n varToValMap[variable.variable] = variable.val\n }\n if (variable.isFloating || !tokensValueToVariable.has(variable.val)) {\n value = variable.val\n } else {\n value = tokensValueToVariable.get(variable.val)!.variable\n }\n vars += `--${themeKey}:${value};`\n }\n\n const isDarkOrLightBase = themeName === 'dark' || themeName === 'light'\n const selectors = names.map((name) => {\n return `${CNP}${name}`\n })\n\n // since we dont specify dark/light in classnames we have to do an awkward specificity war\n // use config.maxDarkLightNesting to determine how deep you can nest until it breaks\n if (hasDarkLight) {\n for (const subName of names) {\n const isDark = isDarkOrLightBase || subName.startsWith('dark_')\n const childSelector = `${CNP}${subName.replace(isDark ? 'dark_' : 'light_', '')}`\n const order = isDark ? ['dark', 'light'] : ['light', 'dark']\n if (isDarkOrLightBase) {\n order.reverse()\n }\n const [stronger, weaker] = order\n const max = config.maxDarkLightNesting ?? 3\n\n new Array(Math.round(max * 1.5)).fill(undefined).forEach((_, pi) => {\n const isOdd = pi % 2 === 1\n if (isOdd && pi < 3) return\n const parents = new Array(pi + 1).fill(undefined).map((_, psi) => {\n return `${CNP}${psi % 2 === 0 ? stronger : weaker}`\n })\n let parentSelectors = parents.length > 1 ? parents.slice(1) : parents\n if (isOdd) {\n const [_first, second, ...rest] = parentSelectors\n parentSelectors = [second, ...rest, second]\n }\n selectors.push(`${parentSelectors.join(' ')} ${childSelector}`)\n })\n }\n }\n\n const rootSep = config.themeClassNameOnRoot ? '' : ' '\n const css = `${selectors.map((x) => `:root${rootSep}${x}`).join(', ')} {${vars}}`\n cssRules.push(css)\n\n if (config.shouldAddPrefersColorThemes && isDarkOrLightBase) {\n // add media prefers for dark/light base\n const isDark = themeName.startsWith('dark')\n cssRules.push(\n `@media(prefers-color-scheme: ${isDark ? 'dark' : 'light'}) {\n body { background:${theme.background}; color: ${theme.color} }\n :root {${vars} } \n }`\n )\n }\n }\n }\n\n // proxy upwards to get parent variables (themes are subset going down)\n for (const themeName in themes) {\n // we could test if this is better as just a straight object spread or fancier proxy\n const cur: string[] = []\n // if theme is dark_blue_alt1_Button\n // this will be the parent names in order: ['dark', 'dark_blue', 'dark_blue_alt1\"]\n const parents = themeName\n .split('_')\n .slice(0, -1)\n .map((part) => {\n cur.push(part)\n return cur.join('_')\n })\n\n if (!parents.length) continue\n\n const og = themes[themeName]\n themes[themeName] = new Proxy(og, {\n get(target, key) {\n if (key === GetThemeUnwrapped) {\n return og\n }\n if (Reflect.has(target, key)) {\n return Reflect.get(target, key)\n }\n // check parents\n for (let i = parents.length - 1; i >= 0; i--) {\n const parent = themes[parents[i]]\n if (!parent) {\n continue\n }\n if (Reflect.has(parent, key)) {\n return Reflect.get(parent, key)\n }\n }\n return Reflect.get(target, key)\n },\n })\n }\n\n tokensValueToVariable.clear()\n Object.freeze(cssRules)\n const css = cssRules.join('\\n')\n\n return {\n themes,\n cssRules,\n css,\n }\n })()\n\n // faster lookups token keys become $keys to match input\n const tokensParsed: any = parseTokens(config.tokens)\n\n const getCSS = () => {\n return `${themeConfig.css}\\n${getInsertedRules().join('\\n')}`\n }\n\n if (config.shorthands) {\n for (const key in config.shorthands) {\n reversedShorthands[config.shorthands[key]] = key\n }\n }\n\n const next: TamaguiInternalConfig = {\n defaultTheme: 'light',\n fonts: {},\n animations: {} as any,\n shorthands: {},\n media: {},\n ...config,\n themes: themeConfig.themes,\n fontsParsed,\n themeConfig,\n tokensParsed,\n parsed: true,\n getCSS,\n Provider: null as any,\n }\n\n next.Provider = createTamaguiProvider(next)\n\n setConfig(next)\n\n if (configListeners.size) {\n configListeners.forEach((cb) => cb(next))\n configListeners.clear()\n }\n\n createdConfigs.set(next, true)\n\n if (process.env.NODE_ENV === 'development') {\n if (!globalThis['Tamagui']) {\n globalThis['Tamagui'] = Tamagui\n }\n }\n\n // @ts-expect-error\n return next\n}\n\nexport const reversedShorthands: Record<string, string> = {}\n\nconst parseTokens = (tokens: any) => {\n const res: any = {}\n for (const key in tokens) {\n res[key] = {}\n for (const skey in tokens[key]) {\n res[key][`$${skey}`] = tokens[key][skey]\n }\n }\n return res\n}\n\n// mutates, freeze after\n// shared by createTamagui so extracted here\nfunction ensureThemeVariable(theme: any, key: string) {\n const val = theme[key]\n const themeKey = key\n if (!isVariable(val)) {\n theme[key] = createVariable({\n key: themeKey,\n name: themeKey,\n val,\n })\n } else {\n if (val.name !== themeKey) {\n // rename to theme name\n theme[key] = createVariable({\n key: val.name,\n name: themeKey,\n val: val.val,\n })\n }\n }\n}\n\n// for quick testing types:\n// const x = createTamagui({\n// shorthands: {},\n// media: {},\n// themes: {},\n// tokens: {\n// font: {},\n// color: {},\n// radius: {},\n// size: {},\n// space: {},\n// zIndex: {},\n// },\n// })\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/createTheme.js
CHANGED
|
@@ -17,14 +17,17 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
18
|
var createTheme_exports = {};
|
|
19
19
|
__export(createTheme_exports, {
|
|
20
|
-
createTheme: () => createTheme
|
|
20
|
+
createTheme: () => createTheme,
|
|
21
|
+
themeToVariableToValueMap: () => themeToVariableToValueMap
|
|
21
22
|
});
|
|
22
23
|
module.exports = __toCommonJS(createTheme_exports);
|
|
24
|
+
const themeToVariableToValueMap = /* @__PURE__ */ new WeakMap();
|
|
23
25
|
const createTheme = (theme) => {
|
|
24
26
|
return theme;
|
|
25
27
|
};
|
|
26
28
|
// Annotate the CommonJS export names for ESM import in node:
|
|
27
29
|
0 && (module.exports = {
|
|
28
|
-
createTheme
|
|
30
|
+
createTheme,
|
|
31
|
+
themeToVariableToValueMap
|
|
29
32
|
});
|
|
30
33
|
//# sourceMappingURL=createTheme.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createTheme.ts"],
|
|
4
|
-
"sourcesContent": ["import { Variable } from './createVariable'\n\ntype GenericTheme = { [key: string]: string | Variable }\n\nexport const createTheme = <Theme extends GenericTheme>(\n theme: Theme\n): {\n [K in keyof Theme]: Theme[K] | string | Variable\n} => {\n return theme\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIO,MAAM,cAAc,CACzB,UAGG;AACH,SAAO;AACT;",
|
|
4
|
+
"sourcesContent": ["import { Variable } from './createVariable'\n\ntype GenericTheme = { [key: string]: string | Variable }\n\nexport const themeToVariableToValueMap = new WeakMap<any, Record<string, string>>()\n\nexport const createTheme = <Theme extends GenericTheme>(\n theme: Theme\n): {\n [K in keyof Theme]: Theme[K] | string | Variable\n} => {\n return theme\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIO,MAAM,4BAA4B,oBAAI,QAAqC;AAE3E,MAAM,cAAc,CACzB,UAGG;AACH,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -23,7 +23,7 @@ __export(createMediaStyle_exports, {
|
|
|
23
23
|
module.exports = __toCommonJS(createMediaStyle_exports);
|
|
24
24
|
var import_useMedia = require("../hooks/useMedia");
|
|
25
25
|
const MEDIA_SEP = "_";
|
|
26
|
-
const createMediaStyle = ({ identifier, rules }, mediaKey, mediaQueries, negate, importance) => {
|
|
26
|
+
const createMediaStyle = ({ property, identifier, rules }, mediaKey, mediaQueries, negate, importance) => {
|
|
27
27
|
const mediaKeys = Object.keys(mediaQueries);
|
|
28
28
|
const importance_ = Math.max(0, importance == void 0 ? mediaKeys.indexOf(mediaKey) : importance || 0);
|
|
29
29
|
const precendencePrefix = new Array(importance_ + 1).fill(":root").join("");
|
|
@@ -42,7 +42,8 @@ const createMediaStyle = ({ identifier, rules }, mediaKey, mediaQueries, negate,
|
|
|
42
42
|
}
|
|
43
43
|
styleRule = styleRule.replace(";}", " !important;}");
|
|
44
44
|
return {
|
|
45
|
-
|
|
45
|
+
property,
|
|
46
|
+
rules: [styleRule],
|
|
46
47
|
identifier: nextIdentifier
|
|
47
48
|
};
|
|
48
49
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/createMediaStyle.ts"],
|
|
4
|
-
"sourcesContent": ["import { StyleObject } from '@tamagui/helpers'\n\nimport { mediaObjectToString } from '../hooks/useMedia'\nimport { MediaQueries } from '../types'\n\n// TODO have this be used by extractMediaStyle in tamagui static\n// not synced to static/constants for now\nexport const MEDIA_SEP = '_'\n\nexport const createMediaStyle = (\n { identifier, rules }: StyleObject,\n mediaKey: string,\n mediaQueries: MediaQueries,\n negate?: boolean,\n importance?: number\n) => {\n const mediaKeys = Object.keys(mediaQueries)\n const importance_ = Math.max(\n 0,\n importance == undefined ? mediaKeys.indexOf(mediaKey) : importance || 0\n )\n const precendencePrefix = new Array(importance_ + 1).fill(':root').join('')\n const negKey = negate ? '0' : ''\n const ogPrefix = identifier.slice(0, identifier.indexOf('-') + 1)\n const nextIdentifier = `${identifier.replace(\n ogPrefix,\n `${ogPrefix}${MEDIA_SEP}${mediaKey}${negKey}${MEDIA_SEP}`\n )}`\n const screenStr = negate ? 'not all' : 'screen'\n const mediaSelector = mediaObjectToString(mediaQueries[mediaKey])\n const mediaQuery = `${screenStr} and ${mediaSelector}`\n const styleInner = rules.map((rule) => rule.replace(identifier, nextIdentifier)).join(';')\n // combines media queries if they already exist\n let styleRule = ''\n if (styleInner.includes('@media')) {\n // combine\n styleRule = styleInner.replace('{', ` and ${mediaQuery} {`)\n } else {\n styleRule = `@media ${mediaQuery} { ${precendencePrefix} ${styleInner} }`\n }\n styleRule = styleRule.replace(';}', ' !important;}')\n return {\n styleRule,\n identifier: nextIdentifier,\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAAoC;
|
|
4
|
+
"sourcesContent": ["import { StyleObject } from '@tamagui/helpers'\n\nimport { mediaObjectToString } from '../hooks/useMedia'\nimport { MediaQueries } from '../types'\nimport { PartialStyleObject } from './insertStyleRule'\n\n// TODO have this be used by extractMediaStyle in tamagui static\n// not synced to static/constants for now\nexport const MEDIA_SEP = '_'\n\nexport const createMediaStyle = (\n { property, identifier, rules }: StyleObject,\n mediaKey: string,\n mediaQueries: MediaQueries,\n negate?: boolean,\n importance?: number\n): PartialStyleObject => {\n const mediaKeys = Object.keys(mediaQueries)\n const importance_ = Math.max(\n 0,\n importance == undefined ? mediaKeys.indexOf(mediaKey) : importance || 0\n )\n const precendencePrefix = new Array(importance_ + 1).fill(':root').join('')\n const negKey = negate ? '0' : ''\n const ogPrefix = identifier.slice(0, identifier.indexOf('-') + 1)\n const nextIdentifier = `${identifier.replace(\n ogPrefix,\n `${ogPrefix}${MEDIA_SEP}${mediaKey}${negKey}${MEDIA_SEP}`\n )}`\n const screenStr = negate ? 'not all' : 'screen'\n const mediaSelector = mediaObjectToString(mediaQueries[mediaKey])\n const mediaQuery = `${screenStr} and ${mediaSelector}`\n const styleInner = rules.map((rule) => rule.replace(identifier, nextIdentifier)).join(';')\n // combines media queries if they already exist\n let styleRule = ''\n if (styleInner.includes('@media')) {\n // combine\n styleRule = styleInner.replace('{', ` and ${mediaQuery} {`)\n } else {\n styleRule = `@media ${mediaQuery} { ${precendencePrefix} ${styleInner} }`\n }\n styleRule = styleRule.replace(';}', ' !important;}')\n return {\n property,\n rules: [styleRule],\n identifier: nextIdentifier,\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAAoC;AAM7B,MAAM,YAAY;AAElB,MAAM,mBAAmB,CAC9B,EAAE,UAAU,YAAY,SACxB,UACA,cACA,QACA,eACuB;AACvB,QAAM,YAAY,OAAO,KAAK,YAAY;AAC1C,QAAM,cAAc,KAAK,IACvB,GACA,cAAc,SAAY,UAAU,QAAQ,QAAQ,IAAI,cAAc,CACxE;AACA,QAAM,oBAAoB,IAAI,MAAM,cAAc,CAAC,EAAE,KAAK,OAAO,EAAE,KAAK,EAAE;AAC1E,QAAM,SAAS,SAAS,MAAM;AAC9B,QAAM,WAAW,WAAW,MAAM,GAAG,WAAW,QAAQ,GAAG,IAAI,CAAC;AAChE,QAAM,iBAAiB,GAAG,WAAW,QACnC,UACA,GAAG,WAAW,YAAY,WAAW,SAAS,WAChD;AACA,QAAM,YAAY,SAAS,YAAY;AACvC,QAAM,gBAAgB,yCAAoB,aAAa,SAAS;AAChE,QAAM,aAAa,GAAG,iBAAiB;AACvC,QAAM,aAAa,MAAM,IAAI,CAAC,SAAS,KAAK,QAAQ,YAAY,cAAc,CAAC,EAAE,KAAK,GAAG;AAEzF,MAAI,YAAY;AAChB,MAAI,WAAW,SAAS,QAAQ,GAAG;AAEjC,gBAAY,WAAW,QAAQ,KAAK,QAAQ,cAAc;AAAA,EAC5D,OAAO;AACL,gBAAY,UAAU,gBAAgB,qBAAqB;AAAA,EAC7D;AACA,cAAY,UAAU,QAAQ,MAAM,eAAe;AACnD,SAAO;AAAA,IACL;AAAA,IACA,OAAO,CAAC,SAAS;AAAA,IACjB,YAAY;AAAA,EACd;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/createShallowUpdate.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback } from 'react'\n\nexport function createShallowUpdate<State extends Object>(\n setter: React.Dispatch<React.SetStateAction<State>>\n) {\n return useCallback(\n (next: Partial<State>) => {\n setter((prev) => {\n for (const key in next) {\n if (prev[key] !== next[key]) {\n return { ...prev, ...next }\n }\n }\n return prev\n })\n },\n [setter]\n )\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AAE5B,6BACL,QACA;
|
|
4
|
+
"sourcesContent": ["import React, { useCallback } from 'react'\n\nexport function createShallowUpdate<State extends Object>(\n setter: React.Dispatch<React.SetStateAction<State>>\n) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useCallback(\n (next: Partial<State>) => {\n setter((prev) => {\n for (const key in next) {\n if (prev[key] !== next[key]) {\n return { ...prev, ...next }\n }\n }\n return prev\n })\n },\n [setter]\n )\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AAE5B,6BACL,QACA;AAEA,SAAO,8BACL,CAAC,SAAyB;AACxB,WAAO,CAAC,SAAS;AACf,iBAAW,OAAO,MAAM;AACtB,YAAI,KAAK,SAAS,KAAK,MAAM;AAC3B,iBAAO,kCAAK,OAAS;AAAA,QACvB;AAAA,MACF;AACA,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GACA,CAAC,MAAM,CACT;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -84,21 +84,16 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, de
|
|
|
84
84
|
const pseudos = {};
|
|
85
85
|
const medias = {};
|
|
86
86
|
const usedKeys = /* @__PURE__ */ new Set();
|
|
87
|
-
|
|
87
|
+
const propKeys = Object.keys(props);
|
|
88
|
+
const shouldDoClasses = (import_platform.isWeb || process.env.IS_STATIC === "is_static") && !state.noClassNames;
|
|
89
|
+
const len = propKeys.length;
|
|
90
|
+
const rulesToInsert = [];
|
|
91
|
+
const style = {};
|
|
88
92
|
if (state.hasTextAncestor) {
|
|
89
93
|
style.display = "inline-flex";
|
|
90
94
|
}
|
|
91
95
|
let classNames = {};
|
|
92
96
|
let transforms = null;
|
|
93
|
-
let rulesToInsert = null;
|
|
94
|
-
function addStyle(prop, rule) {
|
|
95
|
-
if (process.env.TAMAGUI_TARGET === "web") {
|
|
96
|
-
if ((0, import_insertStyleRule.updateInsertedCache)(prop, rule) || !import_platform.isClient && process.env.NODE_ENV === "production") {
|
|
97
|
-
rulesToInsert = rulesToInsert || [];
|
|
98
|
-
rulesToInsert.push([prop, rule]);
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
97
|
function mergeClassName(key, val, isMediaOrPseudo = false) {
|
|
103
98
|
if (process.env.TAMAGUI_TARGET === "web") {
|
|
104
99
|
if (!val)
|
|
@@ -137,9 +132,6 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, de
|
|
|
137
132
|
}
|
|
138
133
|
}
|
|
139
134
|
}
|
|
140
|
-
const propKeys = Object.keys(props);
|
|
141
|
-
const shouldDoClasses = (import_platform.isWeb || process.env.IS_STATIC === "is_static") && !state.noClassNames;
|
|
142
|
-
const len = propKeys.length;
|
|
143
135
|
for (let i = len - 1; i >= 0; i--) {
|
|
144
136
|
const keyInit = propKeys[i];
|
|
145
137
|
if (usedKeys.has(keyInit))
|
|
@@ -258,7 +250,7 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, de
|
|
|
258
250
|
const fullKey = `${style2.property}${PROP_SPLIT}${postfix}`;
|
|
259
251
|
if (!usedKeys.has(fullKey)) {
|
|
260
252
|
usedKeys.add(fullKey);
|
|
261
|
-
|
|
253
|
+
addStyleToInsertRules(rulesToInsert, style2);
|
|
262
254
|
mergeClassName(fullKey, style2.identifier, isMediaOrPseudo);
|
|
263
255
|
}
|
|
264
256
|
}
|
|
@@ -285,7 +277,7 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, de
|
|
|
285
277
|
const fullKey = `${style2.property}${PROP_SPLIT}${mediaKeyShort}`;
|
|
286
278
|
if (!usedKeys.has(fullKey)) {
|
|
287
279
|
usedKeys.add(fullKey);
|
|
288
|
-
|
|
280
|
+
addStyleToInsertRules(rulesToInsert, out);
|
|
289
281
|
mergeClassName(fullKey, out.identifier, true);
|
|
290
282
|
}
|
|
291
283
|
}
|
|
@@ -334,13 +326,16 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, de
|
|
|
334
326
|
const atomic = (0, import_getStylesAtomic.getStylesAtomic)(style);
|
|
335
327
|
for (const atomicStyle of atomic) {
|
|
336
328
|
const key = atomicStyle.property;
|
|
337
|
-
if (!state.dynamicStylesInline) {
|
|
338
|
-
|
|
329
|
+
if (key === "pointerEvents" || !state.dynamicStylesInline) {
|
|
330
|
+
addStyleToInsertRules(rulesToInsert, atomicStyle);
|
|
339
331
|
mergeClassName(key, atomicStyle.identifier);
|
|
340
332
|
} else {
|
|
341
333
|
style[key] = atomicStyle.value;
|
|
342
334
|
}
|
|
343
335
|
}
|
|
336
|
+
} else {
|
|
337
|
+
if (classNames && state.resolveVariablesAs === "value") {
|
|
338
|
+
}
|
|
344
339
|
}
|
|
345
340
|
if (process.env.TAMAGUI_TARGET === "web") {
|
|
346
341
|
if (transforms) {
|
|
@@ -356,7 +351,11 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, de
|
|
|
356
351
|
if (import_platform.isClient) {
|
|
357
352
|
if (!import_insertStyleRule.insertedTransforms[identifier]) {
|
|
358
353
|
const rule = `.${identifier} { transform: ${val}; }`;
|
|
359
|
-
|
|
354
|
+
addStyleToInsertRules(rulesToInsert, {
|
|
355
|
+
identifier,
|
|
356
|
+
rules: [rule],
|
|
357
|
+
property: namespace
|
|
358
|
+
});
|
|
360
359
|
}
|
|
361
360
|
}
|
|
362
361
|
classNames[namespace] = identifier;
|
|
@@ -365,7 +364,7 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, de
|
|
|
365
364
|
}
|
|
366
365
|
if (process.env.NODE_ENV === "development" && debug === "verbose") {
|
|
367
366
|
if (typeof document !== "undefined") {
|
|
368
|
-
console.log(" \xBB getSplitStyles out", { style, pseudos, medias, classNames, viewProps, state });
|
|
367
|
+
console.log(" \xBB getSplitStyles out", { style, pseudos, medias, classNames, viewProps, state, rulesToInsert });
|
|
369
368
|
}
|
|
370
369
|
}
|
|
371
370
|
return {
|
|
@@ -398,11 +397,7 @@ const getSubStyle = (styleIn, staticConfig, theme, props, state, conf2, avoidDef
|
|
|
398
397
|
};
|
|
399
398
|
const insertSplitStyles = (...args) => {
|
|
400
399
|
const res = getSplitStyles(...args);
|
|
401
|
-
|
|
402
|
-
for (const [prop, rule] of res.rulesToInsert) {
|
|
403
|
-
(0, import_insertStyleRule.insertStyleRule)(prop, rule);
|
|
404
|
-
}
|
|
405
|
-
}
|
|
400
|
+
(0, import_insertStyleRule.insertStyleRules)(res.rulesToInsert);
|
|
406
401
|
return res;
|
|
407
402
|
};
|
|
408
403
|
const useInsertEffectCompat = import_platform.isWeb ? import_react.useInsertionEffect || import_platform.useIsomorphicLayoutEffect : () => {
|
|
@@ -410,14 +405,17 @@ const useInsertEffectCompat = import_platform.isWeb ? import_react.useInsertionE
|
|
|
410
405
|
const useSplitStyles = (...args) => {
|
|
411
406
|
const res = getSplitStyles(...args);
|
|
412
407
|
useInsertEffectCompat(() => {
|
|
413
|
-
|
|
414
|
-
return;
|
|
415
|
-
for (const [prop, rule] of res.rulesToInsert) {
|
|
416
|
-
(0, import_insertStyleRule.insertStyleRule)(prop, rule);
|
|
417
|
-
}
|
|
408
|
+
(0, import_insertStyleRule.insertStyleRules)(res.rulesToInsert);
|
|
418
409
|
}, [res.rulesToInsert]);
|
|
419
410
|
return res;
|
|
420
411
|
};
|
|
412
|
+
function addStyleToInsertRules(rulesToInsert, styleObject) {
|
|
413
|
+
if (process.env.TAMAGUI_TARGET === "web") {
|
|
414
|
+
if (styleObject.property === "pointerEvents" || (0, import_insertStyleRule.updateInsertedCache)(styleObject.identifier, styleObject.rules) || !import_platform.isClient && process.env.NODE_ENV === "production") {
|
|
415
|
+
rulesToInsert.push(styleObject);
|
|
416
|
+
}
|
|
417
|
+
}
|
|
418
|
+
}
|
|
421
419
|
// Annotate the CommonJS export names for ESM import in node:
|
|
422
420
|
0 && (module.exports = {
|
|
423
421
|
PROP_SPLIT,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/getSplitStyles.tsx"],
|
|
4
|
-
"sourcesContent": ["import { stylePropsText, stylePropsTransform, validPseudoKeys, validStyles } from '@tamagui/helpers'\nimport { useInsertionEffect } from 'react'\nimport { ViewStyle } from 'react-native'\n\nimport { getConfig } from '../conf'\nimport { isClient, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { mediaQueryConfig, mediaState } from '../hooks/useMedia'\nimport {\n DebugProp,\n MediaKeys,\n MediaQueryKey,\n PseudoPropKeys,\n PseudoStyles,\n SplitStyleState,\n StackProps,\n StaticConfigParsed,\n TamaguiInternalConfig,\n ThemeObject,\n} from '../types'\nimport { createMediaStyle } from './createMediaStyle'\nimport { fixStyles } from './expandStyles'\nimport { getAtomicStyle, getStylesAtomic, styleToCSS } from './getStylesAtomic'\nimport {\n insertStyleRule,\n insertedTransforms,\n updateInserted,\n updateInsertedCache,\n} from './insertStyleRule'\nimport { mergeTransform } from './mergeTransform'\nimport { normalizeValueWithProperty } from './normalizeValueWithProperty'\nimport { pseudoDescriptors } from './pseudoDescriptors'\n\nexport type SplitStyles = ReturnType<typeof getSplitStyles>\nexport type ClassNamesObject = Record<string, string>\nexport type SplitStyleResult = ReturnType<typeof getSplitStyles>\n\nconst skipProps = {\n animation: true,\n animateOnly: true,\n debug: true,\n componentName: true,\n\n ...(!isWeb && {\n tag: true,\n whiteSpace: true,\n wordWrap: true,\n textOverflow: true,\n textDecorationDistance: true,\n userSelect: true,\n selectable: true,\n cursor: true,\n contain: true,\n boxSizing: true,\n boxShadow: true,\n }),\n}\n\ntype TransformNamespaceKey = 'transform' | PseudoPropKeys | MediaQueryKey\n\nlet conf: TamaguiInternalConfig\n\ntype StyleSplitter = (\n props: { [key: string]: any },\n staticConfig: StaticConfigParsed,\n theme: ThemeObject,\n state: SplitStyleState,\n defaultClassNames?: any,\n debug?: DebugProp\n) => {\n pseudos: PseudoStyles\n medias: Record<MediaKeys, ViewStyle>\n style: ViewStyle\n classNames: ClassNamesObject\n rulesToInsert: [string, string][] | null\n viewProps: StackProps\n}\n\nexport const PROP_SPLIT = '-'\n\n// this is how compiler outputs psueodo identifier\n// TODO remove in next refactor\nexport const pseudoCNInverse = {\n hover: 'hoverStyle',\n focus: 'focusStyle',\n press: 'pressStyle',\n}\n\n// loop props backwards\n// track used keys:\n// const keys = new Set<string>()\n// keep classnames and styles separate:\n// const styles = {}\n// const classNames = {}\n\nexport const getSplitStyles: StyleSplitter = (\n props,\n staticConfig,\n theme,\n state,\n defaultClassNames,\n debug\n) => {\n conf = conf || getConfig()\n const validStyleProps = staticConfig.isText ? stylePropsText : validStyles\n const viewProps: StackProps = {}\n const pseudos: PseudoStyles = {}\n const medias: Record<MediaKeys, ViewStyle> = {}\n const usedKeys = new Set<string>()\n\n let style: ViewStyle = {}\n if (state.hasTextAncestor) {\n // parity with react-native-web\n style.display = 'inline-flex' as any\n }\n let classNames: ClassNamesObject = {}\n // we need to gather these specific to each media query / pseudo\n // value is [hash, val], so [\"-jnjad-asdnjk\", \"scaleX(1) rotate(10deg)\"]\n let transforms = null as Record<TransformNamespaceKey, [string, string]> | null\n\n let rulesToInsert: [string, string][] | null = null\n function addStyle(prop: string, rule: string) {\n if (process.env.TAMAGUI_TARGET === 'web') {\n // NOTE this is super tricky\n // for some reason, next.js dev SSR actually misses a lot of styles (pre-hydrate) with || !isClient\n // which doesn't really make sense, because that should strictly extract *more* css, but oh well\n // meanwhile, production builds *need* to always be truthy here for node, thus the cheat conditional\n if (updateInsertedCache(prop, rule) || (!isClient && process.env.NODE_ENV === 'production')) {\n rulesToInsert = rulesToInsert || []\n rulesToInsert.push([prop, rule])\n }\n }\n }\n\n function mergeClassName(key: string, val: string, isMediaOrPseudo = false) {\n if (process.env.TAMAGUI_TARGET === 'web') {\n // empty classnames passed by compiler sometimes\n if (!val) return\n if (val.startsWith('_transform-')) {\n const namespace: TransformNamespaceKey = isMediaOrPseudo ? key : 'transform'\n\n let transform = insertedTransforms[val]\n if (isClient) {\n if (!transform) {\n // HMR or loaded a new chunk\n updateInserted()\n transform = insertedTransforms[val]\n if (process.env.NODE_ENV === 'development') {\n if (!transform) {\n console.warn('no transform found', { insertedTransforms, val })\n }\n }\n }\n if (!transform) {\n if (isWeb && val[0] !== '_') {\n // runtime insert\n transform = val\n }\n }\n if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n // prettier-ignore\n console.log(' \u00BB getSplitStyles mergeClassName transform', { key, val, namespace, transform, insertedTransforms })\n }\n }\n transforms = transforms || {}\n transforms[namespace] = transforms[namespace] || ['', '']\n const identifier = val.replace('_transform', '')\n transforms[namespace][0] += identifier\n // ssr doesn't need to do anything just make the right classname\n if (transform) {\n transforms[namespace][1] += transform\n }\n } else {\n classNames[key] = val\n }\n }\n }\n\n const propKeys = Object.keys(props)\n const shouldDoClasses = (isWeb || process.env.IS_STATIC === 'is_static') && !state.noClassNames\n const len = propKeys.length\n\n // loop backwards so we can skip already-used props\n for (let i = len - 1; i >= 0; i--) {\n const keyInit = propKeys[i]\n\n if (usedKeys.has(keyInit)) continue\n if (skipProps[keyInit]) continue\n if (!isWeb && keyInit.startsWith('data-')) continue\n\n const valInit = props[keyInit]\n\n if (keyInit === 'style' || keyInit.startsWith('_style')) {\n if (!valInit) continue\n for (const key in valInit) {\n if (usedKeys.has(key)) continue\n if (valInit && typeof valInit === 'object') {\n // newer react native versions return a full object instead of ID\n for (const skey in valInit) {\n if (usedKeys.has(skey)) continue\n usedKeys.add(skey)\n style[skey] = valInit[skey]\n }\n } else {\n usedKeys.add(key)\n style[key] = valInit\n }\n }\n continue\n }\n\n if (process.env.TAMAGUI_TARGET === 'web') {\n if (keyInit === 'className') {\n let nonTamaguis = ''\n if (!valInit) continue\n for (const cn of valInit.split(' ')) {\n if (cn[0] === '_') {\n // tamagui, merge it expanded on key, eventually this will go away with better compiler\n const [shorthand, mediaOrPseudo] = cn.slice(1).split('-')\n const isMedia = mediaOrPseudo[0] === '_'\n const isPseudo = mediaOrPseudo[0] === '0'\n const isMediaOrPseudo = isMedia || isPseudo\n let fullKey = conf.shorthands[shorthand]\n if (isMedia) {\n // is media\n let mediaShortKey = mediaOrPseudo.slice(1)\n mediaShortKey = mediaShortKey.slice(0, mediaShortKey.indexOf('_'))\n fullKey += `${PROP_SPLIT}${mediaShortKey}`\n } else if (isPseudo) {\n // is pseudo\n const pseudoShortKey = mediaOrPseudo.slice(1)\n fullKey += `${PROP_SPLIT}${pseudoShortKey}`\n }\n usedKeys.add(fullKey)\n mergeClassName(fullKey, cn, isMediaOrPseudo)\n } else {\n nonTamaguis += ' ' + cn\n }\n }\n if (nonTamaguis) {\n usedKeys.add(keyInit)\n mergeClassName(keyInit, nonTamaguis)\n }\n continue\n }\n\n if (valInit && valInit[0] === '_') {\n // if valid style key (or pseudo like color-hover):\n // this conditional and esp the pseudo check rarely runs so not a perf issue\n const isValidClassName = validStyles[keyInit]\n const isMediaOrPseudo =\n !isValidClassName &&\n keyInit.includes(PROP_SPLIT) &&\n validStyles[keyInit.split(PROP_SPLIT)[0]]\n if (isValidClassName || isMediaOrPseudo) {\n usedKeys.add(keyInit)\n mergeClassName(keyInit, valInit, isMediaOrPseudo)\n continue\n }\n }\n }\n\n if (\n state.keepVariantsAsProps &&\n staticConfig.defaultVariants &&\n keyInit in staticConfig.defaultVariants\n ) {\n viewProps[keyInit] = valInit\n }\n\n /**\n * There's (some) reason to this madness: we want to allow returning media/pseudo from variants\n * Say you have a variant hoverable: { true: { hoverStyle: {} } }\n * We run propMapper first to expand variant, then we run the inner loop and look again\n * for if there's a pseudo/media returned from it.\n */\n\n let isMedia = keyInit[0] === '$'\n let isPseudo = validPseudoKeys[keyInit]\n let isMediaOrPseudo = isMedia || isPseudo\n\n if (\n !isMedia &&\n !isPseudo &&\n !staticConfig.variants?.[keyInit] &&\n !validStyleProps[keyInit] &&\n !conf.shorthands[keyInit]\n ) {\n usedKeys.add(keyInit)\n viewProps[keyInit] = valInit\n continue\n }\n\n const expanded =\n isMedia || isPseudo\n ? [[keyInit, valInit]]\n : staticConfig.propMapper(keyInit, valInit, theme, props, state, undefined, debug)\n\n if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n console.log(' \u00BB getSplitStyles', keyInit, valInit, expanded)\n }\n\n if (!expanded) {\n continue\n }\n\n for (const [key, val] of expanded) {\n if (val === undefined) continue\n\n isMedia = key[0] === '$'\n isPseudo = validPseudoKeys[key]\n isMediaOrPseudo = isMedia || isPseudo\n\n if (!isMediaOrPseudo) {\n if (usedKeys.has(key)) continue\n }\n\n if (\n (staticConfig.deoptProps && staticConfig.deoptProps.has(key)) ||\n (staticConfig.inlineProps && staticConfig.inlineProps.has(key)) ||\n (staticConfig.inlineWhenUnflattened && staticConfig.inlineWhenUnflattened.has(key))\n ) {\n usedKeys.add(key)\n viewProps[key] = props[key] ?? val\n }\n\n // pseudo\n if (isPseudo) {\n if (!val) continue\n if (key === 'enterStyle' && state.mounted) {\n // once mounted we can ignore enterStyle\n continue\n }\n pseudos[key] = pseudos[key] || {}\n pseudos[key] = getSubStyle(val, staticConfig, theme, props, state, conf, true)\n if (shouldDoClasses) {\n const pseudoStyles = getAtomicStyle(pseudos[key], pseudoDescriptors[key])\n for (const style of pseudoStyles) {\n const postfix = pseudoDescriptors[key]?.name || key // exitStyle/enterStyle dont have pseudoDescriptors\n const fullKey = `${style.property}${PROP_SPLIT}${postfix}`\n if (!usedKeys.has(fullKey)) {\n usedKeys.add(fullKey)\n addStyle(style.identifier, style.rules.join(';'))\n mergeClassName(fullKey, style.identifier, isMediaOrPseudo)\n }\n }\n }\n continue\n }\n\n // media\n if (isMedia) {\n const mediaKey = key\n const mediaKeyShort = mediaKey.slice(1)\n\n if (!mediaQueryConfig[mediaKeyShort]) {\n if (!usedKeys.has(key)) {\n // this isn't a media key, pass through\n viewProps[key] = val\n }\n continue\n }\n\n // dont check if media is active, we just apply *all* media styles\n // we combine the media props on top regular props, could proxy this\n // TODO test proxy here instead of merge\n // THIS USED TO PROXY BACK TO REGULAR PROPS BUT THAT IS THE WRONG BEHAVIOR\n // we avoid passing in default props for media queries because that would confuse things like SizableText.size:\n const mediaStyle = getSubStyle(val, staticConfig, theme, props, state, conf)\n\n if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n // prettier-ignore\n console.log(' \u00BB getSplitStyles mediaStyle', { mediaKey, mediaStyle, props, shouldDoClasses })\n }\n\n if (shouldDoClasses) {\n const mediaStyles = getStylesAtomic(mediaStyle)\n for (const style of mediaStyles) {\n const out = createMediaStyle(style, mediaKeyShort, mediaQueryConfig)\n // TODO handle pseudo + media, not too hard just need to set up example case\n const fullKey = `${style.property}${PROP_SPLIT}${mediaKeyShort}`\n if (!usedKeys.has(fullKey)) {\n usedKeys.add(fullKey)\n addStyle(out.identifier, out.styleRule)\n mergeClassName(fullKey, out.identifier, true)\n }\n }\n } else {\n if (mediaState[mediaKey]) {\n if (process.env.NODE_ENV === 'development' && debug) {\n console.log('apply media style', mediaKey, mediaState)\n }\n Object.assign(shouldDoClasses ? medias : style, mediaStyle)\n }\n }\n continue\n }\n\n if (!isWeb && key === 'pointerEvents') {\n usedKeys.add(key)\n viewProps[key] = val\n continue\n }\n\n if (validStyleProps[key]) {\n usedKeys.add(key)\n if (val && val[0] === '_') {\n classNames[key] = val\n } else if (key in stylePropsTransform) {\n mergeTransform(style, key, val, true)\n } else {\n style[key] = normalizeValueWithProperty(val, key)\n }\n continue\n }\n\n // pass to view props\n if (!staticConfig.variants || !(key in staticConfig.variants)) {\n if (!skipProps[key]) {\n viewProps[key] = val\n usedKeys.add(key)\n }\n }\n }\n }\n\n fixStyles(style)\n if (isWeb) {\n styleToCSS(style)\n }\n\n // add in defaults if not set:\n if (defaultClassNames) {\n classNames = {\n ...defaultClassNames,\n ...classNames,\n }\n }\n\n if (shouldDoClasses) {\n const atomic = getStylesAtomic(style)\n for (const atomicStyle of atomic) {\n const key = atomicStyle.property\n if (!state.dynamicStylesInline) {\n addStyle(atomicStyle.identifier, atomicStyle.rules.join(';'))\n mergeClassName(key, atomicStyle.identifier)\n } else {\n style[key] = atomicStyle.value\n }\n }\n }\n\n if (process.env.TAMAGUI_TARGET === 'web') {\n if (transforms) {\n for (const namespace in transforms) {\n if (!transforms[namespace]) {\n if (process.env.NODE_ENV === 'development') {\n console.warn('Error no transform', transforms, namespace)\n }\n continue\n }\n const [hash, val] = transforms[namespace]\n const identifier = `_transform${hash}`\n if (isClient) {\n if (!insertedTransforms[identifier]) {\n const rule = `.${identifier} { transform: ${val}; }`\n addStyle(identifier, rule)\n }\n }\n classNames[namespace] = identifier\n }\n }\n }\n\n if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n if (typeof document !== 'undefined') {\n // prettier-ignore\n console.log(' \u00BB getSplitStyles out', { style, pseudos, medias, classNames, viewProps, state })\n }\n }\n\n return {\n viewProps,\n style,\n medias,\n pseudos,\n classNames,\n rulesToInsert,\n }\n}\n\nexport const getSubStyle = (\n styleIn: Object,\n staticConfig: StaticConfigParsed,\n theme: ThemeObject,\n props: any,\n state: SplitStyleState,\n conf: TamaguiInternalConfig,\n avoidDefaultProps?: boolean\n): ViewStyle => {\n const styleOut: ViewStyle = {}\n for (let key in styleIn) {\n const val = styleIn[key]\n key = conf.shorthands[key] || key\n const expanded = staticConfig.propMapper(key, val, theme, props, state, avoidDefaultProps)\n if (!expanded) continue\n for (const [skey, sval] of expanded) {\n if (skey in stylePropsTransform) {\n mergeTransform(styleOut, skey, sval)\n } else {\n styleOut[skey] = normalizeValueWithProperty(sval, key)\n }\n }\n }\n\n fixStyles(styleOut)\n\n return styleOut\n}\n\nexport const insertSplitStyles: StyleSplitter = (...args) => {\n const res = getSplitStyles(...args)\n if (res.rulesToInsert) {\n for (const [prop, rule] of res.rulesToInsert) {\n insertStyleRule(prop, rule)\n }\n }\n return res\n}\n\n// on native no need to insert any css\nconst useInsertEffectCompat = isWeb ? useInsertionEffect || useIsomorphicLayoutEffect : () => {}\n\nexport const useSplitStyles: StyleSplitter = (...args) => {\n const res = getSplitStyles(...args)\n\n useInsertEffectCompat(() => {\n if (!res.rulesToInsert) return\n for (const [prop, rule] of res.rulesToInsert) {\n insertStyleRule(prop, rule)\n }\n }, [res.rulesToInsert])\n\n return res\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import {\n StyleObject,\n stylePropsText,\n stylePropsTransform,\n validPseudoKeys,\n validStyles,\n} from '@tamagui/helpers'\nimport { useInsertionEffect } from 'react'\nimport { ViewStyle } from 'react-native'\n\nimport { getConfig } from '../conf'\nimport { isClient, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { themeToVariableToValueMap } from '../createTheme'\nimport { getThemeUnwrapped } from '../hooks/getThemeUnwrapped'\nimport { mediaQueryConfig, mediaState } from '../hooks/useMedia'\nimport {\n DebugProp,\n MediaKeys,\n MediaQueryKey,\n PseudoPropKeys,\n PseudoStyles,\n SplitStyleState,\n StackProps,\n StaticConfigParsed,\n TamaguiInternalConfig,\n ThemeObject,\n} from '../types'\nimport { createMediaStyle } from './createMediaStyle'\nimport { fixStyles } from './expandStyles'\nimport { getAtomicStyle, getStylesAtomic, styleToCSS } from './getStylesAtomic'\nimport {\n PartialStyleObject,\n RulesToInsert,\n getAllSelectors,\n insertStyleRules,\n insertedTransforms,\n updateInserted,\n updateInsertedCache,\n} from './insertStyleRule'\nimport { mergeTransform } from './mergeTransform'\nimport { normalizeValueWithProperty } from './normalizeValueWithProperty'\nimport { pseudoDescriptors } from './pseudoDescriptors'\n\nexport type SplitStyles = ReturnType<typeof getSplitStyles>\nexport type ClassNamesObject = Record<string, string>\nexport type SplitStyleResult = ReturnType<typeof getSplitStyles>\n\nconst skipProps = {\n animation: true,\n animateOnly: true,\n debug: true,\n componentName: true,\n\n ...(!isWeb && {\n tag: true,\n whiteSpace: true,\n wordWrap: true,\n textOverflow: true,\n textDecorationDistance: true,\n userSelect: true,\n selectable: true,\n cursor: true,\n contain: true,\n boxSizing: true,\n boxShadow: true,\n }),\n}\n\ntype TransformNamespaceKey = 'transform' | PseudoPropKeys | MediaQueryKey\n\nlet conf: TamaguiInternalConfig\n\ntype StyleSplitter = (\n props: { [key: string]: any },\n staticConfig: StaticConfigParsed,\n theme: ThemeObject,\n state: SplitStyleState,\n defaultClassNames?: any,\n debug?: DebugProp\n) => {\n pseudos: PseudoStyles\n medias: Record<MediaKeys, ViewStyle>\n style: ViewStyle\n classNames: ClassNamesObject\n rulesToInsert: RulesToInsert\n viewProps: StackProps\n}\n\nexport const PROP_SPLIT = '-'\n\n// this is how compiler outputs psueodo identifier\n// TODO remove in next refactor\nexport const pseudoCNInverse = {\n hover: 'hoverStyle',\n focus: 'focusStyle',\n press: 'pressStyle',\n}\n\n// loop props backwards\n// track used keys:\n// const keys = new Set<string>()\n// keep classnames and styles separate:\n// const styles = {}\n// const classNames = {}\n\nexport const getSplitStyles: StyleSplitter = (\n props,\n staticConfig,\n theme,\n state,\n defaultClassNames,\n debug\n) => {\n conf = conf || getConfig()\n const validStyleProps = staticConfig.isText ? stylePropsText : validStyles\n const viewProps: StackProps = {}\n const pseudos: PseudoStyles = {}\n const medias: Record<MediaKeys, ViewStyle> = {}\n const usedKeys = new Set<string>()\n const propKeys = Object.keys(props)\n const shouldDoClasses = (isWeb || process.env.IS_STATIC === 'is_static') && !state.noClassNames\n const len = propKeys.length\n const rulesToInsert: RulesToInsert = []\n const style: ViewStyle = {}\n // TODO make this CSS, not compile-friendly\n if (state.hasTextAncestor) {\n // parity with react-native-web\n style.display = 'inline-flex' as any\n }\n let classNames: ClassNamesObject = {}\n // we need to gather these specific to each media query / pseudo\n // value is [hash, val], so [\"-jnjad-asdnjk\", \"scaleX(1) rotate(10deg)\"]\n let transforms = null as Record<TransformNamespaceKey, [string, string]> | null\n\n function mergeClassName(key: string, val: string, isMediaOrPseudo = false) {\n if (process.env.TAMAGUI_TARGET === 'web') {\n // empty classnames passed by compiler sometimes\n if (!val) return\n if (val.startsWith('_transform-')) {\n const namespace: TransformNamespaceKey = isMediaOrPseudo ? key : 'transform'\n\n let transform = insertedTransforms[val]\n if (isClient) {\n if (!transform) {\n // HMR or loaded a new chunk\n updateInserted()\n transform = insertedTransforms[val]\n if (process.env.NODE_ENV === 'development') {\n if (!transform) {\n console.warn('no transform found', { insertedTransforms, val })\n }\n }\n }\n if (!transform) {\n if (isWeb && val[0] !== '_') {\n // runtime insert\n transform = val\n }\n }\n if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n // prettier-ignore\n console.log(' \u00BB getSplitStyles mergeClassName transform', { key, val, namespace, transform, insertedTransforms })\n }\n }\n transforms = transforms || {}\n transforms[namespace] = transforms[namespace] || ['', '']\n const identifier = val.replace('_transform', '')\n transforms[namespace][0] += identifier\n // ssr doesn't need to do anything just make the right classname\n if (transform) {\n transforms[namespace][1] += transform\n }\n } else {\n classNames[key] = val\n }\n }\n }\n\n // loop backwards so we can skip already-used props\n for (let i = len - 1; i >= 0; i--) {\n const keyInit = propKeys[i]\n\n if (usedKeys.has(keyInit)) continue\n if (skipProps[keyInit]) continue\n if (!isWeb && keyInit.startsWith('data-')) continue\n\n const valInit = props[keyInit]\n\n if (keyInit === 'style' || keyInit.startsWith('_style')) {\n if (!valInit) continue\n for (const key in valInit) {\n if (usedKeys.has(key)) continue\n if (valInit && typeof valInit === 'object') {\n // newer react native versions return a full object instead of ID\n for (const skey in valInit) {\n if (usedKeys.has(skey)) continue\n usedKeys.add(skey)\n style[skey] = valInit[skey]\n }\n } else {\n usedKeys.add(key)\n style[key] = valInit\n }\n }\n continue\n }\n\n if (process.env.TAMAGUI_TARGET === 'web') {\n if (keyInit === 'className') {\n let nonTamaguis = ''\n if (!valInit) continue\n for (const cn of valInit.split(' ')) {\n if (cn[0] === '_') {\n // tamagui, merge it expanded on key, eventually this will go away with better compiler\n const [shorthand, mediaOrPseudo] = cn.slice(1).split('-')\n const isMedia = mediaOrPseudo[0] === '_'\n const isPseudo = mediaOrPseudo[0] === '0'\n const isMediaOrPseudo = isMedia || isPseudo\n let fullKey = conf.shorthands[shorthand]\n if (isMedia) {\n // is media\n let mediaShortKey = mediaOrPseudo.slice(1)\n mediaShortKey = mediaShortKey.slice(0, mediaShortKey.indexOf('_'))\n fullKey += `${PROP_SPLIT}${mediaShortKey}`\n } else if (isPseudo) {\n // is pseudo\n const pseudoShortKey = mediaOrPseudo.slice(1)\n fullKey += `${PROP_SPLIT}${pseudoShortKey}`\n }\n usedKeys.add(fullKey)\n mergeClassName(fullKey, cn, isMediaOrPseudo)\n } else {\n nonTamaguis += ' ' + cn\n }\n }\n if (nonTamaguis) {\n usedKeys.add(keyInit)\n mergeClassName(keyInit, nonTamaguis)\n }\n continue\n }\n\n if (valInit && valInit[0] === '_') {\n // if valid style key (or pseudo like color-hover):\n // this conditional and esp the pseudo check rarely runs so not a perf issue\n const isValidClassName = validStyles[keyInit]\n const isMediaOrPseudo =\n !isValidClassName &&\n keyInit.includes(PROP_SPLIT) &&\n validStyles[keyInit.split(PROP_SPLIT)[0]]\n if (isValidClassName || isMediaOrPseudo) {\n usedKeys.add(keyInit)\n mergeClassName(keyInit, valInit, isMediaOrPseudo)\n continue\n }\n }\n }\n\n if (\n state.keepVariantsAsProps &&\n staticConfig.defaultVariants &&\n keyInit in staticConfig.defaultVariants\n ) {\n viewProps[keyInit] = valInit\n }\n\n /**\n * There's (some) reason to this madness: we want to allow returning media/pseudo from variants\n * Say you have a variant hoverable: { true: { hoverStyle: {} } }\n * We run propMapper first to expand variant, then we run the inner loop and look again\n * for if there's a pseudo/media returned from it.\n */\n\n let isMedia = keyInit[0] === '$'\n let isPseudo = validPseudoKeys[keyInit]\n let isMediaOrPseudo = isMedia || isPseudo\n\n if (\n !isMedia &&\n !isPseudo &&\n !staticConfig.variants?.[keyInit] &&\n !validStyleProps[keyInit] &&\n !conf.shorthands[keyInit]\n ) {\n usedKeys.add(keyInit)\n viewProps[keyInit] = valInit\n continue\n }\n\n const expanded =\n isMedia || isPseudo\n ? [[keyInit, valInit]]\n : staticConfig.propMapper(keyInit, valInit, theme, props, state, undefined, debug)\n\n if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n console.log(' \u00BB getSplitStyles', keyInit, valInit, expanded)\n }\n\n if (!expanded) {\n continue\n }\n\n for (const [key, val] of expanded) {\n if (val === undefined) continue\n\n isMedia = key[0] === '$'\n isPseudo = validPseudoKeys[key]\n isMediaOrPseudo = isMedia || isPseudo\n\n if (!isMediaOrPseudo) {\n if (usedKeys.has(key)) continue\n }\n\n if (\n (staticConfig.deoptProps && staticConfig.deoptProps.has(key)) ||\n (staticConfig.inlineProps && staticConfig.inlineProps.has(key)) ||\n (staticConfig.inlineWhenUnflattened && staticConfig.inlineWhenUnflattened.has(key))\n ) {\n usedKeys.add(key)\n viewProps[key] = props[key] ?? val\n }\n\n // pseudo\n if (isPseudo) {\n if (!val) continue\n if (key === 'enterStyle' && state.mounted) {\n // once mounted we can ignore enterStyle\n continue\n }\n pseudos[key] = pseudos[key] || {}\n pseudos[key] = getSubStyle(val, staticConfig, theme, props, state, conf, true)\n if (shouldDoClasses) {\n const pseudoStyles = getAtomicStyle(pseudos[key], pseudoDescriptors[key])\n for (const style of pseudoStyles) {\n const postfix = pseudoDescriptors[key]?.name || key // exitStyle/enterStyle dont have pseudoDescriptors\n const fullKey = `${style.property}${PROP_SPLIT}${postfix}`\n if (!usedKeys.has(fullKey)) {\n usedKeys.add(fullKey)\n addStyleToInsertRules(rulesToInsert, style)\n mergeClassName(fullKey, style.identifier, isMediaOrPseudo)\n }\n }\n }\n continue\n }\n\n // media\n if (isMedia) {\n const mediaKey = key\n const mediaKeyShort = mediaKey.slice(1)\n\n if (!mediaQueryConfig[mediaKeyShort]) {\n if (!usedKeys.has(key)) {\n // this isn't a media key, pass through\n viewProps[key] = val\n }\n continue\n }\n\n // dont check if media is active, we just apply *all* media styles\n // we combine the media props on top regular props, could proxy this\n // TODO test proxy here instead of merge\n // THIS USED TO PROXY BACK TO REGULAR PROPS BUT THAT IS THE WRONG BEHAVIOR\n // we avoid passing in default props for media queries because that would confuse things like SizableText.size:\n const mediaStyle = getSubStyle(val, staticConfig, theme, props, state, conf)\n\n if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n // prettier-ignore\n console.log(' \u00BB getSplitStyles mediaStyle', { mediaKey, mediaStyle, props, shouldDoClasses })\n }\n\n if (shouldDoClasses) {\n const mediaStyles = getStylesAtomic(mediaStyle)\n for (const style of mediaStyles) {\n const out = createMediaStyle(style, mediaKeyShort, mediaQueryConfig)\n // TODO handle pseudo + media, not too hard just need to set up example case\n const fullKey = `${style.property}${PROP_SPLIT}${mediaKeyShort}`\n if (!usedKeys.has(fullKey)) {\n usedKeys.add(fullKey)\n addStyleToInsertRules(rulesToInsert, out)\n mergeClassName(fullKey, out.identifier, true)\n }\n }\n } else {\n if (mediaState[mediaKey]) {\n if (process.env.NODE_ENV === 'development' && debug) {\n console.log('apply media style', mediaKey, mediaState)\n }\n Object.assign(shouldDoClasses ? medias : style, mediaStyle)\n }\n }\n continue\n }\n\n if (!isWeb && key === 'pointerEvents') {\n usedKeys.add(key)\n viewProps[key] = val\n continue\n }\n\n if (validStyleProps[key]) {\n usedKeys.add(key)\n if (val && val[0] === '_') {\n classNames[key] = val\n } else if (key in stylePropsTransform) {\n mergeTransform(style, key, val, true)\n } else {\n // if (key === 'pointerEvents') {\n // // pointer events can be box-none which requires css\n // addStyleToInsertRules(out.identifier, out.styleRule)\n // mergeClassName(fullKey, out.identifier, true)\n // } else {\n style[key] = normalizeValueWithProperty(val, key)\n // }\n }\n continue\n }\n\n // pass to view props\n if (!staticConfig.variants || !(key in staticConfig.variants)) {\n if (!skipProps[key]) {\n viewProps[key] = val\n usedKeys.add(key)\n }\n }\n }\n }\n\n fixStyles(style)\n if (isWeb) {\n styleToCSS(style)\n }\n\n // add in defaults if not set:\n if (defaultClassNames) {\n classNames = {\n ...defaultClassNames,\n ...classNames,\n }\n }\n\n if (shouldDoClasses) {\n const atomic = getStylesAtomic(style)\n for (const atomicStyle of atomic) {\n const key = atomicStyle.property\n // pointerEvents box-none must be CSS-ified\n // should probably have a few more exceptions here!\n if (key === 'pointerEvents' || !state.dynamicStylesInline) {\n addStyleToInsertRules(rulesToInsert, atomicStyle)\n mergeClassName(key, atomicStyle.identifier)\n } else {\n style[key] = atomicStyle.value\n }\n }\n } else {\n if (classNames && state.resolveVariablesAs === 'value') {\n // getting real values for colors for animations (reverse mapped from CSS)\n // this isn't beautiful, but will do relatively fine performance for now\n // has a bug still - try adding <Switch theme=\"bouncy\" /> should animate bg color on active\n // const selectors = getAllSelectors()\n // for (const key in classNames) {\n // if (key.endsWith('Color')) {\n // const selector = classNames[key]\n // let value = selectorValuesCache[selector]\n // if (!value) {\n // const css = selectors[selector]\n // value = css.replace(/.*:/, '').replace(/;.*/, '')\n // if (value) {\n // const themeUnwrapped = getThemeUnwrapped(theme)\n // const map = themeToVariableToValueMap.get(themeUnwrapped)\n // if (map && value.startsWith('var(')) {\n // value = map[value]\n // }\n // if (value) {\n // selectorValuesCache[selector] = value\n // }\n // } else {\n // // err\n // continue\n // }\n // }\n // if (value) {\n // style[key] = value\n // }\n // }\n // }\n }\n }\n\n if (process.env.TAMAGUI_TARGET === 'web') {\n if (transforms) {\n for (const namespace in transforms) {\n if (!transforms[namespace]) {\n if (process.env.NODE_ENV === 'development') {\n console.warn('Error no transform', transforms, namespace)\n }\n continue\n }\n const [hash, val] = transforms[namespace]\n const identifier = `_transform${hash}`\n if (isClient) {\n if (!insertedTransforms[identifier]) {\n const rule = `.${identifier} { transform: ${val}; }`\n addStyleToInsertRules(rulesToInsert, {\n identifier,\n rules: [rule],\n property: namespace,\n })\n }\n }\n classNames[namespace] = identifier\n }\n }\n }\n\n if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n if (typeof document !== 'undefined') {\n // prettier-ignore\n console.log(' \u00BB getSplitStyles out', { style, pseudos, medias, classNames, viewProps, state, rulesToInsert })\n }\n }\n\n return {\n viewProps,\n style,\n medias,\n pseudos,\n classNames,\n rulesToInsert,\n }\n}\n\nexport const getSubStyle = (\n styleIn: Object,\n staticConfig: StaticConfigParsed,\n theme: ThemeObject,\n props: any,\n state: SplitStyleState,\n conf: TamaguiInternalConfig,\n avoidDefaultProps?: boolean\n): ViewStyle => {\n const styleOut: ViewStyle = {}\n for (let key in styleIn) {\n const val = styleIn[key]\n key = conf.shorthands[key] || key\n const expanded = staticConfig.propMapper(key, val, theme, props, state, avoidDefaultProps)\n if (!expanded) continue\n for (const [skey, sval] of expanded) {\n if (skey in stylePropsTransform) {\n mergeTransform(styleOut, skey, sval)\n } else {\n styleOut[skey] = normalizeValueWithProperty(sval, key)\n }\n }\n }\n\n fixStyles(styleOut)\n\n return styleOut\n}\n\nexport const insertSplitStyles: StyleSplitter = (...args) => {\n const res = getSplitStyles(...args)\n insertStyleRules(res.rulesToInsert)\n return res\n}\n\n// on native no need to insert any css\nconst useInsertEffectCompat = isWeb ? useInsertionEffect || useIsomorphicLayoutEffect : () => {}\n\nexport const useSplitStyles: StyleSplitter = (...args) => {\n const res = getSplitStyles(...args)\n\n useInsertEffectCompat(() => {\n insertStyleRules(res.rulesToInsert)\n }, [res.rulesToInsert])\n\n return res\n}\n\nfunction addStyleToInsertRules(rulesToInsert: RulesToInsert, styleObject: PartialStyleObject) {\n if (process.env.TAMAGUI_TARGET === 'web') {\n // NOTE this is super tricky\n // for some reason, next.js dev SSR actually misses a lot of styles (pre-hydrate) with || !isClient\n // which doesn't really make sense, because that should strictly extract *more* css, but oh well\n // meanwhile, production builds *need* to always be truthy here for node, thus the cheat conditional\n if (\n styleObject.property === 'pointerEvents' ||\n updateInsertedCache(styleObject.identifier, styleObject.rules) ||\n (!isClient && process.env.NODE_ENV === 'production')\n ) {\n rulesToInsert.push(styleObject)\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -193,19 +193,17 @@ function createAtomicRules(identifier, property, value, pseudo) {
|
|
|
193
193
|
case "pointerEvents": {
|
|
194
194
|
let finalValue = value;
|
|
195
195
|
if (value === "auto" || value === "box-only") {
|
|
196
|
-
finalValue = "auto
|
|
196
|
+
finalValue = "auto";
|
|
197
197
|
if (value === "box-only") {
|
|
198
|
-
|
|
199
|
-
rules.push(`${selector}>*${block2}`);
|
|
198
|
+
rules.push(`${selector}>*${boxOnly}`);
|
|
200
199
|
}
|
|
201
200
|
} else if (value === "none" || value === "box-none") {
|
|
202
|
-
finalValue = "none
|
|
201
|
+
finalValue = "none";
|
|
203
202
|
if (value === "box-none") {
|
|
204
|
-
|
|
205
|
-
rules.push(`${selector}>*${block2}`);
|
|
203
|
+
rules.push(`${selector}>*${boxNone}`);
|
|
206
204
|
}
|
|
207
205
|
}
|
|
208
|
-
const block = createDeclarationBlock({ pointerEvents: finalValue },
|
|
206
|
+
const block = createDeclarationBlock({ pointerEvents: finalValue }, true);
|
|
209
207
|
rules.push(`${selector}${block}`);
|
|
210
208
|
break;
|
|
211
209
|
}
|
|
@@ -228,6 +226,8 @@ function createAtomicRules(identifier, property, value, pseudo) {
|
|
|
228
226
|
}
|
|
229
227
|
return rules;
|
|
230
228
|
}
|
|
229
|
+
const boxNone = createDeclarationBlock({ pointerEvents: "auto" }, true);
|
|
230
|
+
const boxOnly = createDeclarationBlock({ pointerEvents: "none" }, true);
|
|
231
231
|
// Annotate the CommonJS export names for ESM import in node:
|
|
232
232
|
0 && (module.exports = {
|
|
233
233
|
getAtomicStyle,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/getStylesAtomic.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Some parts adapted from react-native-web\n * Copyright (c) Nicolas Gallagher licensed under the MIT license.\n */\n\nimport { StyleObject, simpleHash } from '@tamagui/helpers'\nimport hyphenateStyleName from 'hyphenate-style-name'\nimport { TextStyle, ViewStyle } from 'react-native'\n\nimport { reversedShorthands } from '../createTamagui'\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,qBAAwC;AACxC,kCAA+B;AAG/B,2BAAmC;
|
|
4
|
+
"sourcesContent": ["/**\n * Some parts adapted from react-native-web\n * Copyright (c) Nicolas Gallagher licensed under the MIT license.\n */\n\nimport { StyleObject, simpleHash } from '@tamagui/helpers'\nimport hyphenateStyleName from 'hyphenate-style-name'\nimport { TextStyle, ViewStyle } from 'react-native'\n\nimport { reversedShorthands } from '../createTamagui'\nimport { defaultOffset } from './expandStyles'\nimport { normalizeValueWithProperty } from './normalizeValueWithProperty'\nimport { PseudoDescriptor, pseudoDescriptors } from './pseudoDescriptors'\n\n// refactor this file away next...\n\nexport type ViewStyleWithPseudos = ViewStyle & {\n hoverStyle?: ViewStyle\n pressStyle?: ViewStyle\n focusStyle?: ViewStyle\n}\n\nconst pseudosOrdered = Object.values(pseudoDescriptors)\n\nexport function getStylesAtomic(stylesIn: ViewStyleWithPseudos) {\n // performance optimization\n if (!stylesIn.hoverStyle && !stylesIn.pressStyle && !stylesIn.focusStyle) {\n return getAtomicStyle(stylesIn)\n }\n\n // only for pseudos\n const { hoverStyle, pressStyle, focusStyle, ...base } = stylesIn\n let res: StyleObject[] = []\n // *1 order matched to *0\n for (const [index, style] of [hoverStyle, pressStyle, focusStyle, base].entries()) {\n if (!style) continue\n const pseudo = pseudosOrdered[index]\n res = [...res, ...getAtomicStyle(style, pseudo)]\n }\n return res\n}\n\nexport function getAtomicStyle(style: ViewStyle, pseudo?: PseudoDescriptor): StyleObject[] {\n if (process.env.NODE_ENV === 'development') {\n if (!style || typeof style !== 'object') {\n throw new Error(`Wrong style type: \"${typeof style}\": ${style}`)\n }\n } else {\n if (!style) {\n console.warn(`Invalid style`)\n return []\n }\n }\n\n return generateAtomicStyles(style, pseudo)\n}\n\nconst generateAtomicStyles = (\n styleIn: ViewStyle & TextStyle,\n pseudo?: PseudoDescriptor\n): StyleObject[] => {\n // were converting to css styles\n const style = styleIn as Record<string, string | null | undefined>\n\n // transform\n if (style.transform) {\n if (Array.isArray(style.transform)) {\n style.transform = style.transform.map(mapTransform).join(' ')\n }\n }\n\n styleToCSS(style)\n\n const out: StyleObject[] = []\n for (const key in style) {\n const value = style[key]\n if (value != null && value != undefined) {\n const uid = key + (pseudo?.name || '')\n const cachedResult = cache.get(uid, value)\n if (cachedResult != undefined) {\n out.push(cachedResult)\n } else {\n const hash = presetHashes[value]\n ? value\n : typeof value === 'string'\n ? simpleHash(value)\n : `${value}`.replace('.', 'dot')\n const pseudoPrefix = pseudo ? `0${pseudo.name}-` : ''\n const shortProp = reversedShorthands[key] || key\n const identifier = `_${shortProp}-${pseudoPrefix}${hash}`\n const rules = createAtomicRules(identifier, key, value, pseudo)\n const styleObject: StyleObject = {\n property: key,\n pseudo: pseudo?.name,\n value,\n identifier,\n rules,\n }\n cache.set(uid, value, styleObject)\n out.push(styleObject)\n }\n }\n }\n return out\n}\n\nconst presetHashes = {\n none: true,\n}\n\nexport function styleToCSS(style: Record<string, any>) {\n // box-shadow\n const { shadowOffset, shadowRadius, shadowColor } = style\n if (style.shadowRadius !== undefined) {\n const offset = shadowOffset || defaultOffset\n const shadow = `${offset.width} ${offset.height} ${shadowRadius} ${shadowColor}`\n style.boxShadow = style.boxShadow ? `${style.boxShadow}, ${shadow}` : shadow\n delete style.shadowOffset\n delete style.shadowRadius\n delete style.shadowColor\n }\n\n // text-shadow\n const { textShadowColor, textShadowOffset, textShadowRadius } = style\n if (textShadowColor || textShadowOffset || textShadowRadius) {\n const { height, width } = textShadowOffset || defaultOffset\n const radius = textShadowRadius || 0\n const color = normalizeValueWithProperty(textShadowColor, 'textShadowColor')\n if (color && (height !== 0 || width !== 0 || radius !== 0)) {\n const blurRadius = normalizeValueWithProperty(radius)\n const offsetX = normalizeValueWithProperty(width)\n const offsetY = normalizeValueWithProperty(height)\n style.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`\n }\n delete style.textShadowColor\n delete style.textShadowOffset\n delete style.textShadowRadius\n }\n}\n\n// { scale: 2 } => 'scale(2)'\n// { translateX: 20 } => 'translateX(20px)'\n// { matrix: [1,2,3,4,5,6] } => 'matrix(1,2,3,4,5,6)'\nconst mapTransform = (transform) => {\n const type = Object.keys(transform)[0]\n const value = transform[type]\n if (type === 'matrix' || type === 'matrix3d') {\n return `${type}(${value.join(',')})`\n } else {\n const normalizedValue = normalizeValueWithProperty(value, type)\n return `${type}(${normalizedValue})`\n }\n}\n\n// cache\ntype Value = Object | Array<any> | string | number\nexport type Style = { [key: string]: Value }\nclass Cache {\n values: Record<string, any> = {}\n\n get(key: string, valStr: string) {\n return this.values[key]?.[valStr]\n }\n\n set(key: string, valStr: string, object: any) {\n this.values[key] ??= {}\n this.values[key][valStr] = object\n }\n}\nconst cache = new Cache()\n\nfunction createDeclarationBlock(style: Style, important = false) {\n let declarations = ''\n for (const key in style) {\n const prop = hyphenateStyleName(key)\n const value = style[key]\n declarations += `${prop}:${value}`\n }\n return `{${declarations}${important ? ` !important` : ''};}`\n}\n\nconst pseudoSelectorPrefixes = (() => {\n const res: Record<string, string> = {}\n for (const key in pseudoDescriptors) {\n const pseudo = pseudoDescriptors[key]\n res[pseudo.name] = [...Array(pseudo.priority)].map(() => ':root').join('') + ' '\n }\n return res\n})()\n\nfunction createAtomicRules(\n identifier: string,\n property: string,\n value: any,\n pseudo?: PseudoDescriptor\n): string[] {\n const selector = pseudo\n ? `${pseudoSelectorPrefixes[pseudo.name]} .${identifier}:${pseudo.name}`\n : `.${identifier}`\n const important = !!pseudo\n\n let rules: string[] = []\n\n // Handle non-standard properties and object values that require multiple\n // CSS rules to be created.\n switch (property) {\n // Equivalent to using '::placeholder'\n case 'placeholderTextColor': {\n const block = createDeclarationBlock({ color: value, opacity: 1 }, important)\n rules.push(`${selector}::placeholder${block}`)\n break\n }\n\n // Polyfill for additional 'pointer-events' values\n // See d13f78622b233a0afc0c7a200c0a0792c8ca9e58\n case 'pointerEvents': {\n let finalValue = value\n if (value === 'auto' || value === 'box-only') {\n finalValue = 'auto'\n if (value === 'box-only') {\n rules.push(`${selector}>*${boxOnly}`)\n }\n } else if (value === 'none' || value === 'box-none') {\n finalValue = 'none'\n if (value === 'box-none') {\n rules.push(`${selector}>*${boxNone}`)\n }\n }\n const block = createDeclarationBlock({ pointerEvents: finalValue }, true)\n rules.push(`${selector}${block}`)\n break\n }\n\n // Polyfill for draft spec\n // https://drafts.csswg.org/css-scrollbars-1/\n case 'scrollbarWidth': {\n if (value === 'none') {\n rules.push(`${selector}::-webkit-scrollbar{display:none}`)\n }\n const block = createDeclarationBlock({ scrollbarWidth: value }, important)\n rules.push(`${selector}${block}`)\n break\n }\n\n default: {\n const block = createDeclarationBlock({ [property]: value }, important)\n rules.push(`${selector}${block}`)\n break\n }\n }\n\n // hover styles need to be conditional\n // perhaps this can be generalized but for now lets just shortcut\n // and hardcode for hover styles, if we need to later we can\n // WEIRD SYNTAX, SEE:\n // https://stackoverflow.com/questions/40532204/media-query-for-devices-supporting-hover\n if (pseudo && pseudo.name === 'hover') {\n rules = rules.map((r) => `@media not all and (hover: none) { ${r} }`)\n }\n\n return rules\n}\n\nconst boxNone = createDeclarationBlock({ pointerEvents: 'auto' }, true)\nconst boxOnly = createDeclarationBlock({ pointerEvents: 'none' }, true)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|