react-native-web-internals
Version:
React Native for Web
328 lines (327 loc) • 13.4 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: !0 });
}, __copyProps = (to, from, except, desc) => {
if (from && typeof from == "object" || typeof from == "function")
for (let key of __getOwnPropNames(from))
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
mod
)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
var compiler_exports = {};
__export(compiler_exports, {
atomic: () => atomic,
classic: () => classic,
inline: () => inline,
stringifyValueWithProperty: () => stringifyValueWithProperty
});
module.exports = __toCommonJS(compiler_exports);
var import_simple_hash = require("@tamagui/simple-hash"), import_createReactDOMStyle = __toESM(require("./createReactDOMStyle")), import_hyphenateStyleName = __toESM(require("./hyphenateStyleName")), import_normalizeValueWithProperty = __toESM(require("./normalizeValueWithProperty")), 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 (0, import_createReactDOMStyle.default)(nextStyle, !0);
}
function stringifyValueWithProperty(value, property) {
var normalizedValue = (0, import_normalizeValueWithProperty.default)(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 = (0, import_createReactDOMStyle.default)(style), declarationsString = Object.keys(domStyle).map(function(property) {
var value = domStyle[property], prop = (0, import_hyphenateStyleName.default)(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 = (0, import_simple_hash.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
];
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
atomic,
classic,
inline,
stringifyValueWithProperty
});
//# sourceMappingURL=index.js.map