twrnc
Version:
simple, expressive API for tailwindcss + react-native
405 lines (404 loc) • 17.3 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const font_size_1 = __importDefault(require("./resolve/font-size"));
const line_height_1 = __importDefault(require("./resolve/line-height"));
const spacing_1 = __importDefault(require("./resolve/spacing"));
const screens_1 = __importDefault(require("./screens"));
const types_1 = require("./types");
const font_family_1 = __importDefault(require("./resolve/font-family"));
const color_1 = require("./resolve/color");
const borders_1 = require("./resolve/borders");
const helpers_1 = require("./helpers");
const inset_1 = require("./resolve/inset");
const flex_1 = require("./resolve/flex");
const width_height_1 = require("./resolve/width-height");
const letter_spacing_1 = require("./resolve/letter-spacing");
const opacity_1 = require("./resolve/opacity");
const shadow_1 = require("./resolve/shadow");
class ClassParser {
constructor(input, config = {}, cache, device, platform) {
var _a, _b, _c, _d, _e, _f;
this.config = config;
this.cache = cache;
this.position = 0;
this.isNull = false;
this.isNegative = false;
this.context = {};
this.context.device = device;
const parts = input.trim().split(`:`);
let prefixes = [];
if (parts.length === 1) {
this.string = input;
}
else {
this.string = (_a = parts.pop()) !== null && _a !== void 0 ? _a : ``;
prefixes = parts;
}
this.char = this.string[0];
const widthBreakpoints = (0, screens_1.default)((_b = this.config.theme) === null || _b === void 0 ? void 0 : _b.screens);
// loop through the prefixes ONE time, extracting useful info
for (const prefix of prefixes) {
if (widthBreakpoints[prefix]) {
const breakpointOrder = (_c = widthBreakpoints[prefix]) === null || _c === void 0 ? void 0 : _c[2];
if (breakpointOrder !== undefined) {
this.order = ((_d = this.order) !== null && _d !== void 0 ? _d : 0) + breakpointOrder;
}
const windowWidth = (_e = device.windowDimensions) === null || _e === void 0 ? void 0 : _e.width;
if (windowWidth) {
const [min, max] = (_f = widthBreakpoints[prefix]) !== null && _f !== void 0 ? _f : [0, 0];
if (windowWidth < min || windowWidth >= max) {
// breakpoint does not match
this.isNull = true;
}
}
else {
this.isNull = true;
}
}
else if ((0, types_1.isPlatform)(prefix)) {
this.isNull = prefix !== platform;
}
else if ((0, types_1.isOrientation)(prefix)) {
if (!device.windowDimensions) {
this.isNull = true;
}
else {
const deviceOrientation = device.windowDimensions.width > device.windowDimensions.height
? `landscape`
: `portrait`;
if (deviceOrientation !== prefix) {
this.isNull = true;
}
else {
this.incrementOrder();
}
}
}
else if (prefix === `retina`) {
if (device.pixelDensity === 2) {
this.incrementOrder();
}
else {
this.isNull = true;
}
}
else if (prefix === `dark`) {
if (device.colorScheme !== `dark`) {
this.isNull = true;
}
else {
this.incrementOrder();
}
}
else if (!this.handlePossibleArbitraryBreakpointPrefix(prefix)) {
this.isNull = true;
}
}
}
parse() {
if (this.isNull) {
return { kind: `null` };
}
// resolve things like ios:hidden, after prefix removed
const cached = this.cache.getIr(this.rest);
if (cached) {
if (this.order !== undefined) {
return { kind: `ordered`, order: this.order, styleIr: cached };
}
return cached;
}
this.parseIsNegative();
const ir = this.parseUtility();
if (!ir) {
return { kind: `null` };
}
if (this.order !== undefined) {
return { kind: `ordered`, order: this.order, styleIr: ir };
}
return ir;
}
parseUtility() {
var _a, _b, _c, _d, _e;
const theme = this.config.theme;
let style = null;
switch (this.char) {
case `m`:
case `p`: {
const match = this.peekSlice(1, 3).match(/^(t|b|r|l|x|y)?-/);
if (match) {
const prop = this.char === `m` ? `margin` : `padding`;
this.advance(((_b = (_a = match[0]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) + 1);
const spacingDirection = (0, helpers_1.getDirection)(match[1]);
const style = (0, spacing_1.default)(prop, spacingDirection, this.rest, this.context, (_c = this.config.theme) === null || _c === void 0 ? void 0 : _c[prop]);
if (style)
return style;
}
}
}
if (this.consumePeeked(`h-`)) {
style = (0, width_height_1.widthHeight)(`height`, this.rest, this.context, theme === null || theme === void 0 ? void 0 : theme.height);
if (style)
return style;
}
if (this.consumePeeked(`w-`)) {
style = (0, width_height_1.widthHeight)(`width`, this.rest, this.context, theme === null || theme === void 0 ? void 0 : theme.width);
if (style)
return style;
}
if (this.consumePeeked(`min-w-`)) {
style = (0, width_height_1.minMaxWidthHeight)(`minWidth`, this.rest, this.context, theme === null || theme === void 0 ? void 0 : theme.minWidth);
if (style)
return style;
}
if (this.consumePeeked(`min-h-`)) {
style = (0, width_height_1.minMaxWidthHeight)(`minHeight`, this.rest, this.context, theme === null || theme === void 0 ? void 0 : theme.minHeight);
if (style)
return style;
}
if (this.consumePeeked(`max-w-`)) {
style = (0, width_height_1.minMaxWidthHeight)(`maxWidth`, this.rest, this.context, theme === null || theme === void 0 ? void 0 : theme.maxWidth);
if (style)
return style;
}
if (this.consumePeeked(`max-h-`)) {
style = (0, width_height_1.minMaxWidthHeight)(`maxHeight`, this.rest, this.context, theme === null || theme === void 0 ? void 0 : theme.maxHeight);
if (style)
return style;
}
if (this.consumePeeked(`leading-`)) {
style = (0, line_height_1.default)(this.rest, theme === null || theme === void 0 ? void 0 : theme.lineHeight);
if (style)
return style;
}
if (this.consumePeeked(`text-`)) {
style = (0, font_size_1.default)(this.rest, theme === null || theme === void 0 ? void 0 : theme.fontSize, this.context);
if (style)
return style;
style = (0, color_1.color)(`text`, this.rest, theme === null || theme === void 0 ? void 0 : theme.textColor);
if (style)
return style;
if (this.consumePeeked(`opacity-`)) {
style = (0, color_1.colorOpacity)(`text`, this.rest);
if (style)
return style;
}
}
if (this.consumePeeked(`font-`)) {
style = (0, font_family_1.default)(this.rest, theme === null || theme === void 0 ? void 0 : theme.fontFamily);
if (style)
return style;
}
if (this.consumePeeked(`aspect-`)) {
if (this.consumePeeked(`ratio-`)) {
(0, helpers_1.warn)(`\`aspect-ratio-{ratio}\` is deprecated, use \`aspect-{ratio}\` instead`);
}
style = (0, helpers_1.getCompleteStyle)(`aspectRatio`, this.rest, { fractions: true });
if (style)
return style;
}
if (this.consumePeeked(`tint-`)) {
style = (0, color_1.color)(`tint`, this.rest, theme === null || theme === void 0 ? void 0 : theme.colors);
if (style)
return style;
}
if (this.consumePeeked(`bg-`)) {
style = (0, color_1.color)(`bg`, this.rest, theme === null || theme === void 0 ? void 0 : theme.backgroundColor);
if (style)
return style;
if (this.consumePeeked(`opacity-`)) {
style = (0, color_1.colorOpacity)(`bg`, this.rest);
if (style)
return style;
}
}
if (this.consumePeeked(`border`)) {
style = (0, borders_1.border)(this.rest, theme);
if (style)
return style;
if (this.consumePeeked(`-opacity-`)) {
style = (0, color_1.colorOpacity)(`border`, this.rest);
if (style)
return style;
}
}
if (this.consumePeeked(`rounded`)) {
style = (0, borders_1.borderRadius)(this.rest, theme === null || theme === void 0 ? void 0 : theme.borderRadius);
if (style)
return style;
}
if (this.consumePeeked(`bottom-`)) {
style = (0, inset_1.inset)(`bottom`, this.rest, this.isNegative, theme === null || theme === void 0 ? void 0 : theme.inset);
if (style)
return style;
}
if (this.consumePeeked(`top-`)) {
style = (0, inset_1.inset)(`top`, this.rest, this.isNegative, theme === null || theme === void 0 ? void 0 : theme.inset);
if (style)
return style;
}
if (this.consumePeeked(`left-`)) {
style = (0, inset_1.inset)(`left`, this.rest, this.isNegative, theme === null || theme === void 0 ? void 0 : theme.inset);
if (style)
return style;
}
if (this.consumePeeked(`right-`)) {
style = (0, inset_1.inset)(`right`, this.rest, this.isNegative, theme === null || theme === void 0 ? void 0 : theme.inset);
if (style)
return style;
}
if (this.consumePeeked(`inset-`)) {
style = (0, inset_1.inset)(`inset`, this.rest, this.isNegative, theme === null || theme === void 0 ? void 0 : theme.inset);
if (style)
return style;
}
if (this.consumePeeked(`flex-`)) {
if (this.consumePeeked(`basis`)) {
style = (0, flex_1.flexBasis)(this.rest, this.context, theme === null || theme === void 0 ? void 0 : theme.flexBasis);
}
else if (this.consumePeeked(`grow`)) {
style = (0, flex_1.flexGrowShrink)(`Grow`, this.rest, theme === null || theme === void 0 ? void 0 : theme.flexGrow);
}
else if (this.consumePeeked(`shrink`)) {
style = (0, flex_1.flexGrowShrink)(`Shrink`, this.rest, theme === null || theme === void 0 ? void 0 : theme.flexShrink);
}
else {
style = (0, flex_1.flex)(this.rest, theme === null || theme === void 0 ? void 0 : theme.flex);
}
if (style)
return style;
}
if (this.consumePeeked(`basis`)) {
style = (0, flex_1.flexBasis)(this.rest, this.context, theme === null || theme === void 0 ? void 0 : theme.flexBasis);
if (style)
return style;
}
if (this.consumePeeked(`grow`)) {
style = (0, flex_1.flexGrowShrink)(`Grow`, this.rest, theme === null || theme === void 0 ? void 0 : theme.flexGrow);
if (style)
return style;
}
if (this.consumePeeked(`shrink`)) {
style = (0, flex_1.flexGrowShrink)(`Shrink`, this.rest, theme === null || theme === void 0 ? void 0 : theme.flexShrink);
if (style)
return style;
}
if (this.consumePeeked(`gap`)) {
style = (0, flex_1.gap)(this.rest, this.context, theme === null || theme === void 0 ? void 0 : theme.gap);
if (style)
return style;
}
if (this.consumePeeked(`shadow-color-opacity-`)) {
style = (0, color_1.colorOpacity)(`shadow`, this.rest);
if (style)
return style;
}
if (this.consumePeeked(`shadow-opacity-`)) {
style = (0, shadow_1.shadowOpacity)(this.rest);
if (style)
return style;
}
if (this.consumePeeked(`shadow-offset-`)) {
style = (0, shadow_1.shadowOffset)(this.rest);
if (style)
return style;
}
if (this.consumePeeked(`shadow-radius-`)) {
style = (0, helpers_1.unconfiggedStyle)(`shadowRadius`, this.rest);
if (style)
return style;
}
if (this.consumePeeked(`shadow-`)) {
style = (0, color_1.color)(`shadow`, this.rest, theme === null || theme === void 0 ? void 0 : theme.colors);
if (style)
return style;
}
if (this.consumePeeked(`elevation-`)) {
const elevation = parseInt(this.rest, 10);
if (!Number.isNaN(elevation)) {
return (0, helpers_1.complete)({ elevation });
}
}
if (this.consumePeeked(`opacity-`)) {
style = (0, opacity_1.opacity)(this.rest, theme === null || theme === void 0 ? void 0 : theme.opacity);
if (style)
return style;
}
if (this.consumePeeked(`tracking-`)) {
style = (0, letter_spacing_1.letterSpacing)(this.rest, this.isNegative, theme === null || theme === void 0 ? void 0 : theme.letterSpacing);
if (style)
return style;
}
if (this.consumePeeked(`z-`)) {
const zIndex = Number((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.zIndex) === null || _d === void 0 ? void 0 : _d[this.rest]) !== null && _e !== void 0 ? _e : this.rest);
if (!Number.isNaN(zIndex)) {
return (0, helpers_1.complete)({ zIndex: this.isNegative ? -zIndex : zIndex });
}
}
(0, helpers_1.warn)(`\`${this.rest}\` unknown or invalid utility`);
return null;
}
handlePossibleArbitraryBreakpointPrefix(prefix) {
var _a;
// save the expense of running the regex with a quick sniff test
if (prefix[0] !== `m`)
return false;
const match = prefix.match(/^(min|max)-(w|h)-\[([^\]]+)\]$/);
if (!match)
return false;
if (!((_a = this.context.device) === null || _a === void 0 ? void 0 : _a.windowDimensions)) {
this.isNull = true;
return true;
}
const windowDims = this.context.device.windowDimensions;
const [, type = ``, dir = ``, amount = ``] = match;
const checkDimension = dir === `w` ? windowDims.width : windowDims.height;
const parsedAmount = (0, helpers_1.parseNumericValue)(amount, this.context);
if (parsedAmount === null) {
this.isNull = true;
return true;
}
const [bound, unit] = parsedAmount;
if (unit !== `px`) {
this.isNull = true;
}
if (type === `min` ? checkDimension >= bound : checkDimension <= bound) {
this.incrementOrder();
}
else {
this.isNull = true;
}
return true;
}
advance(amount = 1) {
this.position += amount;
this.char = this.string[this.position];
}
get rest() {
return this.peekSlice(0, this.string.length);
}
peekSlice(begin, end) {
return this.string.slice(this.position + begin, this.position + end);
}
consumePeeked(string) {
if (this.peekSlice(0, string.length) === string) {
this.advance(string.length);
return true;
}
return false;
}
parseIsNegative() {
if (this.char === `-`) {
this.advance();
this.isNegative = true;
this.context.isNegative = true;
}
}
incrementOrder() {
var _a;
this.order = ((_a = this.order) !== null && _a !== void 0 ? _a : 0) + 1;
}
}
exports.default = ClassParser;