Obtén todas las reglas CSS relacionadas de seleccionadores CSS a nivel multi

Este es el comando que uso en Grapedrop para obtener todo el CSS de un componente '''js importar cada uno de 'lodash/each';

export default (config = {}) => ({ run(editor, snd, opts = {}) { const component = opts.target || editor.getWrapper(); const cssc = editor. CssCompositor; reglas const = cssc.getAll(); Sea resultado = '';

const { atRules, notAtRules } = this.splitRules(this.matchedRules(component, rules)); notAtRules.forEach(rule => result += rule.toCSS()); this.sortMediaObject(atRules).forEach(item => { sea rulesStr = ''; const atRule = item.key; const mRules = valor.elemento;

mRules.forEach(rule => { const ruleStr = rule.getDeclaration();

if (rule.get('singleAtRule')) { resultado += '${atRule}{${ruleStr}}'; } else { rulesStr += ruleStr; } });

si (rulesStr) resulta += '${atRule}{${rulesStr}}'; });

resultado de retorno; },

/**

• Consigue reglas emparejadas de un componente
• @param {Component} componente
• @param reglas {Array<CSSRule>}
• @returns {Array<CSSRule>} */ matchedRules(component, rules) { const el = component.getEl(); Sea resultado = [];

rules.forEach(rule => { try { si (rule.selectorsToString().split(',').some( selector => el.matches(this.cleanSelector(selector)) )) { resultado.push(regla); } } atrapar (err) {} });

component.components().forEach(component => { result = result.concat(this.matchedRules(component, rules)) });

Eliminar duplicados resultado = resultado.filter((regla, i) => resultado.indexOf(regla) == i);

resultado de retorno; },

/**

• Devolver el selector pasado sin estados
• @param selector {String}
• @returns {Cuerda} */ cleanSelector(selector) { return selector.split(' ').map(item => item.split(':')[0]).join(' '); },

/**

• Divide una serie de reglas en atRules y no
• @param reglas {Array<CSSRule>}
• @returns {Objeto} */ splitRules(rules) { const atRules = {}; const notAtRules = [];

rules.forEach(rule => { const atRule = rule.getAtRule();

if (atRule) { const mRules = atRules[atRule];

if (mRules) { mRules.push(regla); } else { atRules[atRule] = [regla]; } } else { notAtRules.push(regla); } });

return { atRules, notAtRules, }; },

/**

• Obtener la longitud numérica de la cadena de consulta de medios
• @param {String} cadena de consulta mediaQuery Media
• @return {número} / getQueryLength(mediaQuery) { longitud const = /(-?\d.? \d+)\w{0,}/.exec(mediaQuery); si (!length) devuelve Number.MAX_VALUE;

return parseFloat(length[1]); },

/**

• Devolver un array ordenado desde el objeto de consulta de medios
• @param elementos {Objeto}
• @return {Array} */ sortMediaObject(items = {}) { const itemsArr = []; each(items, (valor, clave) => itemsArr.push({ clave, valor })); return itemsArr.sort( (a, b) => this.getQueryLength(b.key) - this.getQueryLength(a.key) ); } })

Hola @artf

¡Muchas gracias por tu respuesta! Lo probaré y os avisaré si tengo algún problema. De verdad lo agradezco.