react-native-web-internals
Version:
React Native for Web
254 lines (253 loc) • 12.6 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"));
const 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) {
const compiledStyle = { $$css: !0 }, compiledRules = [];
function atomicCompile(prop, value) {
const valueString = stringifyValueWithProperty(value, prop), cacheKey = prop + valueString, cachedResult = cache.get(cacheKey);
let identifier;
if (cachedResult != null)
identifier = cachedResult[0], compiledRules.push(cachedResult[1]);
else {
identifier = createIdentifier("r", prop, value);
const order = customGroup[prop] || atomicGroup, orderedRules = [createAtomicRules(identifier, prop, value), order];
compiledRules.push(orderedRules), cache.set(cacheKey, [identifier, orderedRules]);
}
return identifier;
}
return Object.keys(style).sort().forEach((prop) => {
const value = style[prop];
if (value != null) {
let localizeableValue;
if (PROPERTIES_VALUE.indexOf(prop) > -1) {
const left2 = atomicCompile(prop, "left"), right2 = atomicCompile(prop, "right");
value === "start" ? localizeableValue = [left2, right2] : value === "end" && (localizeableValue = [right2, left2]);
}
const propPolyfill = PROPERTIES_I18N[prop];
if (propPolyfill != null) {
const ltr = atomicCompile(propPolyfill, value), rtl = atomicCompile(PROPERTIES_FLIP[propPolyfill], value);
localizeableValue = [ltr, rtl];
}
if (prop === "transitionProperty") {
const values = Array.isArray(value) ? value : [value], polyfillIndices = [];
for (let i = 0; i < values.length; i++) {
const val = values[i];
typeof val == "string" && PROPERTIES_I18N[val] != null && polyfillIndices.push(i);
}
if (polyfillIndices.length > 0) {
const ltrPolyfillValues = [...values], rtlPolyfillValues = [...values];
polyfillIndices.forEach((i) => {
const ltrVal = ltrPolyfillValues[i];
if (typeof ltrVal == "string") {
const ltrPolyfill = PROPERTIES_I18N[ltrVal], rtlPolyfill = PROPERTIES_FLIP[ltrPolyfill];
ltrPolyfillValues[i] = ltrPolyfill, rtlPolyfillValues[i] = rtlPolyfill;
const ltr = atomicCompile(prop, ltrPolyfillValues), rtl = atomicCompile(prop, rtlPolyfillValues);
localizeableValue = [ltr, rtl];
}
});
}
}
localizeableValue == null ? localizeableValue = atomicCompile(prop, value) : compiledStyle.$$css$localize = !0, compiledStyle[prop] = localizeableValue;
}
}), [compiledStyle, compiledRules];
}
function classic(style, name) {
const compiledStyle = { $$css: !0 }, compiledRules = [], { animationKeyframes, ...rest } = style, identifier = createIdentifier("css", name, style), selector = `.${identifier}`;
let animationName;
if (animationKeyframes != null) {
const [animationNames, keyframesRules] = processKeyframesValue(animationKeyframes);
animationName = animationNames.join(","), compiledRules.push(...keyframesRules);
}
const block = createDeclarationBlock({ ...rest, animationName });
return compiledRules.push(`${selector}${block}`), compiledStyle[identifier] = identifier, [compiledStyle, [[compiledRules, classicGroup]]];
}
function inline(originalStyle, isRTL) {
const style = originalStyle || emptyObject, frozenProps = {}, nextStyle = {};
for (const originalProp in style) {
const originalValue = style[originalProp];
let prop = originalProp, value = originalValue;
if (!Object.prototype.hasOwnProperty.call(style, originalProp) || originalValue == null)
continue;
PROPERTIES_VALUE.indexOf(originalProp) > -1 && (originalValue === "start" ? value = isRTL ? "right" : "left" : originalValue === "end" && (value = isRTL ? "left" : "right"));
const propPolyfill = PROPERTIES_I18N[originalProp];
if (propPolyfill != null && (prop = isRTL ? PROPERTIES_FLIP[propPolyfill] : propPolyfill), originalProp === "transitionProperty") {
const originalValues = Array.isArray(originalValue) ? originalValue : [originalValue];
originalValues.forEach((val, i) => {
if (typeof val == "string") {
const valuePolyfill = PROPERTIES_I18N[val];
valuePolyfill != null && (originalValues[i] = isRTL ? PROPERTIES_FLIP[valuePolyfill] : valuePolyfill);
}
});
}
frozenProps[prop] || (nextStyle[prop] = value), PROPERTIES_I18N.hasOwnProperty(originalProp) && (frozenProps[prop] = !0);
}
return (0, import_createReactDOMStyle.default)(nextStyle, !0);
}
function stringifyValueWithProperty(value, property) {
const normalizedValue = (0, import_normalizeValueWithProperty.default)(value, property);
return typeof normalizedValue != "string" ? JSON.stringify(normalizedValue || "") : normalizedValue;
}
function createAtomicRules(identifier, property, value) {
const rules = [], selector = `.${identifier}`;
switch (property) {
case "animationKeyframes": {
const [animationNames, keyframesRules] = processKeyframesValue(value), block = createDeclarationBlock({
animationName: animationNames.join(",")
});
rules.push(`${selector}${block}`, ...keyframesRules);
break;
}
// Equivalent to using '::placeholder'
case "placeholderTextColor": {
const block = createDeclarationBlock({ color: value, opacity: 1 });
rules.push(
`${selector}::-webkit-input-placeholder${block}`,
`${selector}::-moz-placeholder${block}`,
`${selector}:-ms-input-placeholder${block}`,
`${selector}::placeholder${block}`
);
break;
}
// Polyfill for additional 'pointer-events' values
// See d13f78622b233a0afc0c7a200c0a0792c8ca9e58
case "pointerEvents": {
let finalValue = value;
if (value === "auto" || value === "box-only") {
if (finalValue = "auto!important", value === "box-only") {
const block2 = createDeclarationBlock({ pointerEvents: "none" });
rules.push(`${selector}>*${block2}`);
}
} else if ((value === "none" || value === "box-none") && (finalValue = "none!important", value === "box-none")) {
const block2 = createDeclarationBlock({ pointerEvents: "auto" });
rules.push(`${selector}>*${block2}`);
}
const block = createDeclarationBlock({ pointerEvents: finalValue });
rules.push(`${selector}${block}`);
break;
}
// Polyfill for draft spec
// https://drafts.csswg.org/css-scrollbars-1/
case "scrollbarWidth": {
value === "none" && rules.push(`${selector}::-webkit-scrollbar{display:none}`);
const block = createDeclarationBlock({ scrollbarWidth: value });
rules.push(`${selector}${block}`);
break;
}
default: {
const block = createDeclarationBlock({ [property]: value });
rules.push(`${selector}${block}`);
break;
}
}
return rules;
}
function createDeclarationBlock(style) {
const domStyle = (0, import_createReactDOMStyle.default)(style);
return `{${Object.keys(domStyle).map((property) => {
const value = domStyle[property], prop = (0, import_hyphenateStyleName.default)(property);
return Array.isArray(value) ? value.map((v) => `${prop}:${v}`).join(";") : `${prop}:${value}`;
}).sort().join(";")};}`;
}
function createIdentifier(prefix, name, value) {
const hashedString = (0, import_simple_hash.simpleHash)(name + stringifyValueWithProperty(value, name));
return process.env.NODE_ENV !== "production" ? `${prefix}-${name}-${hashedString}` : `${prefix}-${hashedString}`;
}
function createKeyframes(keyframes) {
const prefixes = ["-webkit-", ""], identifier = createIdentifier("r", "animation", keyframes), steps = "{" + Object.keys(keyframes).map((stepName) => {
const rule = keyframes[stepName], block = createDeclarationBlock(rule);
return `${stepName}${block}`;
}).join("") + "}", rules = prefixes.map((prefix) => `@${prefix}keyframes ${identifier}${steps}`);
return [identifier, rules];
}
function processKeyframesValue(keyframesValue) {
if (typeof keyframesValue == "number")
throw new Error(`Invalid CSS keyframes type: ${typeof keyframesValue}`);
const animationNames = [], rules = [];
return (Array.isArray(keyframesValue) ? keyframesValue : [keyframesValue]).forEach((keyframes) => {
if (typeof keyframes == "string")
animationNames.push(keyframes);
else {
const [identifier, keyframesRules] = createKeyframes(keyframes);
animationNames.push(identifier), rules.push(...keyframesRules);
}
}), [animationNames, rules];
}
//# sourceMappingURL=index.js.map