How to use parseCssObject method in Appium Xcuitest Driver

...267 * Convert CSS object to UiAutomator2 selector268 * @param {CssObject} css CSS object269 * @returns {string} The CSS object parsed as a UiSelector270 */271function parseCssObject(css) {272  switch (css.type) {273    case 'rule':274      return parseCssRule(css);275    case 'ruleSet':276      return parseCssObject(css.rule);277    case 'selectors':278      return css.selectors.map((selector) => parseCssObject(selector)).join('; ');279    default:280      // This is never reachable, but if it ever is do this.281      throw new Error(`UiAutomator does not support '${css.type}' css. Only supports 'rule', 'ruleSet', 'selectors' `);282  }283}284/**285 * Convert a CSS selector to a UiAutomator2 selector286 * @param {string} cssSelector CSS Selector287 * @returns {string} The CSS selector converted to a UiSelector288 */289function cssToUiAutomatorSelector(cssSelector) {290  let cssObj;291  try {292    cssObj = parser.parse(cssSelector);293  } catch (e) {294    throw new Error(`Invalid CSS selector '${cssSelector}'. Reason: '${e}'`);295  }296  try {297    return parseCssObject(cssObj);298  } catch (e) {299    throw new Error(`Unsupported CSS selector '${cssSelector}'. Reason: '${e}'`);300  }301}...

...245 * Convert CSS object to iOS Class Chain selector246 * @param {CssObject} css CSS object247 * @returns {string} The CSS object parsed as a UiSelector248 */249function parseCssObject(css) {250  switch (css.type) {251    case 'rule':252      return parseCssRule(css);253    case 'ruleSet':254      return parseCssObject(css.rule);255    case 'selectors':256      return css.selectors.map((selector) => parseCssObject(selector)).join('; ');257    default:258      // This is never reachable, but if it ever is do this.259      throw new Error(260        `iOS Class Chain does not support '${css.type}' css. Only supports 'rule', 'ruleSet', 'selectors'`261      );262  }263}264/**265 * Convert a CSS selector to a iOS Class Chain selector266 * @param {string} cssSelector CSS Selector267 * @returns {string} The CSS selector converted to an iOS Class Chain268 */269function cssToIosClassChainSelector(cssSelector) {270  let cssObj;271  try {272    cssObj = parser.parse(cssSelector);273  } catch (e) {274    throw new errors.InvalidSelectorError(`Invalid CSS selector '${cssSelector}'. Reason: '${e.message}'`);275  }276  try {277    return parseCssObject(cssObj);278  } catch (e) {279    throw new errors.InvalidSelectorError(`Unsupported CSS selector '${cssSelector}'. Reason: '${e.message}'`);280  }281}...

...238  switch (css.type) {239    case 'rule':240      return parseCssRule(css);241    case 'ruleSet':242      return parseCssObject(css.rule);243    case 'selectors':244      return css.selectors.map((selector) => parseCssObject(selector)).join('; ');245    default:246      // This is never reachable, but if it ever is do this.247      throw new Error(`iOS Class Chain does not support '${css.type}' css. Only supports 'rule', 'ruleSet', 'selectors'`);248  }249}250/**251 * Convert a CSS selector to a iOS Class Chain selector252 * @param {string} cssSelector CSS Selector253 * @returns {string} The CSS selector converted to an iOS Class Chain254 */255CssConverter.toIosClassChainSelector = function toIosClassChainSelector (cssSelector) {256  let cssObj;257  try {258    cssObj = parser.parse(cssSelector);259  } catch (e) {260    throw new errors.InvalidSelectorError(`Invalid CSS selector '${cssSelector}'. Reason: '${e.message}'`);261  }262  try {263    return parseCssObject(cssObj);264  } catch (e) {265    throw new errors.InvalidSelectorError(`Unsupported CSS selector '${cssSelector}'. Reason: '${e.message}'`);266  }267};...

1"use strict";2var __importDefault = (this && this.__importDefault) || function (mod) {3    return (mod && mod.__esModule) ? mod : { "default": mod };4};5Object.defineProperty(exports, "__esModule", { value: true });6exports.styleMapToCss = exports.collectCss = exports.collectStyles = exports.parseCssObject = exports.collectStyledComponents = exports.hasStyles = exports.nodeHasStyles = void 0;7var json5_1 = __importDefault(require("json5"));8var lodash_1 = require("lodash");9var traverse_1 = __importDefault(require("traverse"));10var capitalize_1 = require("./capitalize");11var dash_case_1 = require("./dash-case");12var is_mitosis_node_1 = require("./is-mitosis-node");13var is_upper_case_1 = require("./is-upper-case");14var object_hash_1 = __importDefault(require("object-hash"));15var nodeHasStyles = function (node) {16    return Boolean(typeof node.bindings.css === 'string' &&17        node.bindings.css.trim().length > 6);18};19exports.nodeHasStyles = nodeHasStyles;20var hasStyles = function (component) {21    var hasStyles = false;22    (0, traverse_1.default)(component).forEach(function (item) {23        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {24            if ((0, exports.nodeHasStyles)(item)) {25                hasStyles = true;26                this.stop();27            }28        }29    });30    return hasStyles;31};32exports.hasStyles = hasStyles;33var collectStyledComponents = function (json) {34    var styledComponentsCode = '';35    var componentIndexes = {};36    var componentHashes = {};37    (0, traverse_1.default)(json).forEach(function (item) {38        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {39            if ((0, exports.nodeHasStyles)(item)) {40                var value = (0, exports.parseCssObject)(item.bindings.css);41                delete item.bindings.css;42                var normalizedNameProperty = item.properties.$name43                    ? (0, capitalize_1.capitalize)((0, lodash_1.camelCase)(item.properties.$name.replace(/[^a-z]/gi, '')))44                    : null;45                var componentName = normalizedNameProperty46                    ? normalizedNameProperty47                    : /^h\d$/.test(item.name || '')48                        ? item.name49                        : (0, capitalize_1.capitalize)((0, lodash_1.camelCase)(item.name || 'div'));50                var index = (componentIndexes[componentName] =51                    (componentIndexes[componentName] || 0) + 1);52                var className = "".concat(componentName).concat(componentName !== item.name && index === 1 ? '' : index);53                var str = '';54                var styles = getStylesOnly(value);55                var stylesHash = (0, object_hash_1.default)(styles);56                if (stylesHash === componentHashes[componentName]) {57                    return;58                }59                if (!componentHashes[componentName]) {60                    componentHashes[componentName] = stylesHash;61                }62                str += "".concat((0, exports.styleMapToCss)(styles), "\n");63                var nestedSelectors = getNestedSelectors(value);64                for (var nestedSelector in nestedSelectors) {65                    var value_1 = nestedSelectors[nestedSelector];66                    str += "".concat(nestedSelector, " { ").concat((0, exports.styleMapToCss)(value_1), " }");67                }68                var prefix = (0, is_upper_case_1.isUpperCase)(item.name[0])69                    ? "styled(".concat(item.name, ")`")70                    : "styled.".concat(item.name, "`");71                item.name = className;72                styledComponentsCode += "\n          const ".concat(className, " = ").concat(prefix).concat(str, "`\n        ");73            }74            delete item.bindings.css;75        }76    });77    return styledComponentsCode;78};79exports.collectStyledComponents = collectStyledComponents;80var parseCssObject = function (css) {81    try {82        return json5_1.default.parse(css);83    }84    catch (e) {85        console.warn('Could not parse CSS object', css);86        throw e;87    }88};89exports.parseCssObject = parseCssObject;90var collectStyles = function (json, options) {91    if (options === void 0) { options = {}; }92    var styleMap = {};93    var classProperty = options.classProperty || 'class';94    var componentIndexes = {};95    var componentHashes = {};96    (0, traverse_1.default)(json).forEach(function (item) {97        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {98            if ((0, exports.nodeHasStyles)(item)) {99                var value = (0, exports.parseCssObject)(item.bindings.css);100                delete item.bindings.css;101                var componentName = item.properties.$name102                    ? (0, dash_case_1.dashCase)(item.properties.$name)103                    : /^h\d$/.test(item.name || '') // don't dashcase h1 into h-1104                        ? item.name105                        : (0, dash_case_1.dashCase)(item.name || 'div');106                var stylesHash = (0, object_hash_1.default)(value);107                if (componentHashes[componentName] === stylesHash) {108                    var className_1 = "".concat(componentName).concat(options.prefix ? "-".concat(options.prefix) : '');109                    item.properties[classProperty] = "".concat(item.properties[classProperty] || '', " ").concat(className_1)110                        .trim()111                        .replace(/\s{2,}/g, ' ');112                    return;113                }114                if (!componentHashes[componentName]) {115                    componentHashes[componentName] = stylesHash;116                }117                var index = (componentIndexes[componentName] =118                    (componentIndexes[componentName] || 0) + 1);119                var className = "".concat(componentName).concat(options.prefix ? "-".concat(options.prefix) : '').concat(index === 1 ? '' : "-".concat(index));120                item.properties[classProperty] = "".concat(item.properties[classProperty] || '', " ").concat(className)121                    .trim()122                    .replace(/\s{2,}/g, ' ');123                styleMap[className] = value;124            }125            delete item.bindings.css;126        }127    });128    return styleMap;129};130exports.collectStyles = collectStyles;131var collectCss = function (json, options) {132    if (options === void 0) { options = {}; }133    var styles = (0, exports.collectStyles)(json, options);134    // TODO create and use a root selector135    return classStyleMapToCss(styles);136};137exports.collectCss = collectCss;138var getNestedSelectors = function (map) {139    return (0, lodash_1.pickBy)(map, function (value) { return typeof value === 'object'; });140};141var getStylesOnly = function (map) {142    return (0, lodash_1.pickBy)(map, function (value) { return typeof value === 'string'; });143};144var classStyleMapToCss = function (map) {145    var str = '';146    for (var key in map) {147        var styles = getStylesOnly(map[key]);148        str += ".".concat(key, " { ").concat((0, exports.styleMapToCss)(styles), " }");149        var nestedSelectors = getNestedSelectors(map[key]);150        for (var nestedSelector in nestedSelectors) {151            var value = nestedSelectors[nestedSelector];152            if (nestedSelector.startsWith('@')) {153                str += "".concat(nestedSelector, " { .").concat(key, " { ").concat((0, exports.styleMapToCss)(value), " } }");154            }155            else {156                var useSelector = nestedSelector.includes('&')157                    ? nestedSelector.replace(/&/g, ".".concat(key))158                    : ".".concat(key, " ").concat(nestedSelector);159                str += "".concat(useSelector, " { ").concat((0, exports.styleMapToCss)(value), " }");160            }161        }162    }163    return str;164};165var styleMapToCss = function (map) {166    var str = '';167    for (var key in map) {168        var value = map[key];169        if (typeof value === 'string') {170            str += "\n".concat((0, dash_case_1.dashCase)(key), ": ").concat(value, ";");171        }172        else {173            // TODO: do nothing174        }175    }176    return str;177};...

1"use strict";2var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {3    return new (P || (P = Promise))(function (resolve, reject) {4        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }5        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }6        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }7        step((generator = generator.apply(thisArg, _arguments || [])).next());8    });9};10var __importDefault = (this && this.__importDefault) || function (mod) {11    return (mod && mod.__esModule) ? mod : { "default": mod };12};13Object.defineProperty(exports, "__esModule", { value: true });14const css_1 = __importDefault(require("css"));15const loader_utils_1 = __importDefault(require("loader-utils"));16const postcss_1 = __importDefault(require("postcss"));17const index_1 = require("./index");18function loader(source) {19    const options = loader_utils_1.default.getOptions(this);20    if (typeof options.only === 'undefined')21        options.only = true;22    if (!(Array.isArray(options.colors) && options.colors.every((item) => typeof item === 'string'))) {23        throw new Error('colors 需要是一个数组');24    }25    const resourcePath = this.resourcePath;26    if (options.modules && !options.localIdentName) {27        throw new Error('css modules 必须提供 localIdentName');28    }29    this.addDependency(this.resourcePath);30    const matchColors = [];31    const parseCssObject = css_1.default.parse(source);32    parseCssObject.stylesheet.rules = parseCssObject.stylesheet.rules33        .map((rule, index) => {34        if (rule.type === 'rule') {35            const currentRule = rule;36            currentRule.declarations = currentRule.declarations.filter((declaration) => declaration.type === 'declaration' && getIsTheme(declaration.value, options.colors, matchColors));37            if (currentRule.declarations.length === 0)38                rule = null;39        }40        else if (rule.type === 'keyframes') {41            rule.keyframes = rule.keyframes.filter((item) => {42                if (item.type === 'keyframe') {43                    let keyframe = item;44                    keyframe.declarations = keyframe.declarations.filter((declaration) => declaration.type === 'declaration' &&45                        getIsTheme(declaration.value, options.colors, matchColors));46                    return keyframe.declarations.length > 0;47                }48                return false;49            });50            if (rule.keyframes.length === 0)51                rule = null;52        }53        else if (rule.type === 'media') {54            rule.rules = rule.rules.filter((rule) => {55                if (rule.type === 'rule') {56                    const currentRule = rule;57                    currentRule.declarations = currentRule.declarations.filter((declaration) => declaration.type === 'declaration' &&58                        getIsTheme(declaration.value, options.colors, matchColors));59                    return currentRule.declarations.length > 0;60                }61            });62            if (rule.rules.length === 0)63                rule = null;64        }65        else if (rule.type === 'comment' || rule.type === 'charset') {66            return null;67        }68        return rule;69    })70        .filter((item) => !!item);71    const childCompiler = this._compilation.createChildCompiler(`${index_1.PLUGIN_NAME} ${source}`);72    childCompiler.hooks.thisCompilation.tap(`${index_1.PLUGIN_NAME} loader`, (compilation) => {73        compilation.hooks.normalModuleLoader.tap(`${index_1.PLUGIN_NAME} loader`, (loaderContext, module) => {74            loaderContext.emitFile = this.emitFile;75        });76    });77    const callback = this.async();78    childCompiler.runAsChild((err, entries, compilation) => __awaiter(this, void 0, void 0, function* () {79        if (err)80            return callback(err);81        if (compilation.errors.length > 0) {82            return callback(compilation.errors[0]);83        }84        compilation.fileDependencies.forEach((dep) => {85            this.addDependency(dep);86        }, this);87        compilation.contextDependencies.forEach((dep) => {88            this.addContextDependency(dep);89        }, this);90        const getCss = () => __awaiter(this, void 0, void 0, function* () {91            if (!options.modules)92                return css_1.default.stringify(parseCssObject);93            const cssSource = options.only ? css_1.default.stringify(parseCssObject) : source;94            const pscc = yield postcss_1.default([95                require('postcss-modules')({96                    generateScopedName: options.localIdentName,97                    getJSON: () => { }98                })99            ]).process(cssSource, { from: resourcePath });100            return pscc.css;101        });102        let callbackSource = yield getCss();103        this[index_1.PLUGIN_CALLBACK]({104            source: callbackSource,105            fileName: resourcePath,106            modules: options.modules,107            localIdentName: options.localIdentName,108            matchColors109        });110        return callback(null, source);111    }));112}113exports.default = loader;114function getIsTheme(declaration, colors, matchColors) {115    let hasThemeColor = false;116    colors.forEach((color) => {117        if (declaration.includes(color)) {118            hasThemeColor = true;119            if (!matchColors.some((declaration) => declaration === color)) {120                matchColors.push(color);121            }122        }123    });124    return hasThemeColor;...