@tamagui/core 1.0.1-beta.167 → 1.0.1-beta.169
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/addTheme.js.map +1 -1
- package/dist/cjs/config.js.map +1 -1
- package/dist/cjs/constants/platform.js +4 -4
- package/dist/cjs/constants/platform.js.map +2 -2
- package/dist/cjs/constants/platform.native.js +3 -3
- package/dist/cjs/constants/platform.native.js.map +2 -2
- package/dist/cjs/createComponent.js +39 -17
- package/dist/cjs/createComponent.js.map +2 -2
- package/dist/cjs/createTamagui.js +1 -4
- package/dist/cjs/createTamagui.js.map +2 -2
- package/dist/cjs/helpers/ThemeManager.js.map +1 -1
- package/dist/cjs/helpers/getSplitStyles.js +18 -10
- package/dist/cjs/helpers/getSplitStyles.js.map +3 -3
- package/dist/cjs/helpers/getThemeCSSRules.js.map +1 -1
- package/dist/cjs/hooks/useIsSSR.js +11 -7
- package/dist/cjs/hooks/useIsSSR.js.map +2 -2
- package/dist/cjs/hooks/useIsTouchDevice.js +1 -1
- package/dist/cjs/hooks/useIsTouchDevice.js.map +2 -2
- package/dist/cjs/hooks/useMedia.js +51 -29
- package/dist/cjs/hooks/useMedia.js.map +2 -2
- package/dist/cjs/hooks/useTheme.js +1 -1
- package/dist/cjs/hooks/useTheme.js.map +2 -2
- package/dist/cjs/styled.js +11 -8
- package/dist/cjs/styled.js.map +2 -2
- package/dist/cjs/types.js.map +1 -1
- package/dist/cjs/updateTheme.js.map +2 -2
- package/dist/cjs/views/TamaguiProvider.js +2 -2
- package/dist/cjs/views/TamaguiProvider.js.map +2 -2
- package/dist/esm/addTheme.js.map +1 -1
- package/dist/esm/config.js.map +1 -1
- package/dist/esm/constants/platform.js +3 -3
- package/dist/esm/constants/platform.js.map +2 -2
- package/dist/esm/constants/platform.native.js +2 -2
- package/dist/esm/constants/platform.native.js.map +2 -2
- package/dist/esm/createComponent.js +43 -18
- package/dist/esm/createComponent.js.map +2 -2
- package/dist/esm/createTamagui.js +1 -4
- package/dist/esm/createTamagui.js.map +2 -2
- package/dist/esm/helpers/ThemeManager.js.map +1 -1
- package/dist/esm/helpers/getSplitStyles.js +18 -10
- package/dist/esm/helpers/getSplitStyles.js.map +2 -2
- package/dist/esm/helpers/getThemeCSSRules.js.map +1 -1
- package/dist/esm/hooks/useIsSSR.js +12 -8
- package/dist/esm/hooks/useIsSSR.js.map +2 -2
- package/dist/esm/hooks/useIsTouchDevice.js +2 -2
- package/dist/esm/hooks/useIsTouchDevice.js.map +2 -2
- package/dist/esm/hooks/useMedia.js +51 -30
- package/dist/esm/hooks/useMedia.js.map +2 -2
- package/dist/esm/hooks/useTheme.js +2 -2
- package/dist/esm/hooks/useTheme.js.map +2 -2
- package/dist/esm/styled.js +11 -8
- package/dist/esm/styled.js.map +2 -2
- package/dist/esm/updateTheme.js.map +2 -2
- package/dist/esm/views/TamaguiProvider.js +3 -3
- package/dist/esm/views/TamaguiProvider.js.map +2 -2
- package/package.json +10 -10
- package/src/addTheme.ts +3 -3
- package/src/config.ts +1 -1
- package/src/constants/platform.native.ts +1 -1
- package/src/constants/platform.ts +2 -2
- package/src/createComponent.tsx +51 -23
- package/src/createTamagui.ts +7 -10
- package/src/helpers/ThemeManager.tsx +4 -4
- package/src/helpers/getSplitStyles.tsx +27 -13
- package/src/helpers/getThemeCSSRules.ts +2 -2
- package/src/hooks/useIsSSR.tsx +13 -8
- package/src/hooks/useIsTouchDevice.tsx +2 -2
- package/src/hooks/useMedia.tsx +72 -39
- package/src/hooks/useTheme.tsx +6 -7
- package/src/styled.tsx +14 -8
- package/src/types.tsx +41 -12
- package/src/updateTheme.ts +2 -2
- package/src/views/TamaguiProvider.tsx +3 -4
- package/types/addTheme.d.ts +2 -2
- package/types/config.d.ts +18 -2
- package/types/constants/platform.d.ts +1 -1
- package/types/constants/platform.native.d.ts +1 -1
- package/types/createVariable.d.ts +4 -0
- package/types/helpers/ThemeManager.d.ts +5 -5
- package/types/helpers/calc.d.ts +5 -0
- package/types/helpers/expandStyle.d.ts +4 -0
- package/types/helpers/expandStyles.d.ts +7 -0
- package/types/helpers/getSplitStyles.d.ts +3 -3
- package/types/helpers/getStylesAtomic.d.ts +4 -0
- package/types/helpers/getThemeCSSRules.d.ts +2 -2
- package/types/helpers/mergeProps.d.ts +13 -0
- package/types/helpers/normalizeValueWithProperty.d.ts +4 -0
- package/types/hooks/useIsSSR.d.ts +3 -1
- package/types/hooks/useMedia.d.ts +8 -5
- package/types/hooks/useTheme.d.ts +4 -4
- package/types/insertFont.d.ts +3 -0
- package/types/styled.d.ts +1 -0
- package/types/types.d.ts +111 -11
- package/types/updateTheme.d.ts +2 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/createTamagui.ts"],
|
|
4
|
-
"sourcesContent": ["import { configListeners, setConfig } from './config'\nimport { isRSC, isWeb } from './constants/platform'\nimport { createVariables } from './createVariables'\nimport { getThemeCSSRules } from './helpers/getThemeCSSRules'\nimport { getAllRules } from './helpers/insertStyleRule'\nimport {\n registerCSSVariable,\n tokensValueToVariable,\n variableToCSS,\n} from './helpers/registerCSSVariable'\nimport { ensureThemeVariable, proxyThemeToParents } from './helpers/themes'\nimport { configureMedia } from './hooks/useMedia'\nimport { parseFont, registerFontVariables } from './insertFont'\nimport { Tamagui } from './Tamagui'\nimport { CreateTamaguiProps, InferTamaguiConfig, TamaguiInternalConfig,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA2C;AAC3C,sBAA6B;AAC7B,6BAAgC;AAChC,8BAAiC;AACjC,6BAA4B;AAC5B,iCAIO;AACP,oBAAyD;AACzD,sBAA+B;AAC/B,wBAAiD;AACjD,qBAAwB;AAIxB,MAAM,iBAAiB,oBAAI,QAAsB;AAE1C,SAAS,cACd,UAC0B;AAC1B,MAAI,eAAe,IAAI,QAAQ,GAAG;AAChC,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,CAAC,SAAS,QAAQ;AACpB,YAAM,IAAI,MAAM,oBAAoB;AAAA,IACtC;AACA,QAAI,CAAC,SAAS,QAAQ;AACpB,YAAM,IAAI,MAAM,oBAAoB;AAAA,IACtC;AACA,QAAI,CAAC,SAAS,OAAO;AACnB,YAAM,IAAI,MAAM,mBAAmB;AAAA,IACrC;AAAA,EACF;AAEA,
|
|
4
|
+
"sourcesContent": ["import { configListeners, setConfig } from './config'\nimport { isRSC, isWeb } from './constants/platform'\nimport { createVariables } from './createVariables'\nimport { getThemeCSSRules } from './helpers/getThemeCSSRules'\nimport { getAllRules } from './helpers/insertStyleRule'\nimport {\n registerCSSVariable,\n tokensValueToVariable,\n variableToCSS,\n} from './helpers/registerCSSVariable'\nimport { ensureThemeVariable, proxyThemeToParents } from './helpers/themes'\nimport { configureMedia } from './hooks/useMedia'\nimport { parseFont, registerFontVariables } from './insertFont'\nimport { Tamagui } from './Tamagui'\nimport { CreateTamaguiProps, InferTamaguiConfig, TamaguiInternalConfig, ThemeParsed } from './types'\n\n// config is re-run by the @tamagui/static, dont double validate\nconst createdConfigs = new WeakMap<any, boolean>()\n\nexport function createTamagui<Conf extends CreateTamaguiProps>(\n configIn: Conf\n): InferTamaguiConfig<Conf> {\n if (createdConfigs.has(configIn)) {\n return configIn as any\n }\n\n if (process.env.NODE_ENV === 'development') {\n if (!configIn.tokens) {\n throw new Error(`Must define tokens`)\n }\n if (!configIn.themes) {\n throw new Error(`Must define themes`)\n }\n if (!configIn.fonts) {\n throw new Error(`Must define fonts`)\n }\n }\n\n const fontTokens = Object.fromEntries(\n Object.entries(configIn.fonts!).map(([k, v]) => {\n return [k, createVariables(v, 'f', true)]\n })\n )\n\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 = { ...configIn.themes }\n let cssRuleSets: string[] = []\n\n if (isWeb) {\n const declarations: string[] = []\n const fontDeclarations: Record<\n string,\n { name: string; declarations: string[]; language?: string }\n > = {}\n\n for (const key in configIn.tokens) {\n for (const skey in configIn.tokens[key]) {\n const val = configIn.tokens[key][skey]\n registerCSSVariable(val)\n declarations.push(variableToCSS(val))\n }\n }\n\n for (const key in fontsParsed) {\n const fontParsed = fontsParsed[key]\n const [name, language] = key.includes('_') ? key.split('_') : [key]\n const fontVars = registerFontVariables(fontParsed)\n fontDeclarations[key] = { name: name.slice(1), declarations: fontVars, language }\n }\n\n const sep = process.env.NODE_ENV === 'development' ? configIn.cssStyleSeparator || ' ' : ''\n\n function declarationsToRuleSet(decs: string[], selector = '') {\n return `:root${selector} {${sep}${[...decs].join(`;${sep}`)}${sep}}`\n }\n\n // non-font\n cssRuleSets.push(declarationsToRuleSet(declarations))\n\n // fonts\n if (fontDeclarations) {\n for (const key in fontDeclarations) {\n const { name, declarations, language = 'default' } = fontDeclarations[key]\n const fontSelector = `.font_${name}`\n const langSelector = `:root .t_lang-${name}-${language} ${fontSelector}`\n const selectors =\n language === 'default' ? ` ${fontSelector}, ${langSelector}` : langSelector\n const specificRuleSet = declarationsToRuleSet(declarations, selectors)\n cssRuleSets.push(specificRuleSet)\n }\n }\n }\n\n // dedupe themes to avoid duplicate CSS generation\n type DedupedTheme = {\n names: string[]\n theme: ThemeParsed\n }\n const dedupedThemes: {\n [key: string]: DedupedTheme\n } = {}\n const existing = new WeakMap<ThemeParsed, DedupedTheme>()\n\n // first, de-dupe and parse them\n for (const themeName in themes) {\n const rawTheme = themes[themeName] as ThemeParsed\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 // ensure each theme object unique for dedupe\n const theme = { ...rawTheme }\n // parse into variables\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(rawTheme, dedupedThemes[themeName])\n }\n\n // then, generate CSS from de-duped\n if (isWeb || isRSC) {\n for (const themeName in dedupedThemes) {\n cssRuleSets = [\n ...cssRuleSets,\n ...getThemeCSSRules({\n config: configIn,\n themeName,\n ...dedupedThemes[themeName],\n }),\n ]\n }\n }\n\n // proxy upwards to get parent variables (themes are subset going down)\n for (const themeName in themes) {\n themes[themeName] = proxyThemeToParents(themeName, themes[themeName], themes)\n }\n\n tokensValueToVariable.clear()\n Object.freeze(cssRuleSets)\n const css = cssRuleSets.join('\\n')\n\n return {\n // could improve types but we do ensureThemeVariable so its accurate\n themes,\n cssRuleSets,\n css,\n }\n })()\n\n // faster lookups token keys become $keys to match input\n const tokensParsed: any = parseTokens(configIn.tokens)\n\n const getCSS = () => {\n return `${themeConfig.css}\\n${getAllRules().join('\\n')}`\n }\n\n const shorthands = configIn.shorthands || {}\n\n const config: TamaguiInternalConfig = {\n fontLanguages: [],\n defaultTheme: 'light',\n animations: {} as any,\n media: {},\n ...configIn,\n // vite made this into a function if it wasn't set\n shorthands: { ...shorthands },\n inverseShorthands: shorthands\n ? Object.fromEntries(Object.entries(shorthands).map(([k, v]) => [v, k]))\n : {},\n themes: themeConfig.themes as any,\n fontsParsed,\n themeConfig,\n tokensParsed,\n parsed: true,\n getCSS,\n }\n\n configureMedia(config)\n setConfig(config)\n\n if (configListeners.size) {\n configListeners.forEach((cb) => cb(config))\n configListeners.clear()\n }\n\n createdConfigs.set(config, 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 config\n}\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["declarationsToRuleSet", "declarations"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/ThemeManager.tsx"],
|
|
4
|
-
"sourcesContent": ["import { createContext } from 'react'\n\nimport { getThemes } from '../config'\nimport { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from '../constants/constants'\nimport { getThemeUnwrapped } from '../hooks/getThemeUnwrapped'\nimport {
|
|
4
|
+
"sourcesContent": ["import { createContext } from 'react'\n\nimport { getThemes } from '../config'\nimport { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from '../constants/constants'\nimport { getThemeUnwrapped } from '../hooks/getThemeUnwrapped'\nimport { ThemeParsed, Themes } from '../types'\n\ntype ThemeListener = (name: string | null, themeManager: ThemeManager) => void\n\nexport type SetActiveThemeProps = {\n className?: string\n parentManager?: ThemeManager | null\n name?: string | null\n theme?: any\n}\n\nexport type GetNextThemeProps = {\n themes?: Themes\n name?: string | null\n componentName?: string | null\n reset?: boolean\n}\n\nexport class ThemeManager {\n keys = new Map<any, Set<string>>()\n listeners = new Map<any, Function>()\n themeListeners = new Set<ThemeListener>()\n\n constructor(\n public name: string = '',\n public className: string = '',\n public theme: ThemeParsed | null = null,\n public parentManager: ThemeManager | null = null,\n public reset: boolean = false\n ) {\n // find the nearest different parentManager\n let parent = parentManager\n let tries = 0\n while (true) {\n tries++\n if (tries > 10) {\n throw new Error(`Nested 10 of the same theme in a row, likely error`)\n }\n if (!parent) break\n if (parent.name === name) {\n // go up if same\n parent = parent.parentManager\n } else {\n this.parentManager = parent\n break\n }\n }\n }\n\n get didChangeTheme() {\n return this.parentManager && this.name !== this.parentManager.fullName\n }\n\n get parentName() {\n return this.parentManager?.name || null\n }\n\n get fullName(): string {\n return this.getNextTheme().name || this.name || ''\n // const parentName = this.parentManager?.fullName || ''\n // const name = this.name || ''\n // const parts = [...new Set([...`${parentName}_${name}`.split('_')])].filter(Boolean)\n // return parts.join('_')\n }\n\n // gets value going up to parents\n getValue(key: string) {\n let theme = this.theme\n let manager = this as ThemeManager | null\n while (true) {\n if (!theme) return\n if (key in theme) {\n return theme[key]\n }\n manager = this.parentManager\n if (!manager || manager.theme === theme) {\n return\n }\n theme = manager.theme\n }\n }\n\n isTracking(uuid: Object) {\n return Boolean(this.keys.get(uuid)?.size)\n }\n\n update({ name, theme, className }: SetActiveThemeProps = {}, force = false) {\n if (!force) {\n // className compare on web, avoids light/dark re-renders\n const nameChanged = name !== this.name\n if (!nameChanged) {\n return false\n }\n }\n this.className = className || ''\n this.name = name || ''\n this.theme = theme\n this.notifyListeners()\n return true\n }\n\n getNextTheme(\n props: GetNextThemeProps = {},\n debug?: any\n ): {\n name: string\n theme: ThemeParsed | null\n className: string | undefined\n } {\n const { themes = getThemes(), name, componentName } = props\n\n if (props.reset && name) {\n return {\n name: name,\n theme: themes[name] as ThemeParsed,\n className: this.getClassName(name),\n }\n }\n\n const parentIsReset = this.parentManager?.reset\n\n if (!name) {\n if (componentName) {\n // allow for _Card_Button or just _Button\n const names = [\n `${this.name}_${componentName}`,\n `${withoutComponentName(this.name)}_${componentName}`,\n ]\n for (const name of names) {\n if (name in themes) {\n const className = this.getClassName(name)\n return { name, theme: themes[name], className }\n }\n }\n }\n return {\n name: this.name,\n theme: this.theme,\n className: this.className,\n }\n }\n\n let nextName = name || this.name || ''\n let parentName = parentIsReset ? this.parentName || this.fullName : this.fullName\n\n while (true) {\n if (nextName in themes) break\n nextName = `${parentName}_${name}`\n if (nextName in themes) break\n // this is fine - some themes can not have parents\n if (!parentName.includes(THEME_NAME_SEPARATOR)) break\n // go up one\n parentName = parentName.slice(0, parentName.lastIndexOf(THEME_NAME_SEPARATOR))\n }\n\n if (componentName) {\n // allow for _Card_Button or just _Button\n const names = [\n `${nextName}_${componentName}`,\n `${withoutComponentName(nextName)}_${componentName}`,\n ]\n for (const name of names) {\n if (name in themes) {\n nextName = name\n }\n }\n }\n\n let theme = themes[nextName]\n if (!theme) {\n theme = themes[`light_${nextName}`]\n }\n\n if (process.env.NODE_ENV === 'development') {\n if (debug) {\n // eslint-disable-next-line no-console\n console.log('getNextTheme', this.getClassName(nextName), { props, nextName, parentName })\n }\n }\n\n return {\n name: nextName,\n theme: getThemeUnwrapped(theme),\n className: this.getClassName(nextName),\n }\n }\n\n getClassName(name: string) {\n return `${THEME_CLASSNAME_PREFIX}${name} t_Theme`.replace('light_', '').replace('dark_', '')\n }\n\n track(uuid: any, keys: Set<string>) {\n if (!this.name) return\n this.keys.set(uuid, keys)\n }\n\n notifyListeners() {\n if (!this.name) {\n this.keys.clear()\n }\n for (const [uuid, keys] of this.keys.entries()) {\n if (keys.size) {\n this.listeners.get(uuid)?.()\n }\n }\n this.themeListeners.forEach((cb) => cb(this.name, this))\n }\n\n onChangeTheme(cb: ThemeListener) {\n this.themeListeners.add(cb)\n return () => {\n this.themeListeners.delete(cb)\n }\n }\n\n onUpdate(uuid: any, cb: Function) {\n this.listeners.set(uuid, cb)\n return () => {\n this.listeners.delete(uuid)\n this.keys.delete(uuid)\n }\n }\n}\n\nexport const ThemeManagerContext = createContext<ThemeManager | null>(null)\nexport const emptyManager = new ThemeManager()\n\nconst withoutComponentName = (name: string) => name.replace(/(\\_[A-Z][a-zA-Z]+)+$/g, '')\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["name"]
|
|
7
7
|
}
|
|
@@ -73,16 +73,17 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, la
|
|
|
73
73
|
const viewProps = {};
|
|
74
74
|
const pseudos = {};
|
|
75
75
|
const medias = {};
|
|
76
|
+
const mediaState = state.mediaState || import_useMedia.mediaState;
|
|
76
77
|
const usedKeys = /* @__PURE__ */ new Set();
|
|
77
78
|
const propKeys = Object.keys(props);
|
|
78
|
-
const shouldDoClasses = (import_platform.isWeb || process.env.IS_STATIC === "is_static") && !state.noClassNames && !props.animation;
|
|
79
|
+
const shouldDoClasses = staticConfig.acceptsClassName && (import_platform.isWeb || process.env.IS_STATIC === "is_static") && !state.noClassNames && !props.animation;
|
|
79
80
|
const len = propKeys.length;
|
|
80
81
|
const rulesToInsert = [];
|
|
81
82
|
const style = {};
|
|
82
83
|
if (state.hasTextAncestor) {
|
|
83
84
|
style.display = "inline-flex";
|
|
84
85
|
}
|
|
85
|
-
|
|
86
|
+
const classNames = {};
|
|
86
87
|
const transforms = {};
|
|
87
88
|
let fontFamily;
|
|
88
89
|
for (let i = len - 1; i >= 0; i--) {
|
|
@@ -246,9 +247,15 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, la
|
|
|
246
247
|
}
|
|
247
248
|
if (isMedia) {
|
|
248
249
|
const mediaKey = key;
|
|
249
|
-
mediaKeys.push(key);
|
|
250
250
|
const mediaKeyShort = mediaKey.slice(1);
|
|
251
|
+
mediaKeys.push(mediaKeyShort);
|
|
251
252
|
if (!import_useMedia.mediaQueryConfig[mediaKeyShort]) {
|
|
253
|
+
if (process.env.NODE_ENV === "development" && debug) {
|
|
254
|
+
console.warn(
|
|
255
|
+
`Warning: using a $ prefixed prop that doesn't match to a media query, may be an error`,
|
|
256
|
+
key
|
|
257
|
+
);
|
|
258
|
+
}
|
|
252
259
|
if (!usedKeys.has(key)) {
|
|
253
260
|
viewProps[key] = val;
|
|
254
261
|
}
|
|
@@ -265,7 +272,7 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, la
|
|
|
265
272
|
languageContext
|
|
266
273
|
);
|
|
267
274
|
if (process.env.NODE_ENV === "development" && debug === "verbose") {
|
|
268
|
-
console.log(
|
|
275
|
+
console.log(` \u{1F4FA} ${mediaKey}`, mediaState[mediaKeyShort], { mediaKey, mediaStyle, props, shouldDoClasses, mediaState: { ...mediaState } });
|
|
269
276
|
}
|
|
270
277
|
if (shouldDoClasses) {
|
|
271
278
|
const mediaStyles = (0, import_getStylesAtomic.getStylesAtomic)(mediaStyle);
|
|
@@ -279,9 +286,9 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, la
|
|
|
279
286
|
}
|
|
280
287
|
}
|
|
281
288
|
} else {
|
|
282
|
-
if (
|
|
289
|
+
if (mediaState[mediaKeyShort]) {
|
|
283
290
|
if (process.env.NODE_ENV === "development" && debug) {
|
|
284
|
-
console.log("apply media style", mediaKey,
|
|
291
|
+
console.log("apply media style", mediaKey, mediaState);
|
|
285
292
|
}
|
|
286
293
|
if (shouldDoClasses) {
|
|
287
294
|
Object.assign(medias, mediaStyle);
|
|
@@ -327,10 +334,11 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, la
|
|
|
327
334
|
(0, import_getStylesAtomic.styleToCSS)(style);
|
|
328
335
|
}
|
|
329
336
|
if (defaultClassNames) {
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
337
|
+
for (const key in defaultClassNames) {
|
|
338
|
+
if (!(key in classNames)) {
|
|
339
|
+
classNames[key] = defaultClassNames[key];
|
|
340
|
+
}
|
|
341
|
+
}
|
|
334
342
|
}
|
|
335
343
|
if (shouldDoClasses) {
|
|
336
344
|
const atomic = (0, import_getStylesAtomic.getStylesAtomic)(style);
|
|
@@ -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, useMemo } from 'react'\nimport type { ViewStyle } from 'react-native'\n\nimport { getConfig } from '../config'\nimport { isDevTools } from '../constants/isDevTools'\nimport { isClient, isRSC, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { mediaQueryConfig, mediaState } from '../hooks/useMedia'\nimport type {\n DebugProp,\n MediaQueryKey,\n PseudoPropKeys,\n PseudoStyles,\n SplitStyleState,\n StackProps,\n StaticConfigParsed,\n TamaguiInternalConfig,\n ThemeObject,\n} from '../types'\nimport { FontLanguageProps, LanguageContextType } from '../views/FontLanguage.types'\nimport { createMediaStyle } from './createMediaStyle'\nimport { fixStyles } from './expandStyles'\nimport { getAtomicStyle, getStylesAtomic, styleToCSS } from './getStylesAtomic'\nimport {\n PartialStyleObject,\n RulesToInsert,\n insertStyleRules,\n insertedTransforms,\n shouldInsertStyleRules,\n updateInserted,\n updateRules,\n} from './insertStyleRule'\nimport { mergeTransform } from './mergeTransform'\nimport { normalizeValueWithProperty } from './normalizeValueWithProperty.js'\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 languageContext?: LanguageContextType,\n debug?: DebugProp\n) => {\n pseudos: PseudoStyles\n medias: Record<MediaQueryKey, ViewStyle>\n style: ViewStyle\n classNames: ClassNamesObject\n rulesToInsert: RulesToInsert\n viewProps: StackProps\n fontFamily: string | undefined\n mediaKeys: string[]\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 languageContext,\n debug\n) => {\n conf = conf || getConfig()\n const validStyleProps = staticConfig.isText ? stylePropsText : validStyles\n const mediaKeys: string[] = []\n const viewProps: StackProps = {}\n const pseudos: PseudoStyles = {}\n const medias: Record<MediaQueryKey, ViewStyle> = {}\n const usedKeys = new Set<string>()\n const propKeys = Object.keys(props)\n const shouldDoClasses =\n (isWeb || process.env.IS_STATIC === 'is_static') && !state.noClassNames && !props.animation\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 const transforms: Record<TransformNamespaceKey, [string, string]> = {}\n // fontFamily is our special baby, ensure we grab the latest set one always\n let fontFamily: string | undefined\n\n // loop backwards so we can skip already-used props\n for (let i = len - 1; i >= 0; i--) {\n let keyInit = propKeys[i]\n const valInit = props[keyInit]\n\n // normalize shorthands up front\n const expandedKey = conf.shorthands[keyInit]\n if (expandedKey) {\n keyInit = expandedKey\n }\n\n if (keyInit === 'fontFamily' && fontFamily === undefined) {\n fontFamily = valInit\n }\n\n if (usedKeys.has(keyInit)) continue\n if (skipProps[keyInit]) continue\n if (!isWeb && keyInit.startsWith('data-')) continue\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(transforms, classNames, fullKey, cn, isMediaOrPseudo)\n } else {\n nonTamaguis += ' ' + cn\n }\n }\n if (nonTamaguis) {\n usedKeys.add(keyInit)\n mergeClassName(transforms, classNames, 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(transforms, classNames, keyInit, valInit, isMediaOrPseudo)\n continue\n }\n }\n }\n\n if (state.keepVariantsAsProps) {\n if (\n (staticConfig.defaultVariants && keyInit in staticConfig.defaultVariants) ||\n // may want to just: not compile styled() into classnames, always do this, and always pass in all values in extras.props\n // but we'd want to add styled({ extracted: true }) or something at compile time to save on parsing a bit...\n (staticConfig.variants && keyInit in staticConfig.variants)\n ) {\n viewProps[keyInit] = valInit\n }\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 if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n // eslint-disable-next-line no-console\n console.groupCollapsed(' \uD83D\uDD39 styles', keyInit, valInit)\n }\n\n const expanded =\n isMedia || isPseudo\n ? [[keyInit, valInit]]\n : staticConfig.propMapper(\n keyInit,\n valInit,\n theme,\n props,\n state,\n languageContext,\n undefined,\n debug\n )\n\n if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n // eslint-disable-next-line no-console\n console.log('expanded', expanded)\n // eslint-disable-next-line no-console\n console.log('usedKeys', [...usedKeys])\n // eslint-disable-next-line no-console\n console.groupEnd()\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 const pseudoStyleObject = getSubStyle(\n key,\n val,\n staticConfig,\n theme,\n props,\n state,\n conf,\n languageContext,\n true\n )\n pseudos[key] = pseudoStyleObject\n if (shouldDoClasses && key !== 'enterStyle' && key !== 'exitStyle') {\n const pseudoStyles = getAtomicStyle(pseudoStyleObject, 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(transforms, classNames, fullKey, style.identifier, isMediaOrPseudo)\n }\n }\n }\n continue\n }\n\n // media\n if (isMedia) {\n const mediaKey = key\n mediaKeys.push(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(\n key,\n val,\n staticConfig,\n theme,\n props,\n state,\n conf,\n languageContext\n )\n\n if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n // prettier-ignore\n // eslint-disable-next-line no-console\n console.log(' \uD83D\uDD39 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 const fullKey = `${style.property}${PROP_SPLIT}${mediaKeyShort}`\n if (!usedKeys.has(fullKey)) {\n usedKeys.add(fullKey)\n addStyleToInsertRules(rulesToInsert, out)\n mergeClassName(transforms, classNames, fullKey, out.identifier, true)\n }\n }\n } else {\n if (mediaState[mediaKey]) {\n if (process.env.NODE_ENV === 'development' && debug) {\n // eslint-disable-next-line no-console\n console.log('apply media style', mediaKey, mediaState)\n }\n if (shouldDoClasses) {\n Object.assign(medias, mediaStyle)\n } else {\n for (const key in mediaStyle) {\n usedKeys.add(key)\n style[key] = mediaStyle[key]\n if (key === 'fontFamily') {\n fontFamily = mediaStyle[key]\n }\n }\n }\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 // 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(transforms, classNames, key, atomicStyle.identifier)\n } else {\n style[key] = atomicStyle.value\n }\n }\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 // eslint-disable-next-line no-console\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 (isDevTools) {\n // prettier-ignore\n // eslint-disable-next-line no-console\n console.groupCollapsed(' \uD83D\uDD39 styles =>')\n const logs = { style, pseudos, medias, classNames, viewProps, state, rulesToInsert }\n for (const key in logs) {\n // eslint-disable-next-line no-console\n console.log(key, logs[key])\n }\n // eslint-disable-next-line no-console\n console.groupEnd()\n }\n }\n\n return {\n fontFamily,\n viewProps,\n style,\n medias,\n mediaKeys,\n pseudos,\n classNames,\n rulesToInsert,\n }\n}\n\nfunction mergeClassName(\n transforms: Record<string, any[]>,\n classNames: Record<string, string>,\n key: string,\n val: string,\n isMediaOrPseudo = false\n) {\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 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 // eslint-disable-next-line no-console\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 }\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/**\n * getSubStyle calls propMapper with props\n * those should be specific to the substyle, but fallback to the base props\n * so given props:\n *\n * { fontSize: 12, color: 'red', $sm: { color: 'blue' } }\n *\n * getSubStyle props should be a proxy that ends up like:\n *\n * { fontSize: 12, color: 'blue' }\n *\n * and to avoid re-creating it over and over, use a WeakMap\n */\nconst propProxies = new WeakMap()\nfunction getSubStyleProxiedProps(defaultProps: Object, baseProps: Object, specificProps: Object) {\n if (!specificProps) {\n // functional variants may want to eventually do something like:\n // have a hooks-like rule (no conditionals)\n // then we run them once on compile with a proxy to capture the keys accessed\n // then add those keys to `inlineProps` so we know we must inline them\n // for now this will trigger because compiled away\n // right now also we don't pass in any pre-extracted styled() props but we should pass them in..\n return baseProps\n }\n // can cache based only on specific it's always referentially consistent with base\n if (propProxies.has(specificProps)) {\n return propProxies.get(specificProps)\n }\n const next = new Proxy(specificProps, {\n has(_, key) {\n return key in defaultProps || key in specificProps || key in baseProps\n },\n get(_, key) {\n return defaultProps[key] ?? specificProps[key] ?? baseProps[key]\n },\n })\n propProxies.set(specificProps, next)\n return next\n}\n\nexport const getSubStyle = (\n subKey: string,\n styleIn: Object,\n staticConfig: StaticConfigParsed,\n theme: ThemeObject,\n props: any,\n state: SplitStyleState,\n conf: TamaguiInternalConfig,\n languageContext?: FontLanguageProps,\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(\n key,\n val,\n theme,\n getSubStyleProxiedProps(staticConfig.defaultProps, props, props[subKey]),\n state,\n languageContext,\n avoidDefaultProps\n )\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 if (!isRSC) {\n useInsertEffectCompat(() => {\n insertStyleRules(res.rulesToInsert)\n }, [res.rulesToInsert])\n }\n\n return res\n}\n\nfunction addStyleToInsertRules(rulesToInsert: RulesToInsert, styleObject: PartialStyleObject) {\n if (process.env.TAMAGUI_TARGET === 'web') {\n if (!shouldInsertStyleRules(styleObject)) {\n return\n }\n updateRules(styleObject.identifier, styleObject.rules)\n rulesToInsert.push(styleObject)\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAkF;AAClF,
|
|
6
|
-
"names": ["isMedia", "isPseudo", "isMediaOrPseudo", "style", "key", "conf"]
|
|
4
|
+
"sourcesContent": ["import { stylePropsText, stylePropsTransform, validPseudoKeys, validStyles } from '@tamagui/helpers'\nimport { useInsertionEffect } from 'react'\nimport type { ViewStyle } from 'react-native'\n\nimport { getConfig } from '../config'\nimport { isDevTools } from '../constants/isDevTools'\nimport { isClient, isRSC, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { mediaState as globalMediaState, mediaQueryConfig } from '../hooks/useMedia'\nimport type {\n DebugProp,\n MediaQueryKey,\n PseudoPropKeys,\n PseudoStyles,\n SplitStyleState,\n StackProps,\n StaticConfigParsed,\n TamaguiInternalConfig,\n ThemeParsed,\n} from '../types'\nimport { FontLanguageProps, LanguageContextType } from '../views/FontLanguage.types'\nimport { createMediaStyle } from './createMediaStyle'\nimport { fixStyles } from './expandStyles'\nimport { getAtomicStyle, getStylesAtomic, styleToCSS } from './getStylesAtomic'\nimport {\n PartialStyleObject,\n RulesToInsert,\n insertStyleRules,\n insertedTransforms,\n shouldInsertStyleRules,\n updateInserted,\n updateRules,\n} from './insertStyleRule'\nimport { mergeProps } from './mergeProps'\nimport { mergeTransform } from './mergeTransform'\nimport { normalizeValueWithProperty } from './normalizeValueWithProperty.js'\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: ThemeParsed,\n state: SplitStyleState,\n defaultClassNames?: any,\n languageContext?: LanguageContextType,\n debug?: DebugProp\n) => {\n pseudos: PseudoStyles\n medias: Record<MediaQueryKey, ViewStyle>\n style: ViewStyle\n classNames: ClassNamesObject\n rulesToInsert: RulesToInsert\n viewProps: StackProps\n fontFamily: string | undefined\n mediaKeys: string[]\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 languageContext,\n debug\n) => {\n conf = conf || getConfig()\n const validStyleProps = staticConfig.isText ? stylePropsText : validStyles\n const mediaKeys: string[] = []\n const viewProps: StackProps = {}\n const pseudos: PseudoStyles = {}\n const medias: Record<MediaQueryKey, ViewStyle> = {}\n const mediaState = state.mediaState || globalMediaState\n const usedKeys = new Set<string>()\n const propKeys = Object.keys(props)\n const shouldDoClasses =\n staticConfig.acceptsClassName &&\n (isWeb || process.env.IS_STATIC === 'is_static') &&\n !state.noClassNames &&\n !props.animation\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 const 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 const transforms: Record<TransformNamespaceKey, [string, string]> = {}\n // fontFamily is our special baby, ensure we grab the latest set one always\n let fontFamily: string | undefined\n\n // loop backwards so we can skip already-used props\n for (let i = len - 1; i >= 0; i--) {\n let keyInit = propKeys[i]\n const valInit = props[keyInit]\n\n // normalize shorthands up front\n const expandedKey = conf.shorthands[keyInit]\n if (expandedKey) {\n keyInit = expandedKey\n }\n\n if (keyInit === 'fontFamily' && fontFamily === undefined) {\n fontFamily = valInit\n }\n\n if (usedKeys.has(keyInit)) continue\n if (skipProps[keyInit]) continue\n if (!isWeb && keyInit.startsWith('data-')) continue\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(transforms, classNames, fullKey, cn, isMediaOrPseudo)\n } else {\n nonTamaguis += ' ' + cn\n }\n }\n if (nonTamaguis) {\n usedKeys.add(keyInit)\n mergeClassName(transforms, classNames, 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(transforms, classNames, keyInit, valInit, isMediaOrPseudo)\n continue\n }\n }\n }\n\n if (state.keepVariantsAsProps) {\n if (\n (staticConfig.defaultVariants && keyInit in staticConfig.defaultVariants) ||\n // may want to just: not compile styled() into classnames, always do this, and always pass in all values in extras.props\n // but we'd want to add styled({ extracted: true }) or something at compile time to save on parsing a bit...\n (staticConfig.variants && keyInit in staticConfig.variants)\n ) {\n viewProps[keyInit] = valInit\n }\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 if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n // eslint-disable-next-line no-console\n console.groupCollapsed(' \uD83D\uDD39 styles', keyInit, valInit)\n }\n\n const expanded =\n isMedia || isPseudo\n ? [[keyInit, valInit]]\n : staticConfig.propMapper(\n keyInit,\n valInit,\n theme,\n props,\n state,\n languageContext,\n undefined,\n debug\n )\n\n if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n // eslint-disable-next-line no-console\n console.log('expanded', expanded)\n // eslint-disable-next-line no-console\n console.log('usedKeys', [...usedKeys])\n // eslint-disable-next-line no-console\n console.groupEnd()\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 const pseudoStyleObject = getSubStyle(\n key,\n val,\n staticConfig,\n theme,\n props,\n state,\n conf,\n languageContext,\n true\n )\n pseudos[key] = pseudoStyleObject\n if (shouldDoClasses && key !== 'enterStyle' && key !== 'exitStyle') {\n const pseudoStyles = getAtomicStyle(pseudoStyleObject, 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(transforms, classNames, 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 mediaKeys.push(mediaKeyShort)\n\n if (!mediaQueryConfig[mediaKeyShort]) {\n if (process.env.NODE_ENV === 'development' && debug) {\n // eslint-disable-next-line no-console\n console.warn(\n `Warning: using a $ prefixed prop that doesn't match to a media query, may be an error`,\n key\n )\n }\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(\n key,\n val,\n staticConfig,\n theme,\n props,\n state,\n conf,\n languageContext\n )\n\n if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n // prettier-ignore\n // eslint-disable-next-line no-console\n console.log(` \uD83D\uDCFA ${mediaKey}`, mediaState[mediaKeyShort], { mediaKey, mediaStyle, props, shouldDoClasses, mediaState: { ...mediaState } })\n }\n\n if (shouldDoClasses) {\n const mediaStyles = getStylesAtomic(mediaStyle)\n for (const style of mediaStyles) {\n const out = createMediaStyle(style, mediaKeyShort, mediaQueryConfig)\n const fullKey = `${style.property}${PROP_SPLIT}${mediaKeyShort}`\n if (!usedKeys.has(fullKey)) {\n usedKeys.add(fullKey)\n addStyleToInsertRules(rulesToInsert, out)\n mergeClassName(transforms, classNames, fullKey, out.identifier, true)\n }\n }\n } else {\n if (mediaState[mediaKeyShort]) {\n if (process.env.NODE_ENV === 'development' && debug) {\n // eslint-disable-next-line no-console\n console.log('apply media style', mediaKey, mediaState)\n }\n if (shouldDoClasses) {\n Object.assign(medias, mediaStyle)\n } else {\n for (const key in mediaStyle) {\n usedKeys.add(key)\n style[key] = mediaStyle[key]\n if (key === 'fontFamily') {\n fontFamily = mediaStyle[key]\n }\n }\n }\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 for (const key in defaultClassNames) {\n if (!(key in classNames)) {\n classNames[key] = defaultClassNames[key]\n }\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(transforms, classNames, key, atomicStyle.identifier)\n } else {\n style[key] = atomicStyle.value\n }\n }\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 // eslint-disable-next-line no-console\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 (isDevTools) {\n // prettier-ignore\n // eslint-disable-next-line no-console\n console.groupCollapsed(' \uD83D\uDD39 styles =>')\n const logs = { style, pseudos, medias, classNames, viewProps, state, rulesToInsert }\n for (const key in logs) {\n // eslint-disable-next-line no-console\n console.log(key, logs[key])\n }\n // eslint-disable-next-line no-console\n console.groupEnd()\n }\n }\n\n return {\n fontFamily,\n viewProps,\n style,\n medias,\n mediaKeys,\n pseudos,\n classNames,\n rulesToInsert,\n }\n}\n\nfunction mergeClassName(\n transforms: Record<string, any[]>,\n classNames: Record<string, string>,\n key: string,\n val: string,\n isMediaOrPseudo = false\n) {\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 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 // eslint-disable-next-line no-console\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 }\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/**\n * getSubStyle calls propMapper with props\n * those should be specific to the substyle, but fallback to the base props\n * so given props:\n *\n * { fontSize: 12, color: 'red', $sm: { color: 'blue' } }\n *\n * getSubStyle props should be a proxy that ends up like:\n *\n * { fontSize: 12, color: 'blue' }\n *\n * and to avoid re-creating it over and over, use a WeakMap\n */\nconst propProxies = new WeakMap()\nfunction getSubStyleProxiedProps(defaultProps: Object, baseProps: Object, specificProps: Object) {\n if (!specificProps) {\n // functional variants may want to eventually do something like:\n // have a hooks-like rule (no conditionals)\n // then we run them once on compile with a proxy to capture the keys accessed\n // then add those keys to `inlineProps` so we know we must inline them\n // for now this will trigger because compiled away\n // right now also we don't pass in any pre-extracted styled() props but we should pass them in..\n return baseProps\n }\n // can cache based only on specific it's always referentially consistent with base\n if (propProxies.has(specificProps)) {\n return propProxies.get(specificProps)\n }\n const next = new Proxy(specificProps, {\n has(_, key) {\n return key in defaultProps || key in specificProps || key in baseProps\n },\n get(_, key) {\n return defaultProps[key] ?? specificProps[key] ?? baseProps[key]\n },\n })\n propProxies.set(specificProps, next)\n return next\n}\n\nexport const getSubStyle = (\n subKey: string,\n styleIn: Object,\n staticConfig: StaticConfigParsed,\n theme: ThemeParsed,\n props: any,\n state: SplitStyleState,\n conf: TamaguiInternalConfig,\n languageContext?: FontLanguageProps,\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(\n key,\n val,\n theme,\n getSubStyleProxiedProps(staticConfig.defaultProps, props, props[subKey]),\n state,\n languageContext,\n avoidDefaultProps\n )\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 if (!isRSC) {\n useInsertEffectCompat(() => {\n insertStyleRules(res.rulesToInsert)\n }, [res.rulesToInsert])\n }\n\n return res\n}\n\nfunction addStyleToInsertRules(rulesToInsert: RulesToInsert, styleObject: PartialStyleObject) {\n if (process.env.TAMAGUI_TARGET === 'web') {\n if (!shouldInsertStyleRules(styleObject)) {\n return\n }\n updateRules(styleObject.identifier, styleObject.rules)\n rulesToInsert.push(styleObject)\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["globalMediaState", "isMedia", "isPseudo", "isMediaOrPseudo", "style", "key", "conf"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/getThemeCSSRules.ts"],
|
|
4
|
-
"sourcesContent": ["import { THEME_CLASSNAME_PREFIX } from '../constants/constants'\nimport { Variable, variableToString } from '../createVariable'\nimport { CreateTamaguiProps,
|
|
4
|
+
"sourcesContent": ["import { THEME_CLASSNAME_PREFIX } from '../constants/constants'\nimport { Variable, variableToString } from '../createVariable'\nimport { CreateTamaguiProps, ThemeParsed } from '../types'\nimport { tokensValueToVariable } from './registerCSSVariable'\n\nexport function getThemeCSSRules({\n config,\n themeName,\n theme,\n names,\n}: {\n config: CreateTamaguiProps\n themeName: string\n theme: ThemeParsed\n names: string[]\n}) {\n const cssRuleSets: string[] = []\n\n // special case for SSR\n const hasDarkLight = 'light' in config.themes && 'dark' in config.themes\n const CNP = `.${THEME_CLASSNAME_PREFIX}`\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 max = config.maxDarkLightNesting ?? 3\n\n if (!isDark && !subName.startsWith('light_')) {\n // neither light nor dark subtheme, just generate one selector with :root:root which\n // will override all :root light/dark selectors generated below\n selectors.push(`:root:root ${CNP}${subName}`)\n continue\n }\n\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 numSelectors = Math.round(max * 1.5)\n\n for (let pi = 0; pi < numSelectors; pi++) {\n const isOdd = pi % 2 === 1\n if (isOdd && pi < 3) continue\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 // avoid .t_light .t_light at the end (make sure child is unique from last parent)\n const lastParentSelector = parentSelectors[parentSelectors.length - 1]\n selectors.push(\n `${parentSelectors.join(' ')} ${\n childSelector === lastParentSelector ? '' : childSelector\n }`\n )\n }\n }\n }\n\n const rootSep = config.themeClassNameOnRoot ? '' : ' '\n const css = `${selectors.map((x) => `:root${rootSep}${x}`).join(', ')} {${vars}}`\n cssRuleSets.push(css)\n\n if (config.shouldAddPrefersColorThemes && isDarkOrLightBase) {\n // add media prefers for dark/light base\n const isDark = themeName.startsWith('dark')\n cssRuleSets.push(\n `@media(prefers-color-scheme: ${isDark ? 'dark' : 'light'}) {\nbody { background:${variableToString(theme.background)}; color: ${variableToString(theme.color)} }\n:root {${vars} } \n}`\n )\n }\n\n return cssRuleSets\n}\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAuC;AACvC,4BAA2C;AAE3C,iCAAsC;AAE/B,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,cAAwB,CAAC;AAG/B,QAAM,eAAe,WAAW,OAAO,UAAU,UAAU,OAAO;AAClE,QAAM,MAAM,IAAI;AAChB,MAAI,OAAO;AAIX,aAAW,YAAY,OAAO;AAC5B,UAAM,WAAW,MAAM;AACvB,QAAI,QAAa;AAIjB,QAAI,SAAS,cAAc,CAAC,iDAAsB,IAAI,SAAS,GAAG,GAAG;AACnE,cAAQ,SAAS;AAAA,IACnB,OAAO;AACL,cAAQ,iDAAsB,IAAI,SAAS,GAAG,EAAG;AAAA,IACnD;AACA,YAAQ,KAAK,YAAY;AAAA,EAC3B;AAEA,QAAM,oBAAoB,cAAc,UAAU,cAAc;AAChE,QAAM,YAAY,MAAM,IAAI,CAAC,SAAS;AACpC,WAAO,GAAG,MAAM;AAAA,EAClB,CAAC;AAID,MAAI,cAAc;AAChB,eAAW,WAAW,OAAO;AAC3B,YAAM,SAAS,qBAAqB,QAAQ,WAAW,OAAO;AAC9D,YAAM,MAAM,OAAO,uBAAuB;AAE1C,UAAI,CAAC,UAAU,CAAC,QAAQ,WAAW,QAAQ,GAAG;AAG5C,kBAAU,KAAK,cAAc,MAAM,SAAS;AAC5C;AAAA,MACF;AAEA,YAAM,gBAAgB,GAAG,MAAM,QAAQ,QAAQ,SAAS,UAAU,UAAU,EAAE;AAC9E,YAAM,QAAQ,SAAS,CAAC,QAAQ,OAAO,IAAI,CAAC,SAAS,MAAM;AAC3D,UAAI,mBAAmB;AACrB,cAAM,QAAQ;AAAA,MAChB;AACA,YAAM,CAAC,UAAU,MAAM,IAAI;AAC3B,YAAM,eAAe,KAAK,MAAM,MAAM,GAAG;AAEzC,eAAS,KAAK,GAAG,KAAK,cAAc,MAAM;AACxC,cAAM,QAAQ,KAAK,MAAM;AACzB,YAAI,SAAS,KAAK;AAAG;AACrB,cAAM,UAAU,IAAI,MAAM,KAAK,CAAC,EAAE,KAAK,MAAS,EAAE,IAAI,CAAC,GAAG,QAAQ;AAChE,iBAAO,GAAG,MAAM,MAAM,MAAM,IAAI,WAAW;AAAA,QAC7C,CAAC;AACD,YAAI,kBAAkB,QAAQ,SAAS,IAAI,QAAQ,MAAM,CAAC,IAAI;AAC9D,YAAI,OAAO;AACT,gBAAM,CAAC,QAAQ,WAAW,IAAI,IAAI;AAClC,4BAAkB,CAAC,QAAQ,GAAG,MAAM,MAAM;AAAA,QAC5C;AAEA,cAAM,qBAAqB,gBAAgB,gBAAgB,SAAS;AACpE,kBAAU;AAAA,UACR,GAAG,gBAAgB,KAAK,GAAG,KACzB,kBAAkB,qBAAqB,KAAK;AAAA,QAEhD;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,UAAU,OAAO,uBAAuB,KAAK;AACnD,QAAM,MAAM,GAAG,UAAU,IAAI,CAAC,MAAM,QAAQ,UAAU,GAAG,EAAE,KAAK,IAAI,MAAM;AAC1E,cAAY,KAAK,GAAG;AAEpB,MAAI,OAAO,+BAA+B,mBAAmB;AAE3D,UAAM,SAAS,UAAU,WAAW,MAAM;AAC1C,gBAAY;AAAA,MACV,gCAAgC,SAAS,SAAS;AAAA,wBACpC,wCAAiB,MAAM,UAAU,iBAAa,wCAAiB,MAAM,KAAK;AAAA,SACrF;AAAA;AAAA,IAEL;AAAA,EACF;AAEA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -24,15 +24,19 @@ module.exports = __toCommonJS(useIsSSR_exports);
|
|
|
24
24
|
var import_react = require("react");
|
|
25
25
|
var import_platform = require("../constants/platform");
|
|
26
26
|
var import_startTransition = require("../helpers/startTransition");
|
|
27
|
-
const useIsSSR = () => {
|
|
27
|
+
const useIsSSR = (props) => {
|
|
28
28
|
const [val, setVal] = (0, import_react.useState)(true);
|
|
29
|
-
(
|
|
30
|
-
|
|
31
|
-
(0
|
|
29
|
+
if (import_platform.isWeb && !import_platform.isServer) {
|
|
30
|
+
(0, import_platform.useIsomorphicLayoutEffect)(() => {
|
|
31
|
+
if (props == null ? void 0 : props.immediate) {
|
|
32
32
|
setVal(false);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
|
|
33
|
+
} else {
|
|
34
|
+
(0, import_startTransition.startTransition)(() => {
|
|
35
|
+
setVal(false);
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
}, []);
|
|
39
|
+
}
|
|
36
40
|
return val;
|
|
37
41
|
};
|
|
38
42
|
// Annotate the CommonJS export names for ESM import in node:
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/useIsSSR.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useState } from 'react'\n\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyB;AAEzB,
|
|
4
|
+
"sourcesContent": ["import { useState } from 'react'\n\nimport { isServer, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { startTransition } from '../helpers/startTransition'\n\n// because any change before first useEffect causes hydration / mismatch issues\n\nexport const useIsSSR = (props?: { immediate?: boolean }) => {\n const [val, setVal] = useState(true)\n\n if (isWeb && !isServer) {\n useIsomorphicLayoutEffect(() => {\n // could also have a global tamagui `config.immediateSSRTransition`\n if (props?.immediate) {\n setVal(false)\n } else {\n startTransition(() => {\n setVal(false)\n })\n }\n }, [])\n }\n\n return val\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyB;AAEzB,sBAA2D;AAC3D,6BAAgC;AAIzB,MAAM,WAAW,CAAC,UAAoC;AAC3D,QAAM,CAAC,KAAK,MAAM,QAAI,uBAAS,IAAI;AAEnC,MAAI,yBAAS,CAAC,0BAAU;AACtB,mDAA0B,MAAM;AAE9B,UAAI,+BAAO,WAAW;AACpB,eAAO,KAAK;AAAA,MACd,OAAO;AACL,oDAAgB,MAAM;AACpB,iBAAO,KAAK;AAAA,QACd,CAAC;AAAA,MACH;AAAA,IACF,GAAG,CAAC,CAAC;AAAA,EACP;AAEA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -25,7 +25,7 @@ var import_react = require("react");
|
|
|
25
25
|
var import_platform = require("../constants/platform");
|
|
26
26
|
const useIsTouchDevice = () => {
|
|
27
27
|
const [touchOnly, setTouchOnly] = (0, import_react.useState)(false);
|
|
28
|
-
if (import_platform.isWeb && !import_platform.
|
|
28
|
+
if (import_platform.isWeb && !import_platform.isServer) {
|
|
29
29
|
(0, import_platform.useIsomorphicLayoutEffect)(() => {
|
|
30
30
|
if (import_platform.isTouchable) {
|
|
31
31
|
setTouchOnly(true);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/useIsTouchDevice.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useState } from 'react'\n\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyB;AAEzB,
|
|
4
|
+
"sourcesContent": ["import { useState } from 'react'\n\nimport { isServer, isTouchable, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\n\n// ssr friendly\n\nexport const useIsTouchDevice = () => {\n const [touchOnly, setTouchOnly] = useState(false)\n\n if (isWeb && !isServer) {\n // only ever false on web SSR (env), so run effect conditionally\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useIsomorphicLayoutEffect(() => {\n if (isTouchable) {\n setTouchOnly(true)\n }\n }, [])\n }\n\n return touchOnly\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyB;AAEzB,sBAAwE;AAIjE,MAAM,mBAAmB,MAAM;AACpC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAEhD,MAAI,yBAAS,CAAC,0BAAU;AAGtB,mDAA0B,MAAM;AAC9B,UAAI,6BAAa;AACf,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF,GAAG,CAAC,CAAC;AAAA,EACP;AAEA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -20,6 +20,7 @@ var useMedia_exports = {};
|
|
|
20
20
|
__export(useMedia_exports, {
|
|
21
21
|
addMediaQueryListener: () => addMediaQueryListener,
|
|
22
22
|
configureMedia: () => configureMedia,
|
|
23
|
+
getInitialMediaState: () => getInitialMediaState,
|
|
23
24
|
getMedia: () => getMedia,
|
|
24
25
|
mediaObjectToString: () => mediaObjectToString,
|
|
25
26
|
mediaQueryConfig: () => mediaQueryConfig,
|
|
@@ -33,9 +34,22 @@ var import_react = require("react");
|
|
|
33
34
|
var import_platform = require("../constants/platform");
|
|
34
35
|
var import_matchMedia = require("../helpers/matchMedia");
|
|
35
36
|
var import_useSafeRef = require("./useSafeRef");
|
|
36
|
-
const mediaState =
|
|
37
|
+
const mediaState = process.env.NODE_ENV === "development" ? new Proxy(
|
|
38
|
+
{},
|
|
39
|
+
{
|
|
40
|
+
get(target, key) {
|
|
41
|
+
if (typeof key === "string" && key[0] === "$") {
|
|
42
|
+
throw new Error(`Access of mediaState should never include $`);
|
|
43
|
+
}
|
|
44
|
+
return Reflect.get(target, key);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
) : {};
|
|
37
48
|
const mediaQueryListeners = {};
|
|
38
49
|
function addMediaQueryListener(key, cb) {
|
|
50
|
+
if (process.env.NODE_ENV === "development" && key[0] === "$") {
|
|
51
|
+
console.warn(`Warning, listening to media queries shouldn't use the "$" prefix`);
|
|
52
|
+
}
|
|
39
53
|
mediaQueryListeners[key] = mediaQueryListeners[key] || /* @__PURE__ */ new Set();
|
|
40
54
|
mediaQueryListeners[key].add(cb);
|
|
41
55
|
return () => removeMediaQueryListener(key, cb);
|
|
@@ -50,31 +64,31 @@ const getMedia = () => {
|
|
|
50
64
|
};
|
|
51
65
|
const dispose = /* @__PURE__ */ new Set();
|
|
52
66
|
let initialMediaState;
|
|
53
|
-
const configureMedia = ({
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
} = {}) => {
|
|
57
|
-
if (!queries)
|
|
67
|
+
const configureMedia = (config) => {
|
|
68
|
+
const { media, mediaQueryDefaultActive } = config;
|
|
69
|
+
if (!media)
|
|
58
70
|
return;
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
if (JSON.stringify(queries) === JSON.stringify(mediaQueryConfig)) {
|
|
62
|
-
return;
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
setupMediaListeners();
|
|
66
|
-
}
|
|
67
|
-
Object.assign(mediaQueryConfig, queries);
|
|
68
|
-
for (const key in queries) {
|
|
69
|
-
mediaState[key] = defaultActive[key] || false;
|
|
71
|
+
for (const key in media) {
|
|
72
|
+
mediaState[key] = (mediaQueryDefaultActive == null ? void 0 : mediaQueryDefaultActive[key]) || false;
|
|
70
73
|
}
|
|
74
|
+
Object.assign(mediaQueryConfig, media);
|
|
71
75
|
initialMediaState = { ...mediaState };
|
|
76
|
+
if (config.disableSSR) {
|
|
77
|
+
setupMediaListeners();
|
|
78
|
+
}
|
|
72
79
|
};
|
|
80
|
+
const getInitialMediaState = () => initialMediaState;
|
|
73
81
|
function unlisten() {
|
|
74
82
|
dispose.forEach((cb) => cb());
|
|
75
83
|
dispose.clear();
|
|
76
84
|
}
|
|
85
|
+
let configuredKey = "";
|
|
77
86
|
function setupMediaListeners() {
|
|
87
|
+
const nextKey = JSON.stringify(mediaQueryConfig);
|
|
88
|
+
if (nextKey === configuredKey) {
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
configuredKey = nextKey;
|
|
78
92
|
unlisten();
|
|
79
93
|
for (const key in mediaQueryConfig) {
|
|
80
94
|
let update2 = function() {
|
|
@@ -84,9 +98,7 @@ function setupMediaListeners() {
|
|
|
84
98
|
mediaState[key] = next;
|
|
85
99
|
const listeners = mediaQueryListeners[key];
|
|
86
100
|
if (listeners == null ? void 0 : listeners.size) {
|
|
87
|
-
|
|
88
|
-
cb();
|
|
89
|
-
}
|
|
101
|
+
listeners.forEach((cb) => cb(next));
|
|
90
102
|
}
|
|
91
103
|
};
|
|
92
104
|
var update = update2;
|
|
@@ -101,14 +113,17 @@ function setupMediaListeners() {
|
|
|
101
113
|
update2();
|
|
102
114
|
}
|
|
103
115
|
}
|
|
104
|
-
function useMediaQueryListeners() {
|
|
105
|
-
(
|
|
116
|
+
function useMediaQueryListeners(config) {
|
|
117
|
+
if (config.disableSSR) {
|
|
118
|
+
return;
|
|
119
|
+
}
|
|
120
|
+
(0, import_react.useEffect)(() => {
|
|
106
121
|
setupMediaListeners();
|
|
107
122
|
return unlisten;
|
|
108
123
|
}, []);
|
|
109
124
|
}
|
|
110
125
|
function useMedia() {
|
|
111
|
-
const [state, setState] = (0, import_react.useState)(initialMediaState);
|
|
126
|
+
const [state, setState] = (0, import_react.useState)(initialMediaState || {});
|
|
112
127
|
const keys = (0, import_useSafeRef.useSafeRef)({});
|
|
113
128
|
function updateState() {
|
|
114
129
|
setState((prev) => {
|
|
@@ -121,20 +136,26 @@ function useMedia() {
|
|
|
121
136
|
});
|
|
122
137
|
}
|
|
123
138
|
(0, import_platform.useIsomorphicLayoutEffect)(() => {
|
|
124
|
-
const
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
}
|
|
139
|
+
const disposes = Object.keys(keys.current).map(
|
|
140
|
+
(key) => addMediaQueryListener(key, updateState)
|
|
141
|
+
);
|
|
128
142
|
updateState();
|
|
129
143
|
return () => {
|
|
130
|
-
|
|
144
|
+
disposes.forEach((cb) => cb());
|
|
131
145
|
};
|
|
132
146
|
});
|
|
133
147
|
return (0, import_react.useMemo)(
|
|
134
148
|
() => new Proxy(state, {
|
|
135
149
|
get(_, key) {
|
|
150
|
+
if (process.env.NODE_ENV === "development") {
|
|
151
|
+
if (!initialMediaState) {
|
|
152
|
+
throw new Error(
|
|
153
|
+
`To use useMedia() you must pass in media configuration to createTamagui, none was found.`
|
|
154
|
+
);
|
|
155
|
+
}
|
|
156
|
+
}
|
|
136
157
|
if (!keys.current[key]) {
|
|
137
|
-
keys.current
|
|
158
|
+
keys.current[key] = true;
|
|
138
159
|
}
|
|
139
160
|
return Reflect.get(state, key);
|
|
140
161
|
}
|
|
@@ -164,6 +185,7 @@ function mediaObjectToString(query) {
|
|
|
164
185
|
0 && (module.exports = {
|
|
165
186
|
addMediaQueryListener,
|
|
166
187
|
configureMedia,
|
|
188
|
+
getInitialMediaState,
|
|
167
189
|
getMedia,
|
|
168
190
|
mediaObjectToString,
|
|
169
191
|
mediaQueryConfig,
|