@tamagui/core 1.0.1-beta.73 → 1.0.1-beta.76
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/createComponent.js +25 -20
- package/dist/cjs/createComponent.js.map +2 -2
- package/dist/cjs/createFont.js.map +1 -1
- package/dist/cjs/createTamagui.js +2 -2
- package/dist/cjs/createTamagui.js.map +2 -2
- package/dist/cjs/createVariable.js +9 -1
- package/dist/cjs/createVariable.js.map +2 -2
- package/dist/cjs/helpers/createPropMapper.js +3 -1
- package/dist/cjs/helpers/createPropMapper.js.map +2 -2
- package/dist/cjs/helpers/generateAtomicStyles.js +55 -70
- package/dist/cjs/helpers/generateAtomicStyles.js.map +2 -2
- package/dist/cjs/helpers/getSplitStyles.js +15 -10
- package/dist/cjs/helpers/getSplitStyles.js.map +2 -2
- package/dist/cjs/helpers/getStylesAtomic.js +4 -2
- package/dist/cjs/helpers/getStylesAtomic.js.map +2 -2
- package/dist/cjs/helpers/insertStyleRule.js +12 -10
- package/dist/cjs/helpers/insertStyleRule.js.map +2 -2
- package/dist/cjs/helpers/pseudoDescriptors.js +41 -0
- package/dist/cjs/helpers/pseudoDescriptors.js.map +7 -0
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/insertFont.js +17 -4
- package/dist/cjs/insertFont.js.map +2 -2
- package/dist/cjs/static.js +1 -1
- package/dist/cjs/static.js.map +2 -2
- package/dist/cjs/types.js.map +1 -1
- package/dist/esm/ThemeManager.js +6 -22
- package/dist/esm/ThemeManager.js.map +1 -1
- package/dist/esm/constants/constants.js +23 -8
- package/dist/esm/constants/constants.js.map +1 -1
- package/dist/esm/createComponent.js +239 -131
- package/dist/esm/createComponent.js.map +2 -2
- package/dist/esm/createFont.js.map +1 -1
- package/dist/esm/createTamagui.js +28 -10
- package/dist/esm/createTamagui.js.map +2 -2
- package/dist/esm/createVariable.js +9 -1
- package/dist/esm/createVariable.js.map +2 -2
- package/dist/esm/helpers/createPropMapper.js +20 -5
- package/dist/esm/helpers/createPropMapper.js.map +2 -2
- package/dist/esm/helpers/createShallowUpdate.js +17 -1
- package/dist/esm/helpers/createShallowUpdate.js.map +1 -1
- package/dist/esm/helpers/createTamaguiProvider.js +39 -9
- package/dist/esm/helpers/createTamaguiProvider.js.map +1 -1
- package/dist/esm/helpers/extendStaticConfig.js +28 -27
- package/dist/esm/helpers/extendStaticConfig.js.map +1 -1
- package/dist/esm/helpers/fixNativeShadow.native.js +2 -3
- package/dist/esm/helpers/fixNativeShadow.native.js.map +1 -1
- package/dist/esm/helpers/generateAtomicStyles.js +75 -76
- package/dist/esm/helpers/generateAtomicStyles.js.map +2 -2
- package/dist/esm/helpers/getSize.js +2 -3
- package/dist/esm/helpers/getSize.js.map +1 -1
- package/dist/esm/helpers/getSplitStyles.js +47 -30
- package/dist/esm/helpers/getSplitStyles.js.map +2 -2
- package/dist/esm/helpers/getStackSize.js +1 -2
- package/dist/esm/helpers/getStackSize.js.map +1 -1
- package/dist/esm/helpers/getStylesAtomic.js +38 -7
- package/dist/esm/helpers/getStylesAtomic.js.map +2 -2
- package/dist/esm/helpers/insertStyleRule.js +12 -10
- package/dist/esm/helpers/insertStyleRule.js.map +2 -2
- package/dist/esm/helpers/mergeTransform.js +1 -1
- package/dist/esm/helpers/mergeTransform.js.map +1 -1
- package/dist/esm/helpers/pseudoDescriptors.js +18 -0
- package/dist/esm/helpers/pseudoDescriptors.js.map +7 -0
- package/dist/esm/helpers/themeable.js +33 -2
- package/dist/esm/helpers/themeable.js.map +1 -1
- package/dist/esm/helpers/validate.js +30 -5
- package/dist/esm/helpers/validate.js.map +1 -1
- package/dist/esm/hooks/useFeatures.js +40 -8
- package/dist/esm/hooks/useFeatures.js.map +1 -1
- package/dist/esm/hooks/useId.js +2 -3
- package/dist/esm/hooks/useId.js.map +1 -1
- package/dist/esm/hooks/useMedia.js +18 -6
- package/dist/esm/hooks/useMedia.js.map +1 -1
- package/dist/esm/hooks/usePressable.js +16 -1
- package/dist/esm/hooks/usePressable.js.map +1 -1
- package/dist/esm/hooks/useTheme.js +24 -7
- package/dist/esm/hooks/useTheme.js.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/insertFont.js +17 -4
- package/dist/esm/insertFont.js.map +2 -2
- package/dist/esm/static.js +1 -1
- package/dist/esm/static.js.map +1 -1
- package/dist/esm/styled.js +38 -9
- package/dist/esm/styled.js.map +1 -1
- package/dist/esm/views/Slot.js +40 -11
- package/dist/esm/views/Slot.js.map +1 -1
- package/dist/esm/views/Stack.js +21 -3
- package/dist/esm/views/Stack.js.map +1 -1
- package/dist/esm/views/Text.js +24 -12
- package/dist/esm/views/Text.js.map +1 -1
- package/dist/esm/views/TextAncestorContext.js +2 -2
- package/dist/esm/views/TextAncestorContext.js.map +1 -1
- package/dist/jsx/createComponent.js +13 -11
- package/dist/jsx/createTamagui.js +2 -2
- package/dist/jsx/insertFont.js +17 -4
- package/package.json +6 -6
- package/reset.css +4 -0
- package/types/createComponent.d.ts +2 -4
- package/types/createComponent.d.ts.map +1 -1
- package/types/createVariable.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/generateAtomicStyles.d.ts +2 -2
- package/types/helpers/generateAtomicStyles.d.ts.map +1 -1
- package/types/helpers/getSplitStyles.d.ts +1 -1
- package/types/helpers/getSplitStyles.d.ts.map +1 -1
- package/types/helpers/getStylesAtomic.d.ts +2 -0
- package/types/helpers/getStylesAtomic.d.ts.map +1 -1
- package/types/helpers/insertStyleRule.d.ts +1 -1
- package/types/helpers/insertStyleRule.d.ts.map +1 -1
- package/types/helpers/pseudoDescriptors.d.ts +16 -0
- package/types/helpers/pseudoDescriptors.d.ts.map +1 -0
- package/types/helpers/pseudos.d.ts +2 -2
- package/types/helpers/pseudos.d.ts.map +1 -1
- package/types/index.d.ts +1 -1
- package/types/index.d.ts.map +1 -1
- package/types/insertFont.d.ts +1 -1
- package/types/insertFont.d.ts.map +1 -1
- package/types/static.d.ts +1 -1
- package/types/static.d.ts.map +1 -1
- package/types/types.d.ts +2 -2
- package/types/types.d.ts.map +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/generateAtomicStyles.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 normalizeCSSColor from 'normalize-css-color'\nimport { TextStyle, ViewStyle } from 'react-native'\n\nimport { getConfig } from '../conf'\nimport { isWeb } from '../constants/platform'\nimport { reversedShorthands } from '../createTamagui'\nimport { PseudoDescriptor, pseudos } from './pseudos'\n\ntype Value = Object | Array<any> | string | number\nexport type Style = { [key: string]: Value }\n\nexport const generateAtomicStyles = (\n style: ViewStyle & TextStyle,\n pseudo?: PseudoDescriptor\n): StyleObject[] => {\n const res = expandStyles(style)\n const out: StyleObject[] = []\n for (const key in res) {\n const value = res[key]\n if (value != null) {\n const valueString = stringifyValueWithProperty(value, key)\n const hash = simpleHash(key + valueString + (pseudo?.name || ''))\n const cachedResult = cache.get(hash, valueString)\n if (cachedResult != null) {\n out.push(cachedResult)\n } else {\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, valueString, pseudo)\n const styleObject: StyleObject = {\n property: key,\n pseudo: pseudo?.name,\n value,\n identifier,\n rules,\n }\n cache.set(hash, valueString, styleObject)\n out.push(styleObject)\n }\n }\n }\n if (style.borderColor === 'transparent') {\n debugger\n }\n return out\n}\n\nconst reducedStyleKeys = {\n shadowColor: true,\n shadowOffset: true,\n shadowOpacity: true,\n shadowRadius: true,\n textShadowColor: true,\n textShadowOffset: true,\n textShadowRadius: true,\n}\n\nlet shorthands: Record<string, string> | null = null\n\n// can likely remove this and include in other loops\nexport function expandStyles(style: any) {\n const res = {}\n boxShadowReducer(res, style)\n textShadowReducer(res, style)\n borderReducer(res, style)\n for (let key in style) {\n shorthands = shorthands || getConfig().shorthands\n if (shorthands) {\n key = shorthands[key] || key\n }\n if (reducedStyleKeys[key]) continue\n if (key in pseudos) {\n res[key] = expandStyles(style[key])\n } else {\n const val = normalizeValueWithProperty(style[key], key)\n const out = expandStyle(key, val)\n if (out) {\n Object.assign(res, Object.fromEntries(out))\n } else {\n res[key] = val\n }\n }\n }\n return res\n}\n\n// why is this diff from react-native-web!? need to figure out\nfunction borderReducer(res: any, cur: any) {\n for (const key in borderDefaults) {\n if (key in cur) {\n res[borderDefaults[key]] = cur[borderDefaults[key]] || 'solid'\n }\n }\n}\n\nconst borderDefaults = {\n borderWidth: 'borderStyle',\n borderBottomWidth: 'borderBottomStyle',\n borderTopWidth: 'borderTopStyle',\n borderLeftWidth: 'borderLeftStyle',\n borderRightWidth: 'borderRightStyle',\n}\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 pseudos) {\n const pseudo = pseudos[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!important'\n if (value === 'box-only') {\n const block = createDeclarationBlock({ pointerEvents: 'none' }, important)\n rules.push(`${selector}>*${block}`)\n }\n } else if (value === 'none' || value === 'box-none') {\n finalValue = 'none!important'\n if (value === 'box-none') {\n const block = createDeclarationBlock({ pointerEvents: 'auto' }, important)\n rules.push(`${selector}>*${block}`)\n }\n }\n const block = createDeclarationBlock({ pointerEvents: finalValue }, important)\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?.name === 'hover') {\n rules = rules.map((r) => `@media not all and (hover: none) { ${r} }`)\n }\n\n return rules\n}\n\nexport function expandStyle(key: string, value: any) {\n if (key === 'flex') {\n // The 'flex' property value in React Native must be a positive integer,\n // 0, or -1.\n if (value <= -1) {\n return [\n ['flexGrow', 0],\n ['flexShrink', 1],\n ['flexBasis', 'auto'],\n ]\n }\n // normalizing to better align with native\n // see spec for flex shorthand https://developer.mozilla.org/en-US/docs/Web/CSS/flex\n if (value >= 0) {\n return [\n ['flexGrow', value],\n ['flexShrink', 1],\n ]\n }\n return\n }\n\n // web only\n switch (key) {\n // Ignore some React Native styles\n case 'elevation':\n case 'overlayColor':\n case 'resizeMode':\n case 'tintColor': {\n break\n }\n\n case 'aspectRatio': {\n return [[key, value.toString()]]\n }\n\n // TODO: remove once this issue is fixed\n // https://github.com/rofrischmann/inline-style-prefixer/issues/159\n case 'backgroundClip': {\n if (value === 'text') {\n return [\n ['backgroundClip', value],\n ['WebkitBackgroundClip', value],\n ]\n }\n break\n }\n\n case 'textAlignVertical': {\n return [['verticalAlign', value === 'center' ? 'middle' : value]]\n }\n\n case 'textDecorationLine': {\n return [['textDecorationLine', value]]\n }\n\n case 'transform': {\n if (Array.isArray(value)) {\n return [[key, value.map(mapTransform).join(' ')]]\n }\n break\n }\n\n case 'writingDirection': {\n return [['direction', value]]\n }\n }\n\n const longKey = STYLE_SHORT_FORM_EXPANSIONS[key]\n if (longKey) {\n return longKey.map((key) => {\n return [key, value]\n })\n } else {\n if (isWeb && Array.isArray(value)) {\n return [[key, value.join(',')]]\n }\n }\n}\n\nconst cache = {\n get(property, value) {\n if (\n cache[property] != null &&\n cache[property].hasOwnProperty(value) &&\n cache[property][value] != null\n ) {\n return cache[property][value]\n }\n },\n set(property, value, object) {\n if (cache[property] == null) {\n cache[property] = {}\n }\n return (cache[property][value] = object)\n },\n}\n\nfunction stringifyValueWithProperty(value: Value, property?: string): string {\n // e.g., 0 => '0px', 'black' => 'rgba(0,0,0,1)'\n return normalizeValueWithProperty(value, property)\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\nconst colorProps = {\n backgroundColor: true,\n borderColor: true,\n borderTopColor: true,\n borderRightColor: true,\n borderBottomColor: true,\n borderLeftColor: true,\n color: true,\n shadowColor: true,\n textDecorationColor: true,\n textShadowColor: true,\n}\n\nfunction normalizeValueWithProperty(value: any, property?: string): any {\n if (process.env.TAMAGUI_TARGET === 'web') {\n const shouldCoerceToPx =\n typeof value === 'number' &&\n (property === undefined || property === null || !unitlessNumbers[property])\n if (shouldCoerceToPx) {\n return `${value}px`\n }\n }\n if (property && colorProps[property]) {\n return normalizeColor(value)\n }\n return value\n}\n\nconst normalizeColor = (color?: number | string, opacity = 1): void | string => {\n if (color == null || color == undefined) {\n return\n }\n if (process.env.TAMAGUI_TARGET === 'web') {\n if (typeof color === 'string' && isWebColor(color)) {\n return color\n }\n }\n const colorInt = processColor(color)\n if (colorInt != null) {\n const r = (colorInt >> 16) & 255\n const g = (colorInt >> 8) & 255\n const b = colorInt & 255\n const a = ((colorInt >> 24) & 255) / 255\n const alpha = (a * opacity).toFixed(2)\n return `rgba(${r},${g},${b},${alpha})`\n }\n return `${color}`\n}\n\nconst webColors = {\n currentColor: true,\n currentcolor: true,\n transparent: true,\n inherit: true,\n}\n\nconst isWebColor = (color: string): boolean => webColors[color] || color.indexOf('var(') === 0\n\nconst processColor = (color?: number | string): number | undefined | null => {\n if (color === undefined || color === null) {\n return color\n }\n let intColor = normalizeCSSColor(color)\n if (intColor === undefined || intColor === null) {\n return undefined\n }\n return ((+intColor << 24) | (+intColor >>> 8)) >>> 0\n}\n\nconst unitlessNumbers = {\n animationIterationCount: true,\n aspectRatio: true,\n borderImageOutset: true,\n borderImageSlice: true,\n borderImageWidth: true,\n boxFlex: true,\n boxFleGroup: true,\n boxOrdinalGroup: true,\n columnCount: true,\n flex: true,\n flexGrow: true,\n flexOrder: true,\n flexPositive: true,\n flexShrink: true,\n flexNegative: true,\n fontWeight: true,\n gridRow: true,\n gridRowEnd: true,\n gridRowGap: true,\n gridRowStart: true,\n gridColumn: true,\n gridColumnEnd: true,\n gridColumnGap: true,\n gridColumnStart: true,\n lineClamp: true,\n opacity: true,\n order: true,\n orphans: true,\n tabSize: true,\n widows: true,\n zIndex: true,\n zoom: true,\n fillOpacity: true,\n floodOpacity: true,\n stopOpacity: true,\n strokeDasharray: true,\n strokeDashoffset: true,\n strokeMiterlimit: true,\n strokeOpacity: true,\n strokeWidth: true,\n scale: true,\n scaleX: true,\n scaleY: true,\n scaleZ: true,\n shadowOpacity: true,\n}\n\n/**\n * Support style names that may come passed in prefixed by adding permutations\n * of vendor prefixes.\n */\n\nconst resolveShadowValue = (style: ViewStyle): void | string => {\n const { shadowColor, shadowOffset, shadowOpacity, shadowRadius } = style\n if (shadowRadius === undefined) {\n return\n }\n const { height, width } = shadowOffset || defaultOffset\n const offsetX = normalizeValueWithProperty(width)\n const offsetY = normalizeValueWithProperty(height)\n const blurRadius = normalizeValueWithProperty(shadowRadius || 0)\n const color = normalizeColor(String(shadowColor || 'black'), shadowOpacity)\n return `${offsetX} ${offsetY} ${blurRadius} ${color}`\n}\n\nfunction boxShadowReducer(resolvedStyle: any, style: any) {\n const { boxShadow } = style\n const shadow = resolveShadowValue(style)\n if (shadow != null) {\n resolvedStyle.boxShadow = boxShadow ? `${boxShadow}, ${shadow}` : shadow\n }\n}\n\nconst defaultOffset = { height: 0, width: 0 }\n\nfunction textShadowReducer(resolvedStyle: any, style: any) {\n const { textShadowColor, textShadowOffset, textShadowRadius } = style\n const { height, width } = textShadowOffset || defaultOffset\n const radius = textShadowRadius || 0\n const offsetX = normalizeValueWithProperty(width)\n const offsetY = normalizeValueWithProperty(height)\n const blurRadius = normalizeValueWithProperty(radius)\n const color = normalizeValueWithProperty(textShadowColor, 'textShadowColor')\n\n if (\n color &&\n (height !== 0 || width !== 0 || radius !== 0) &&\n offsetX != null &&\n offsetY != null &&\n blurRadius != null\n ) {\n resolvedStyle.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`\n }\n}\n\nconst STYLE_SHORT_FORM_EXPANSIONS = {\n borderColor: ['borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor'],\n borderRadius: [\n 'borderTopLeftRadius',\n 'borderTopRightRadius',\n 'borderBottomRightRadius',\n 'borderBottomLeftRadius',\n ],\n borderStyle: ['borderTopStyle', 'borderRightStyle', 'borderBottomStyle', 'borderLeftStyle'],\n borderWidth: ['borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth'],\n margin: ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'],\n marginHorizontal: ['marginRight', 'marginLeft'],\n marginVertical: ['marginTop', 'marginBottom'],\n overscrollBehavior: ['overscrollBehaviorX', 'overscrollBehaviorY'],\n padding: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],\n paddingHorizontal: ['paddingRight', 'paddingLeft'],\n paddingVertical: ['paddingTop', 'paddingBottom'],\n ...(isWeb && {\n // react-native doesn't support X / Y\n overflow: ['overflowX', 'overflowY'],\n }),\n}\n"],
|
|
5
|
-
"mappings": "AAKA;AACA;AACA;AAGA;AACA;AACA;AACA;
|
|
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 normalizeCSSColor from 'normalize-css-color'\nimport { TextStyle, ViewStyle } from 'react-native'\n\nimport { getConfig } from '../conf'\nimport { isWeb } from '../constants/platform'\nimport { reversedShorthands } from '../createTamagui'\nimport { PseudoDescriptor, pseudoDescriptors } from './pseudoDescriptors'\n\ntype Value = Object | Array<any> | string | number\nexport type Style = { [key: string]: Value }\n\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}\n\nconst cache = new Cache()\n\nexport const generateAtomicStyles = (\n style: ViewStyle & TextStyle,\n pseudo?: PseudoDescriptor\n): StyleObject[] => {\n const res = expandStyles(style)\n const out: StyleObject[] = []\n for (const key in res) {\n const value = res[key]\n if (value != null && value != undefined) {\n const valueString = normalizeValueWithProperty(value, key)\n const uid = key + (pseudo?.name || '')\n const cachedResult = cache.get(uid, valueString)\n if (cachedResult != undefined) {\n out.push(cachedResult)\n } else {\n const hash = simpleHash(uid + valueString)\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, valueString, pseudo)\n const styleObject: StyleObject = {\n property: key,\n pseudo: pseudo?.name,\n value,\n identifier,\n rules,\n }\n cache.set(uid, valueString, styleObject)\n out.push(styleObject)\n }\n }\n }\n return out\n}\n\nconst reducedStyleKeys = {\n shadowColor: true,\n shadowOffset: true,\n shadowOpacity: true,\n shadowRadius: true,\n textShadowColor: true,\n textShadowOffset: true,\n textShadowRadius: true,\n}\n\nlet shorthands: Record<string, string> | null = null\n\n// can likely remove this and include in other loops\nexport function expandStyles(style: any) {\n const res: Record<string, any> = {}\n\n // box-shadow\n const { boxShadow, shadowColor, shadowOffset, shadowOpacity, shadowRadius } = style\n if (shadowRadius !== undefined) {\n const { height, width } = shadowOffset || defaultOffset\n const offsetX = normalizeValueWithProperty(width || 0)\n const offsetY = normalizeValueWithProperty(height || 0)\n const blurRadius = normalizeValueWithProperty(shadowRadius || 0)\n const color = normalizeColor(String(shadowColor || 'black'), shadowOpacity)\n const shadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`\n res.boxShadow = boxShadow ? `${boxShadow}, ${shadow}` : shadow\n } else if (boxShadow) {\n res.boxShadow = boxShadow\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 res.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`\n }\n }\n\n // ensure border style set by default to solid\n for (const key in borderDefaults) {\n if (key in style) {\n res[borderDefaults[key]] = style[borderDefaults[key]] || 'solid'\n }\n }\n\n for (let key in style) {\n shorthands = shorthands || getConfig().shorthands\n if (shorthands) {\n key = shorthands[key] || key\n }\n if (reducedStyleKeys[key]) continue\n if (key in pseudoDescriptors) {\n res[key] = expandStyles(style[key])\n } else {\n const val = normalizeValueWithProperty(style[key], key)\n const out = expandStyle(key, val)\n if (out) {\n Object.assign(res, Object.fromEntries(out))\n } else {\n res[key] = val\n }\n }\n }\n return res\n}\n\nconst borderDefaults = {\n borderWidth: 'borderStyle',\n borderBottomWidth: 'borderBottomStyle',\n borderTopWidth: 'borderTopStyle',\n borderLeftWidth: 'borderLeftStyle',\n borderRightWidth: 'borderRightStyle',\n}\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!important'\n if (value === 'box-only') {\n const block = createDeclarationBlock({ pointerEvents: 'none' }, important)\n rules.push(`${selector}>*${block}`)\n }\n } else if (value === 'none' || value === 'box-none') {\n finalValue = 'none!important'\n if (value === 'box-none') {\n const block = createDeclarationBlock({ pointerEvents: 'auto' }, important)\n rules.push(`${selector}>*${block}`)\n }\n }\n const block = createDeclarationBlock({ pointerEvents: finalValue }, important)\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?.name === 'hover') {\n rules = rules.map((r) => `@media not all and (hover: none) { ${r} }`)\n }\n\n return rules\n}\n\nexport function expandStyle(key: string, value: any) {\n if (key === 'flex') {\n // The 'flex' property value in React Native must be a positive integer,\n // 0, or -1.\n if (value <= -1) {\n return [\n ['flexGrow', 0],\n ['flexShrink', 1],\n ['flexBasis', 'auto'],\n ]\n }\n // normalizing to better align with native\n // see spec for flex shorthand https://developer.mozilla.org/en-US/docs/Web/CSS/flex\n if (value >= 0) {\n return [\n ['flexGrow', value],\n ['flexShrink', 1],\n ]\n }\n return\n }\n\n // web only\n switch (key) {\n // Ignore some React Native styles\n case 'elevation':\n case 'overlayColor':\n case 'resizeMode':\n case 'tintColor': {\n break\n }\n\n case 'aspectRatio': {\n return [[key, value.toString()]]\n }\n\n // TODO: remove once this issue is fixed\n // https://github.com/rofrischmann/inline-style-prefixer/issues/159\n case 'backgroundClip': {\n if (value === 'text') {\n return [\n ['backgroundClip', value],\n ['WebkitBackgroundClip', value],\n ]\n }\n break\n }\n\n case 'textAlignVertical': {\n return [['verticalAlign', value === 'center' ? 'middle' : value]]\n }\n\n case 'textDecorationLine': {\n return [['textDecorationLine', value]]\n }\n\n case 'transform': {\n if (Array.isArray(value)) {\n return [[key, value.map(mapTransform).join(' ')]]\n }\n break\n }\n\n case 'writingDirection': {\n return [['direction', value]]\n }\n }\n\n const longKey = STYLE_SHORT_FORM_EXPANSIONS[key]\n if (longKey) {\n return longKey.map((key) => {\n return [key, value]\n })\n } else {\n if (isWeb && Array.isArray(value)) {\n return [[key, value.join(',')]]\n }\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\nconst colorProps = {\n backgroundColor: true,\n borderColor: true,\n borderTopColor: true,\n borderRightColor: true,\n borderBottomColor: true,\n borderLeftColor: true,\n color: true,\n shadowColor: true,\n textDecorationColor: true,\n textShadowColor: true,\n}\n\nfunction normalizeValueWithProperty(value: any, property?: string): any {\n if (process.env.TAMAGUI_TARGET === 'web') {\n const shouldCoerceToPx =\n typeof value === 'number' &&\n (property === undefined || property === null || !unitlessNumbers[property])\n if (shouldCoerceToPx) {\n return `${value}px`\n }\n }\n if (property && colorProps[property]) {\n return normalizeColor(value)\n }\n return value\n}\n\nconst normalizeColor = (color?: number | string, opacity = 1): void | string => {\n if (color == null || color == undefined) {\n return\n }\n if (process.env.TAMAGUI_TARGET === 'web') {\n if (typeof color === 'string' && isWebColor(color)) {\n return color\n }\n }\n const colorInt = processColor(color)\n if (colorInt != null) {\n const r = (colorInt >> 16) & 255\n const g = (colorInt >> 8) & 255\n const b = colorInt & 255\n const a = ((colorInt >> 24) & 255) / 255\n const alpha = (a * opacity).toFixed(2)\n return `rgba(${r},${g},${b},${alpha})`\n }\n return `${color}`\n}\n\nconst webColors = {\n currentColor: true,\n currentcolor: true,\n transparent: true,\n inherit: true,\n}\n\nconst isWebColor = (color: string): boolean => webColors[color] || color.indexOf('var(') === 0\n\nconst processColor = (color?: number | string): number | undefined | null => {\n if (color === undefined || color === null) {\n return color\n }\n let intColor = normalizeCSSColor(color)\n if (intColor === undefined || intColor === null) {\n return undefined\n }\n return ((+intColor << 24) | (+intColor >>> 8)) >>> 0\n}\n\nconst unitlessNumbers = {\n animationIterationCount: true,\n aspectRatio: true,\n borderImageOutset: true,\n borderImageSlice: true,\n borderImageWidth: true,\n boxFlex: true,\n boxFleGroup: true,\n boxOrdinalGroup: true,\n columnCount: true,\n flex: true,\n flexGrow: true,\n flexOrder: true,\n flexPositive: true,\n flexShrink: true,\n flexNegative: true,\n fontWeight: true,\n gridRow: true,\n gridRowEnd: true,\n gridRowGap: true,\n gridRowStart: true,\n gridColumn: true,\n gridColumnEnd: true,\n gridColumnGap: true,\n gridColumnStart: true,\n lineClamp: true,\n opacity: true,\n order: true,\n orphans: true,\n tabSize: true,\n widows: true,\n zIndex: true,\n zoom: true,\n fillOpacity: true,\n floodOpacity: true,\n stopOpacity: true,\n strokeDasharray: true,\n strokeDashoffset: true,\n strokeMiterlimit: true,\n strokeOpacity: true,\n strokeWidth: true,\n scale: true,\n scaleX: true,\n scaleY: true,\n scaleZ: true,\n shadowOpacity: true,\n}\n\nconst defaultOffset = { height: 0, width: 0 }\n\nconst STYLE_SHORT_FORM_EXPANSIONS = {\n borderColor: ['borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor'],\n borderRadius: [\n 'borderTopLeftRadius',\n 'borderTopRightRadius',\n 'borderBottomRightRadius',\n 'borderBottomLeftRadius',\n ],\n borderStyle: ['borderTopStyle', 'borderRightStyle', 'borderBottomStyle', 'borderLeftStyle'],\n borderWidth: ['borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth'],\n margin: ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'],\n marginHorizontal: ['marginRight', 'marginLeft'],\n marginVertical: ['marginTop', 'marginBottom'],\n overscrollBehavior: ['overscrollBehaviorX', 'overscrollBehaviorY'],\n padding: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],\n paddingHorizontal: ['paddingRight', 'paddingLeft'],\n paddingVertical: ['paddingTop', 'paddingBottom'],\n ...(isWeb && {\n // react-native doesn't support X / Y\n overflow: ['overflowX', 'overflowY'],\n }),\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,12 +3,11 @@ const getSize = (size, shift = 0, bounds = [0]) => {
|
|
|
3
3
|
return stepTokenUpOrDown(getTokens().size, size, shift, bounds);
|
|
4
4
|
};
|
|
5
5
|
const stepTokenUpOrDown = (tokens, current, shift = 0, bounds = [0]) => {
|
|
6
|
-
var _a, _b;
|
|
7
6
|
const sizeNames = Object.keys(tokens);
|
|
8
7
|
const currentKeyNum = (typeof current === "string" ? current.replace("$", "") : current) || "4";
|
|
9
8
|
const nextKeyName = `$${+currentKeyNum + shift}`;
|
|
10
|
-
const min =
|
|
11
|
-
const max =
|
|
9
|
+
const min = bounds[0] ?? 0;
|
|
10
|
+
const max = bounds[1] ?? sizeNames.length - 1;
|
|
12
11
|
const index = Math.min(max, Math.max(min, sizeNames.indexOf(nextKeyName)));
|
|
13
12
|
const key = sizeNames[index];
|
|
14
13
|
return tokens[key] || tokens["$4"];
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/getSize.ts"],
|
|
4
4
|
"sourcesContent": ["import { getTokens } from '../conf'\nimport { SizeTokens, SpaceTokens } from '../types'\n\nexport const getSize = (size?: SizeTokens | undefined, shift = 0, bounds = [0]) => {\n return stepTokenUpOrDown(getTokens().size, size, shift, bounds)\n}\n\nexport const stepTokenUpOrDown = (\n tokens: Object,\n current?: SizeTokens | SpaceTokens | string,\n shift = 0,\n bounds = [0]\n) => {\n const sizeNames = Object.keys(tokens)\n const currentKeyNum = (typeof current === 'string' ? current.replace('$', '') : current) || '4'\n const nextKeyName = `$${+currentKeyNum + shift}`\n const min = bounds[0] ?? 0\n const max = bounds[1] ?? sizeNames.length - 1\n const index = Math.min(max, Math.max(min, sizeNames.indexOf(nextKeyName)))\n const key = sizeNames[index]\n return tokens[key] || tokens['$4']\n}\n"],
|
|
5
|
-
"mappings": "AAAA;AAGO,MAAM,UAAU,CAAC,MAA+B,QAAQ,GAAG,SAAS,CAAC,CAAC,MAAM;AACjF,SAAO,kBAAkB,UAAU,EAAE,MAAM,MAAM,OAAO,MAAM;AAChE;AAEO,MAAM,oBAAoB,CAC/B,QACA,SACA,QAAQ,GACR,SAAS,CAAC,CAAC,MACR;
|
|
5
|
+
"mappings": "AAAA;AAGO,MAAM,UAAU,CAAC,MAA+B,QAAQ,GAAG,SAAS,CAAC,CAAC,MAAM;AACjF,SAAO,kBAAkB,UAAU,EAAE,MAAM,MAAM,OAAO,MAAM;AAChE;AAEO,MAAM,oBAAoB,CAC/B,QACA,SACA,QAAQ,GACR,SAAS,CAAC,CAAC,MACR;AACH,QAAM,YAAY,OAAO,KAAK,MAAM;AACpC,QAAM,gBAAiB,QAAO,YAAY,WAAW,QAAQ,QAAQ,KAAK,EAAE,IAAI,YAAY;AAC5F,QAAM,cAAc,IAAI,CAAC,gBAAgB;AACzC,QAAM,MAAM,OAAO,MAAM;AACzB,QAAM,MAAM,OAAO,MAAM,UAAU,SAAS;AAC5C,QAAM,QAAQ,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,UAAU,QAAQ,WAAW,CAAC,CAAC;AACzE,QAAM,MAAM,UAAU;AACtB,SAAO,OAAO,QAAQ,OAAO;AAC/B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,3 +1,19 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
+
var __spreadValues = (a, b) => {
|
|
7
|
+
for (var prop in b || (b = {}))
|
|
8
|
+
if (__hasOwnProp.call(b, prop))
|
|
9
|
+
__defNormalProp(a, prop, b[prop]);
|
|
10
|
+
if (__getOwnPropSymbols)
|
|
11
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
+
if (__propIsEnum.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
}
|
|
15
|
+
return a;
|
|
16
|
+
};
|
|
1
17
|
import { stylePropsText, stylePropsTransform, validPseudoKeys, validStyles } from "@tamagui/helpers";
|
|
2
18
|
import { useInsertionEffect } from "react";
|
|
3
19
|
import { getConfig } from "../conf";
|
|
@@ -5,7 +21,7 @@ import { isClient, isWeb, useIsomorphicLayoutEffect } from "../constants/platfor
|
|
|
5
21
|
import { mediaQueryConfig, mediaState } from "../hooks/useMedia";
|
|
6
22
|
import { createMediaStyle } from "./createMediaStyle";
|
|
7
23
|
import { fixNativeShadow } from "./fixNativeShadow";
|
|
8
|
-
import { getStylesAtomic } from "./getStylesAtomic";
|
|
24
|
+
import { getAtomicStyle, getStylesAtomic } from "./getStylesAtomic";
|
|
9
25
|
import {
|
|
10
26
|
insertStyleRule,
|
|
11
27
|
insertedTransforms,
|
|
@@ -13,26 +29,25 @@ import {
|
|
|
13
29
|
updateInsertedCache
|
|
14
30
|
} from "./insertStyleRule";
|
|
15
31
|
import { mergeTransform } from "./mergeTransform";
|
|
16
|
-
import {
|
|
17
|
-
const skipProps = {
|
|
32
|
+
import { pseudoDescriptors as pseudoAttrs, pseudoDescriptors } from "./pseudoDescriptors";
|
|
33
|
+
const skipProps = __spreadValues({
|
|
18
34
|
animation: true,
|
|
19
35
|
animateOnly: true,
|
|
20
36
|
debug: true,
|
|
21
|
-
componentName: true
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
};
|
|
37
|
+
componentName: true
|
|
38
|
+
}, !isWeb && {
|
|
39
|
+
tag: true,
|
|
40
|
+
whiteSpace: true,
|
|
41
|
+
wordWrap: true,
|
|
42
|
+
textOverflow: true,
|
|
43
|
+
textDecorationDistance: true,
|
|
44
|
+
userSelect: true,
|
|
45
|
+
selectable: true,
|
|
46
|
+
cursor: true,
|
|
47
|
+
contain: true,
|
|
48
|
+
boxSizing: true,
|
|
49
|
+
boxShadow: true
|
|
50
|
+
});
|
|
36
51
|
let conf;
|
|
37
52
|
const pseudoCNInverse = {
|
|
38
53
|
hover: "hoverStyle",
|
|
@@ -53,10 +68,12 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, de
|
|
|
53
68
|
}
|
|
54
69
|
let classNames = {};
|
|
55
70
|
let transforms = null;
|
|
56
|
-
|
|
71
|
+
let rulesToInsert = null;
|
|
57
72
|
function addStyle(prop, rule) {
|
|
58
|
-
|
|
59
|
-
|
|
73
|
+
if (updateInsertedCache(prop, rule)) {
|
|
74
|
+
rulesToInsert = rulesToInsert || [];
|
|
75
|
+
rulesToInsert.push([prop, rule]);
|
|
76
|
+
}
|
|
60
77
|
}
|
|
61
78
|
function mergeClassName(key, val, isMediaOrPseudo = false) {
|
|
62
79
|
if (!val)
|
|
@@ -130,9 +147,8 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, de
|
|
|
130
147
|
}
|
|
131
148
|
if (keyInit === "className") {
|
|
132
149
|
let nonTamaguis = "";
|
|
133
|
-
if (!valInit)
|
|
150
|
+
if (!valInit)
|
|
134
151
|
continue;
|
|
135
|
-
}
|
|
136
152
|
for (const cn of valInit.split(" ")) {
|
|
137
153
|
if (cn[0] === "_") {
|
|
138
154
|
const [shorthand, mediaOrPseudo] = cn.slice(1).split("-");
|
|
@@ -211,7 +227,7 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, de
|
|
|
211
227
|
pseudos[key] = pseudos[key] || {};
|
|
212
228
|
pseudos[key] = getSubStyle(val, staticConfig, theme, props, state, true);
|
|
213
229
|
if (shouldDoClasses) {
|
|
214
|
-
const pseudoStyles =
|
|
230
|
+
const pseudoStyles = getAtomicStyle(pseudos[key], pseudoDescriptors[key]);
|
|
215
231
|
for (const style2 of pseudoStyles) {
|
|
216
232
|
const postfix = ((_b = pseudoAttrs[key]) == null ? void 0 : _b.name) || key;
|
|
217
233
|
const fullKey = `${style2.property}_${postfix}`;
|
|
@@ -283,10 +299,7 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, de
|
|
|
283
299
|
}
|
|
284
300
|
}
|
|
285
301
|
if (defaultClassNames) {
|
|
286
|
-
classNames = {
|
|
287
|
-
...defaultClassNames,
|
|
288
|
-
...classNames
|
|
289
|
-
};
|
|
302
|
+
classNames = __spreadValues(__spreadValues({}, defaultClassNames), classNames);
|
|
290
303
|
}
|
|
291
304
|
if (shouldDoClasses) {
|
|
292
305
|
const atomic = getStylesAtomic(style);
|
|
@@ -333,8 +346,10 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, de
|
|
|
333
346
|
};
|
|
334
347
|
const insertSplitStyles = (...args) => {
|
|
335
348
|
const res = getSplitStyles(...args);
|
|
336
|
-
|
|
337
|
-
|
|
349
|
+
if (res.rulesToInsert) {
|
|
350
|
+
for (const [prop, rule] of res.rulesToInsert) {
|
|
351
|
+
insertStyleRule(prop, rule);
|
|
352
|
+
}
|
|
338
353
|
}
|
|
339
354
|
return res;
|
|
340
355
|
};
|
|
@@ -342,6 +357,8 @@ const effect = isWeb ? useInsertionEffect || useIsomorphicLayoutEffect : useIsom
|
|
|
342
357
|
const useSplitStyles = (...args) => {
|
|
343
358
|
const res = getSplitStyles(...args);
|
|
344
359
|
effect(() => {
|
|
360
|
+
if (!res.rulesToInsert)
|
|
361
|
+
return;
|
|
345
362
|
for (const [prop, rule] of res.rulesToInsert) {
|
|
346
363
|
insertStyleRule(prop, rule);
|
|
347
364
|
}
|
|
@@ -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'\n// @ts-ignore\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 { fixNativeShadow } from './fixNativeShadow'\nimport { getStylesAtomic } from './getStylesAtomic'\nimport {\n insertStyleRule,\n insertedTransforms,\n updateInserted,\n updateInsertedCache,\n} from './insertStyleRule'\nimport { mergeTransform } from './mergeTransform'\nimport { pseudos as pseudoAttrs } from './pseudos'\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 keepVariantsAsProps?: boolean\n hasTextAncestor?: boolean\n },\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][]\n viewProps: StackProps\n}\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 const rulesToInsert: [string, string][] = []\n function addStyle(prop: string, rule: string) {\n rulesToInsert.push([prop, rule])\n updateInsertedCache(prop, rule)\n }\n\n function mergeClassName(key: string, val: string, isMediaOrPseudo = false) {\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, error', { 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 const propKeys = Object.keys(props)\n const shouldDoClasses = isWeb && !state.noClassNames\n\n if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n console.log('propKeys', propKeys)\n }\n\n for (let i = propKeys.length - 1; i >= 0; i--) {\n const keyInit = propKeys[i]\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 (keyInit === 'className') {\n let nonTamaguis = ''\n if (!valInit) {\n continue\n }\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 += `_${mediaShortKey}`\n } else if (isPseudo) {\n // is pseudo\n const pseudoShortKey = mediaOrPseudo.slice(1)\n fullKey += `_${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 // not the strongest check for now we can make better..\n if (valInit && valInit[0] === '_') {\n usedKeys.add(keyInit)\n mergeClassName(keyInit, valInit)\n continue\n }\n\n if (\n state.keepVariantsAsProps &&\n staticConfig.defaultVariants &&\n keyInit in staticConfig.defaultVariants\n ) {\n viewProps[keyInit] = valInit\n }\n\n let isMedia = keyInit[0] === '$'\n let isPseudo = validPseudoKeys[keyInit]\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 let isMediaOrPseudo = isMedia || isPseudo\n\n if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n console.log(' \u00BB getSplitStyles', keyInit, expanded)\n }\n\n if (!expanded) {\n continue\n }\n\n for (const [key, val] of expanded) {\n if (val === undefined) continue\n\n if (key !== 'target' && val && val[0] === '_') {\n usedKeys.add(key)\n mergeClassName(key, val, isMediaOrPseudo)\n continue\n }\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 ) {\n usedKeys.add(key)\n viewProps[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, true)\n if (shouldDoClasses) {\n const pseudoStyles = getStylesAtomic({ [key]: pseudos[key] })\n for (const style of pseudoStyles) {\n const postfix = pseudoAttrs[key]?.name || key // exitStyle/enterStyle dont have pseudoAttrs\n const fullKey = `${style.property}_${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)\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}_${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] = val\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 // 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 (transforms) {\n for (const namespace in transforms) {\n if (!transforms[namespace]) {\n console.warn('Error no transform')\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 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 insertSplitStyles: StyleSplitter = (...args) => {\n const res = getSplitStyles(...args)\n for (const [prop, rule] of res.rulesToInsert) {\n insertStyleRule(prop, rule)\n }\n return res\n}\n\nconst effect = isWeb ? useInsertionEffect || useIsomorphicLayoutEffect : useIsomorphicLayoutEffect\n\nexport const useSplitStyles: StyleSplitter = (...args) => {\n const res = getSplitStyles(...args)\n effect(() => {\n for (const [prop, rule] of res.rulesToInsert) {\n insertStyleRule(prop, rule)\n }\n })\n return res\n}\n\nexport const getSubStyle = (\n styleIn: Object,\n staticConfig: StaticConfigParsed,\n theme: ThemeObject,\n props: any,\n state: SplitStyleState,\n avoidDefaultProps?: boolean\n): ViewStyle => {\n const styleOut: ViewStyle = {}\n for (const key in styleIn) {\n const val = styleIn[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] = sval\n }\n }\n }\n return styleOut\n}\n\nexport function normalizeStyleObject(style: any) {\n if (!isWeb) {\n fixNativeShadow(style)\n }\n}\n"],
|
|
5
|
-
"mappings": "AAAA;AAEA;AAGA;AACA;AACA;AAaA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AAMA,MAAM,YAAY;AAAA,EAChB,WAAW;AAAA,EACX,aAAa;AAAA,EACb,OAAO;AAAA,EACP,eAAe;AAAA,
|
|
4
|
+
"sourcesContent": ["import { stylePropsText, stylePropsTransform, validPseudoKeys, validStyles } from '@tamagui/helpers'\n// @ts-ignore\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 { fixNativeShadow } from './fixNativeShadow'\nimport { getAtomicStyle, getStylesAtomic } from './getStylesAtomic'\nimport {\n insertStyleRule,\n insertedTransforms,\n updateInserted,\n updateInsertedCache,\n} from './insertStyleRule'\nimport { mergeTransform } from './mergeTransform'\nimport { pseudoDescriptors as pseudoAttrs, 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 keepVariantsAsProps?: boolean\n hasTextAncestor?: boolean\n },\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\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 (updateInsertedCache(prop, rule)) {\n rulesToInsert = rulesToInsert || []\n rulesToInsert.push([prop, rule])\n }\n }\n\n function mergeClassName(key: string, val: string, isMediaOrPseudo = false) {\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, error', { 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 const propKeys = Object.keys(props)\n const shouldDoClasses = isWeb && !state.noClassNames\n\n if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n console.log('propKeys', propKeys)\n }\n\n for (let i = propKeys.length - 1; i >= 0; i--) {\n const keyInit = propKeys[i]\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 (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 += `_${mediaShortKey}`\n } else if (isPseudo) {\n // is pseudo\n const pseudoShortKey = mediaOrPseudo.slice(1)\n fullKey += `_${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 // not the strongest check for now we can make better..\n if (valInit && valInit[0] === '_') {\n usedKeys.add(keyInit)\n mergeClassName(keyInit, valInit)\n continue\n }\n\n if (\n state.keepVariantsAsProps &&\n staticConfig.defaultVariants &&\n keyInit in staticConfig.defaultVariants\n ) {\n viewProps[keyInit] = valInit\n }\n\n let isMedia = keyInit[0] === '$'\n let isPseudo = validPseudoKeys[keyInit]\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 let isMediaOrPseudo = isMedia || isPseudo\n\n if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n console.log(' \u00BB getSplitStyles', keyInit, expanded)\n }\n\n if (!expanded) {\n continue\n }\n\n for (const [key, val] of expanded) {\n if (val === undefined) continue\n\n if (key !== 'target' && val && val[0] === '_') {\n usedKeys.add(key)\n mergeClassName(key, val, isMediaOrPseudo)\n continue\n }\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 ) {\n usedKeys.add(key)\n viewProps[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, true)\n if (shouldDoClasses) {\n const pseudoStyles = getAtomicStyle(pseudos[key], pseudoDescriptors[key])\n for (const style of pseudoStyles) {\n const postfix = pseudoAttrs[key]?.name || key // exitStyle/enterStyle dont have pseudoAttrs\n const fullKey = `${style.property}_${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)\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}_${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] = val\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 // 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 (transforms) {\n for (const namespace in transforms) {\n if (!transforms[namespace]) {\n console.warn('Error no transform')\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 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 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\nconst effect = isWeb ? useInsertionEffect || useIsomorphicLayoutEffect : useIsomorphicLayoutEffect\n\nexport const useSplitStyles: StyleSplitter = (...args) => {\n const res = getSplitStyles(...args)\n effect(() => {\n if (!res.rulesToInsert) return\n for (const [prop, rule] of res.rulesToInsert) {\n insertStyleRule(prop, rule)\n }\n })\n return res\n}\n\nexport const getSubStyle = (\n styleIn: Object,\n staticConfig: StaticConfigParsed,\n theme: ThemeObject,\n props: any,\n state: SplitStyleState,\n avoidDefaultProps?: boolean\n): ViewStyle => {\n const styleOut: ViewStyle = {}\n for (const key in styleIn) {\n const val = styleIn[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] = sval\n }\n }\n }\n return styleOut\n}\n\nexport function normalizeStyleObject(style: any) {\n if (!isWeb) {\n fixNativeShadow(style)\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { getSize, stepTokenUpOrDown } from "./getSize";
|
|
2
2
|
const getButtonSize = (val, { tokens }) => {
|
|
3
|
-
var _a;
|
|
4
3
|
const ySize = getSize(val, 0);
|
|
5
4
|
const xSize = stepTokenUpOrDown(tokens.space, val);
|
|
6
|
-
const radiusToken =
|
|
5
|
+
const radiusToken = tokens.radius[val] ?? tokens.radius["$4"];
|
|
7
6
|
return {
|
|
8
7
|
paddingHorizontal: xSize,
|
|
9
8
|
height: ySize,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/getStackSize.ts"],
|
|
4
4
|
"sourcesContent": ["import { SizeTokens, VariantSpreadExtras } from '../types'\nimport { getSize, stepTokenUpOrDown } from './getSize'\n\nexport type ScaleVariantExtras = Pick<VariantSpreadExtras<any>, 'tokens' | 'props' | 'fonts'>\n\nexport const getButtonSize = (val: SizeTokens, { tokens }: VariantSpreadExtras<any>) => {\n const ySize = getSize(val, 0)\n const xSize = stepTokenUpOrDown(tokens.space, val)\n const radiusToken = tokens.radius[val] ?? tokens.radius['$4']\n return {\n paddingHorizontal: xSize,\n height: ySize,\n borderRadius: radiusToken,\n }\n}\n"],
|
|
5
|
-
"mappings": "AACA;AAIO,MAAM,gBAAgB,CAAC,KAAiB,EAAE,aAAuC;
|
|
5
|
+
"mappings": "AACA;AAIO,MAAM,gBAAgB,CAAC,KAAiB,EAAE,aAAuC;AACtF,QAAM,QAAQ,QAAQ,KAAK,CAAC;AAC5B,QAAM,QAAQ,kBAAkB,OAAO,OAAO,GAAG;AACjD,QAAM,cAAc,OAAO,OAAO,QAAQ,OAAO,OAAO;AACxD,SAAO;AAAA,IACL,mBAAmB;AAAA,IACnB,QAAQ;AAAA,IACR,cAAc;AAAA,EAChB;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,14 +1,45 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __objRest = (source, exclude) => {
|
|
21
|
+
var target = {};
|
|
22
|
+
for (var prop in source)
|
|
23
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
+
target[prop] = source[prop];
|
|
25
|
+
if (source != null && __getOwnPropSymbols)
|
|
26
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
};
|
|
1
32
|
import { stylePropsTransform } from "@tamagui/helpers";
|
|
2
33
|
import { isVariable } from "../createVariable";
|
|
3
34
|
import { generateAtomicStyles } from "./generateAtomicStyles";
|
|
4
35
|
import { invertMapTransformKeys, mergeTransform } from "./mergeTransform";
|
|
5
|
-
import {
|
|
6
|
-
const pseudosOrdered = Object.values(
|
|
36
|
+
import { pseudoDescriptors } from "./pseudoDescriptors";
|
|
37
|
+
const pseudosOrdered = Object.values(pseudoDescriptors);
|
|
7
38
|
function getStylesAtomic(stylesIn, options) {
|
|
8
39
|
if (!stylesIn.hoverStyle && !stylesIn.pressStyle && !stylesIn.focusStyle) {
|
|
9
40
|
return getAtomicStyle(stylesIn, void 0, options);
|
|
10
41
|
}
|
|
11
|
-
const { hoverStyle, pressStyle, focusStyle,
|
|
42
|
+
const _a = stylesIn, { hoverStyle, pressStyle, focusStyle } = _a, base = __objRest(_a, ["hoverStyle", "pressStyle", "focusStyle"]);
|
|
12
43
|
let res = [];
|
|
13
44
|
for (const [index, style] of [hoverStyle, pressStyle, focusStyle, base].entries()) {
|
|
14
45
|
if (!style || !Object.keys(style).length) {
|
|
@@ -42,21 +73,21 @@ function getAtomicStyle(style, pseudo, options) {
|
|
|
42
73
|
}
|
|
43
74
|
if (options && options.splitTransforms && style.transform) {
|
|
44
75
|
let atomicStyles = [];
|
|
45
|
-
let { transform,
|
|
76
|
+
let _a = style, { transform } = _a, rest = __objRest(_a, ["transform"]);
|
|
46
77
|
for (const t of transform) {
|
|
47
78
|
const tKey = Object.keys(t)[0];
|
|
48
79
|
const transformProperty = invertMapTransformKeys[tKey] || tKey;
|
|
49
80
|
const out = generateAtomicStyles({ transform: [t] }, pseudo)[0];
|
|
50
|
-
atomicStyles.push({
|
|
51
|
-
...out,
|
|
81
|
+
atomicStyles.push(__spreadProps(__spreadValues({}, out), {
|
|
52
82
|
property: transformProperty
|
|
53
|
-
});
|
|
83
|
+
}));
|
|
54
84
|
}
|
|
55
85
|
return [...atomicStyles, ...generateAtomicStyles(rest, pseudo)];
|
|
56
86
|
}
|
|
57
87
|
return generateAtomicStyles(style, pseudo);
|
|
58
88
|
}
|
|
59
89
|
export {
|
|
90
|
+
getAtomicStyle,
|
|
60
91
|
getStylesAtomic
|
|
61
92
|
};
|
|
62
93
|
//# sourceMappingURL=getStylesAtomic.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/getStylesAtomic.ts"],
|
|
4
|
-
"sourcesContent": ["import { StyleObject, stylePropsTransform } from '@tamagui/helpers'\nimport { ViewStyle } from 'react-native'\n\nimport { isVariable } from '../createVariable'\nimport { generateAtomicStyles } from './generateAtomicStyles'\nimport { invertMapTransformKeys, mergeTransform } from './mergeTransform'\nimport { PseudoDescriptor,
|
|
5
|
-
"mappings": "AAAA;AAGA;AACA;AACA;AACA;AAeA,MAAM,iBAAiB,OAAO,OAAO,
|
|
4
|
+
"sourcesContent": ["import { StyleObject, stylePropsTransform } from '@tamagui/helpers'\nimport { ViewStyle } from 'react-native'\n\nimport { isVariable } from '../createVariable'\nimport { generateAtomicStyles } from './generateAtomicStyles'\nimport { invertMapTransformKeys, mergeTransform } from './mergeTransform'\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\ntype AtomicStyleOptions = {\n // StyleObject.propererty will be original transform key, so extractor can keep prop/spread logic\n splitTransforms?: boolean\n}\n\nconst pseudosOrdered = Object.values(pseudoDescriptors)\n\nexport function getStylesAtomic(stylesIn: ViewStyleWithPseudos, options?: AtomicStyleOptions) {\n // performance optimization\n if (!stylesIn.hoverStyle && !stylesIn.pressStyle && !stylesIn.focusStyle) {\n return getAtomicStyle(stylesIn, undefined, options)\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 || !Object.keys(style).length) {\n continue\n }\n const pseudo = pseudosOrdered[index]\n for (const skey in style) {\n const val = style[skey]\n if (isVariable(val)) {\n style[skey] = val.toString()\n }\n if (stylePropsTransform[skey]) {\n delete style[skey]\n mergeTransform(style, skey, val)\n }\n }\n res = [...res, ...getAtomicStyle(style, pseudo, options)]\n }\n return res\n}\n\nexport function getAtomicStyle(\n style: ViewStyle,\n pseudo?: PseudoDescriptor,\n options?: AtomicStyleOptions\n): 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 if (options && options.splitTransforms && style.transform) {\n let atomicStyles: StyleObject[] = []\n let { transform, ...rest } = style\n for (const t of transform) {\n const tKey = Object.keys(t)[0]\n const transformProperty = invertMapTransformKeys[tKey] || tKey\n const out = generateAtomicStyles({ transform: [t] }, pseudo)[0]\n atomicStyles.push({\n ...out,\n property: transformProperty,\n })\n }\n return [...atomicStyles, ...generateAtomicStyles(rest, pseudo)]\n }\n\n return generateAtomicStyles(style, pseudo)\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAGA;AACA;AACA;AACA;AAeA,MAAM,iBAAiB,OAAO,OAAO,iBAAiB;AAE/C,yBAAyB,UAAgC,SAA8B;AAE5F,MAAI,CAAC,SAAS,cAAc,CAAC,SAAS,cAAc,CAAC,SAAS,YAAY;AACxE,WAAO,eAAe,UAAU,QAAW,OAAO;AAAA,EACpD;AAGA,QAAwD,eAAhD,cAAY,YAAY,eAAwB,IAAT,iBAAS,IAAT,CAAvC,cAAY,cAAY;AAChC,MAAI,MAAqB,CAAC;AAE1B,aAAW,CAAC,OAAO,UAAU,CAAC,YAAY,YAAY,YAAY,IAAI,EAAE,QAAQ,GAAG;AACjF,QAAI,CAAC,SAAS,CAAC,OAAO,KAAK,KAAK,EAAE,QAAQ;AACxC;AAAA,IACF;AACA,UAAM,SAAS,eAAe;AAC9B,eAAW,QAAQ,OAAO;AACxB,YAAM,MAAM,MAAM;AAClB,UAAI,WAAW,GAAG,GAAG;AACnB,cAAM,QAAQ,IAAI,SAAS;AAAA,MAC7B;AACA,UAAI,oBAAoB,OAAO;AAC7B,eAAO,MAAM;AACb,uBAAe,OAAO,MAAM,GAAG;AAAA,MACjC;AAAA,IACF;AACA,UAAM,CAAC,GAAG,KAAK,GAAG,eAAe,OAAO,QAAQ,OAAO,CAAC;AAAA,EAC1D;AACA,SAAO;AACT;AAEO,wBACL,OACA,QACA,SACe;AACf,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,CAAC,SAAS,OAAO,UAAU,UAAU;AACvC,YAAM,IAAI,MAAM,sBAAsB,OAAO,WAAW,OAAO;AAAA,IACjE;AAAA,EACF,OAAO;AACL,QAAI,CAAC,OAAO;AACV,cAAQ,KAAK,eAAe;AAC5B,aAAO,CAAC;AAAA,IACV;AAAA,EACF;AAEA,MAAI,WAAW,QAAQ,mBAAmB,MAAM,WAAW;AACzD,QAAI,eAA8B,CAAC;AACnC,QAA6B,YAAvB,gBAAuB,IAAT,iBAAS,IAAT,CAAd;AACN,eAAW,KAAK,WAAW;AACzB,YAAM,OAAO,OAAO,KAAK,CAAC,EAAE;AAC5B,YAAM,oBAAoB,uBAAuB,SAAS;AAC1D,YAAM,MAAM,qBAAqB,EAAE,WAAW,CAAC,CAAC,EAAE,GAAG,MAAM,EAAE;AAC7D,mBAAa,KAAK,iCACb,MADa;AAAA,QAEhB,UAAU;AAAA,MACZ,EAAC;AAAA,IACH;AACA,WAAO,CAAC,GAAG,cAAc,GAAG,qBAAqB,MAAM,MAAM,CAAC;AAAA,EAChE;AAEA,SAAO,qBAAqB,OAAO,MAAM;AAC3C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -13,14 +13,18 @@ function addTransform(identifier, css, rule) {
|
|
|
13
13
|
console.trace();
|
|
14
14
|
console.groupEnd();
|
|
15
15
|
} else {
|
|
16
|
-
console.
|
|
16
|
+
console.warn(`Missing transform`, identifier, css, rule);
|
|
17
17
|
}
|
|
18
|
-
return;
|
|
18
|
+
return false;
|
|
19
19
|
}
|
|
20
20
|
const startI = s + "transform:".length;
|
|
21
21
|
const endI = css.indexOf(";");
|
|
22
22
|
const value = css.slice(startI, endI);
|
|
23
|
-
insertedTransforms[identifier]
|
|
23
|
+
if (!insertedTransforms[identifier]) {
|
|
24
|
+
insertedTransforms[identifier] = value;
|
|
25
|
+
return true;
|
|
26
|
+
}
|
|
27
|
+
return false;
|
|
24
28
|
}
|
|
25
29
|
const isClient = typeof document !== "undefined";
|
|
26
30
|
let hasInsertedSinceUpdate = true;
|
|
@@ -29,10 +33,8 @@ function updateInserted() {
|
|
|
29
33
|
return;
|
|
30
34
|
if (!isClient)
|
|
31
35
|
return;
|
|
32
|
-
if (!hasInsertedSinceUpdate)
|
|
33
|
-
console.warn("hasnt inserted since");
|
|
36
|
+
if (!hasInsertedSinceUpdate)
|
|
34
37
|
return;
|
|
35
|
-
}
|
|
36
38
|
const sheets = document.styleSheets;
|
|
37
39
|
if (!sheets)
|
|
38
40
|
return;
|
|
@@ -65,12 +67,12 @@ updateInserted();
|
|
|
65
67
|
const sheet = isClient ? document.head.appendChild(document.createElement("style")).sheet : null;
|
|
66
68
|
function updateInsertedCache(identifier, rule) {
|
|
67
69
|
if (insertedSelectors[identifier])
|
|
68
|
-
return;
|
|
70
|
+
return false;
|
|
69
71
|
insertedSelectors[identifier] = rule;
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
addTransform(identifier, rule);
|
|
72
|
+
if (identifier.startsWith("_transform")) {
|
|
73
|
+
return addTransform(identifier, rule);
|
|
73
74
|
}
|
|
75
|
+
return true;
|
|
74
76
|
}
|
|
75
77
|
function insertStyleRule(identifier, rule) {
|
|
76
78
|
if (allSelectors[identifier])
|