react-native-web-internals
Version:
React Native for Web
299 lines (298 loc) • 11.7 kB
JavaScript
import { simpleHash } from "@tamagui/simple-hash";
import createReactDOMStyle from "./createReactDOMStyle.native.js";
import hyphenateStyleName from "./hyphenateStyleName.native.js";
import normalizeValueWithProperty from "./normalizeValueWithProperty.native.js";
var cache = /* @__PURE__ */new Map(),
emptyObject = {},
classicGroup = 1,
atomicGroup = 2.2,
customGroup = {
borderColor: 2,
borderRadius: 2,
borderStyle: 2,
borderWidth: 2,
display: 2,
flex: 2,
margin: 2,
overflow: 2,
overscrollBehavior: 2,
padding: 2,
marginHorizontal: 2.1,
marginVertical: 2.1,
paddingHorizontal: 2.1,
paddingVertical: 2.1
},
borderTopLeftRadius = "borderTopLeftRadius",
borderTopRightRadius = "borderTopRightRadius",
borderBottomLeftRadius = "borderBottomLeftRadius",
borderBottomRightRadius = "borderBottomRightRadius",
borderLeftColor = "borderLeftColor",
borderLeftStyle = "borderLeftStyle",
borderLeftWidth = "borderLeftWidth",
borderRightColor = "borderRightColor",
borderRightStyle = "borderRightStyle",
borderRightWidth = "borderRightWidth",
right = "right",
marginLeft = "marginLeft",
marginRight = "marginRight",
paddingLeft = "paddingLeft",
paddingRight = "paddingRight",
left = "left",
PROPERTIES_FLIP = {
[borderTopLeftRadius]: borderTopRightRadius,
[borderTopRightRadius]: borderTopLeftRadius,
[borderBottomLeftRadius]: borderBottomRightRadius,
[borderBottomRightRadius]: borderBottomLeftRadius,
[borderLeftColor]: borderRightColor,
[borderLeftStyle]: borderRightStyle,
[borderLeftWidth]: borderRightWidth,
[borderRightColor]: borderLeftColor,
[borderRightStyle]: borderLeftStyle,
[borderRightWidth]: borderLeftWidth,
[left]: right,
[marginLeft]: marginRight,
[marginRight]: marginLeft,
[paddingLeft]: paddingRight,
[paddingRight]: paddingLeft,
[right]: left
},
PROPERTIES_I18N = {
borderTopStartRadius: borderTopLeftRadius,
borderTopEndRadius: borderTopRightRadius,
borderBottomStartRadius: borderBottomLeftRadius,
borderBottomEndRadius: borderBottomRightRadius,
borderStartColor: borderLeftColor,
borderStartStyle: borderLeftStyle,
borderStartWidth: borderLeftWidth,
borderEndColor: borderRightColor,
borderEndStyle: borderRightStyle,
borderEndWidth: borderRightWidth,
end: right,
marginStart: marginLeft,
marginEnd: marginRight,
paddingStart: paddingLeft,
paddingEnd: paddingRight,
start: left
},
PROPERTIES_VALUE = ["clear", "float", "textAlign"];
function atomic(style) {
var compiledStyle = {
$$css: !0
},
compiledRules = [];
function atomicCompile(prop, value) {
var valueString = stringifyValueWithProperty(value, prop),
cacheKey = prop + valueString,
cachedResult = cache.get(cacheKey),
identifier;
if (cachedResult != null) identifier = cachedResult[0], compiledRules.push(cachedResult[1]);else {
identifier = createIdentifier("r", prop, value);
var order = customGroup[prop] || atomicGroup,
rules = createAtomicRules(identifier, prop, value),
orderedRules = [rules, order];
compiledRules.push(orderedRules), cache.set(cacheKey, [identifier, orderedRules]);
}
return identifier;
}
return Object.keys(style).sort().forEach(function (prop) {
var value = style[prop];
if (value != null) {
var localizeableValue;
if (PROPERTIES_VALUE.indexOf(prop) > -1) {
var left2 = atomicCompile(prop, "left"),
right2 = atomicCompile(prop, "right");
value === "start" ? localizeableValue = [left2, right2] : value === "end" && (localizeableValue = [right2, left2]);
}
var propPolyfill = PROPERTIES_I18N[prop];
if (propPolyfill != null) {
var ltr = atomicCompile(propPolyfill, value),
rtl = atomicCompile(PROPERTIES_FLIP[propPolyfill], value);
localizeableValue = [ltr, rtl];
}
if (prop === "transitionProperty") {
for (var values = Array.isArray(value) ? value : [value], polyfillIndices = [], i = 0; i < values.length; i++) {
var val = values[i];
typeof val == "string" && PROPERTIES_I18N[val] != null && polyfillIndices.push(i);
}
if (polyfillIndices.length > 0) {
var ltrPolyfillValues = [...values],
rtlPolyfillValues = [...values];
polyfillIndices.forEach(function (i2) {
var ltrVal = ltrPolyfillValues[i2];
if (typeof ltrVal == "string") {
var ltrPolyfill = PROPERTIES_I18N[ltrVal],
rtlPolyfill = PROPERTIES_FLIP[ltrPolyfill];
ltrPolyfillValues[i2] = ltrPolyfill, rtlPolyfillValues[i2] = rtlPolyfill;
var ltr2 = atomicCompile(prop, ltrPolyfillValues),
rtl2 = atomicCompile(prop, rtlPolyfillValues);
localizeableValue = [ltr2, rtl2];
}
});
}
}
localizeableValue == null ? localizeableValue = atomicCompile(prop, value) : compiledStyle.$$css$localize = !0, compiledStyle[prop] = localizeableValue;
}
}), [compiledStyle, compiledRules];
}
function classic(style, name) {
var compiledStyle = {
$$css: !0
},
compiledRules = [],
{
animationKeyframes,
...rest
} = style,
identifier = createIdentifier("css", name, style),
selector = `.${identifier}`,
animationName;
if (animationKeyframes != null) {
var [animationNames, keyframesRules] = processKeyframesValue(animationKeyframes);
animationName = animationNames.join(","), compiledRules.push(...keyframesRules);
}
var block = createDeclarationBlock({
...rest,
animationName
});
return compiledRules.push(`${selector}${block}`), compiledStyle[identifier] = identifier, [compiledStyle, [[compiledRules, classicGroup]]];
}
function inline(originalStyle, isRTL) {
var _loop = function (originalProp2) {
var originalValue = style[originalProp2],
prop = originalProp2,
value = originalValue;
if (!Object.prototype.hasOwnProperty.call(style, originalProp2) || originalValue == null) return "continue";
PROPERTIES_VALUE.indexOf(originalProp2) > -1 && (originalValue === "start" ? value = isRTL ? "right" : "left" : originalValue === "end" && (value = isRTL ? "left" : "right"));
var propPolyfill = PROPERTIES_I18N[originalProp2];
if (propPolyfill != null && (prop = isRTL ? PROPERTIES_FLIP[propPolyfill] : propPolyfill), originalProp2 === "transitionProperty") {
var originalValues = Array.isArray(originalValue) ? originalValue : [originalValue];
originalValues.forEach(function (val, i) {
if (typeof val == "string") {
var valuePolyfill = PROPERTIES_I18N[val];
valuePolyfill != null && (originalValues[i] = isRTL ? PROPERTIES_FLIP[valuePolyfill] : valuePolyfill);
}
});
}
frozenProps[prop] || (nextStyle[prop] = value), PROPERTIES_I18N.hasOwnProperty(originalProp2) && (frozenProps[prop] = !0);
},
style = originalStyle || emptyObject,
frozenProps = {},
nextStyle = {};
for (var originalProp in style) _loop(originalProp);
return createReactDOMStyle(nextStyle, !0);
}
function stringifyValueWithProperty(value, property) {
var normalizedValue = normalizeValueWithProperty(value, property);
return typeof normalizedValue != "string" ? JSON.stringify(normalizedValue || "") : normalizedValue;
}
function createAtomicRules(identifier, property, value) {
var rules = [],
selector = `.${identifier}`;
switch (property) {
case "animationKeyframes":
{
var [animationNames, keyframesRules] = processKeyframesValue(value),
block = createDeclarationBlock({
animationName: animationNames.join(",")
});
rules.push(`${selector}${block}`, ...keyframesRules);
break;
}
// Equivalent to using '::placeholder'
case "placeholderTextColor":
{
var block1 = createDeclarationBlock({
color: value,
opacity: 1
});
rules.push(`${selector}::-webkit-input-placeholder${block1}`, `${selector}::-moz-placeholder${block1}`, `${selector}:-ms-input-placeholder${block1}`, `${selector}::placeholder${block1}`);
break;
}
// Polyfill for additional 'pointer-events' values
// See d13f78622b233a0afc0c7a200c0a0792c8ca9e58
case "pointerEvents":
{
var finalValue = value;
if (value === "auto" || value === "box-only") {
if (finalValue = "auto!important", value === "box-only") {
var block2 = createDeclarationBlock({
pointerEvents: "none"
});
rules.push(`${selector}>*${block2}`);
}
} else if ((value === "none" || value === "box-none") && (finalValue = "none!important", value === "box-none")) {
var block3 = createDeclarationBlock({
pointerEvents: "auto"
});
rules.push(`${selector}>*${block3}`);
}
var block4 = createDeclarationBlock({
pointerEvents: finalValue
});
rules.push(`${selector}${block4}`);
break;
}
// Polyfill for draft spec
// https://drafts.csswg.org/css-scrollbars-1/
case "scrollbarWidth":
{
value === "none" && rules.push(`${selector}::-webkit-scrollbar{display:none}`);
var block5 = createDeclarationBlock({
scrollbarWidth: value
});
rules.push(`${selector}${block5}`);
break;
}
default:
{
var block6 = createDeclarationBlock({
[property]: value
});
rules.push(`${selector}${block6}`);
break;
}
}
return rules;
}
function createDeclarationBlock(style) {
var domStyle = createReactDOMStyle(style),
declarationsString = Object.keys(domStyle).map(function (property) {
var value = domStyle[property],
prop = hyphenateStyleName(property);
return Array.isArray(value) ? value.map(function (v) {
return `${prop}:${v}`;
}).join(";") : `${prop}:${value}`;
}).sort().join(";");
return `{${declarationsString};}`;
}
function createIdentifier(prefix, name, value) {
var hashedString = simpleHash(name + stringifyValueWithProperty(value, name));
return process.env.NODE_ENV !== "production" ? `${prefix}-${name}-${hashedString}` : `${prefix}-${hashedString}`;
}
function createKeyframes(keyframes) {
var prefixes = ["-webkit-", ""],
identifier = createIdentifier("r", "animation", keyframes),
steps = "{" + Object.keys(keyframes).map(function (stepName) {
var rule = keyframes[stepName],
block = createDeclarationBlock(rule);
return `${stepName}${block}`;
}).join("") + "}",
rules = prefixes.map(function (prefix) {
return `@${prefix}keyframes ${identifier}${steps}`;
});
return [identifier, rules];
}
function processKeyframesValue(keyframesValue) {
if (typeof keyframesValue == "number") throw new Error(`Invalid CSS keyframes type: ${typeof keyframesValue}`);
var animationNames = [],
rules = [],
value = Array.isArray(keyframesValue) ? keyframesValue : [keyframesValue];
return value.forEach(function (keyframes) {
if (typeof keyframes == "string") animationNames.push(keyframes);else {
var [identifier, keyframesRules] = createKeyframes(keyframes);
animationNames.push(identifier), rules.push(...keyframesRules);
}
}), [animationNames, rules];
}
export { atomic, classic, inline, stringifyValueWithProperty };
//# sourceMappingURL=index.native.js.map