Opcionalmente inserta estilos desde StyleManager con !importante

Me gustaría sugerir una función que se pueda activar mediante la configuración: 'styleAsImportant: true' (por defecto es false, es decir, sin interrupciones). Pensaba que esto ya era posible configurando el cssComposer, aunque ahora he aprendido que no es así (ver más abajo una explicación).

Estoy trabajando con plantillas que a veces se generaron a partir de precompiladores que usan en exceso la bandera !important. Por ejemplo, un botón en una plantilla podría estar diseñado como:

._style_wxcCz {
  Estilo de Borde: sólido !importante;
  Marje: 0 !importante;
  relleno-derecho: 20px !importante;
  Acolchado-Top: 11px !Importante;
  Acolchonado-Inferior: 11px ¡importante;
  Color de fondo: #377037 !Importante;
  fuente-familia: ff-clan-web-pro, "Helvetica Neue", Helvetica, sans-serif !important;
  Peso-fuente: 600 !importante;
  color de borde: #377037 !importante;
  Radio de frontera: 0 !importante;
  relleno-izquierda: 20px !importante;
  Ancho de borde: 2px !importante;
  color: #ffffff ¡importante;
  cursor: puntero !importante;
  pantalla: bloque en línea !importante;
  Tamaño de fuente: 14px !importante;
  Altura de línea: 18px ! importante;
  Resumen: ¡Ninguno! Importante;
  desbordamiento: visible !importante;
  posición: relativo !importante;
  text-align: centro !importante;
  decoración de texto: ¡ninguna importante!
  transformación de texto: mayúsculas !importante;
  vertical-align: ¡centro !importante
}

Como resultado, estilizar este botón con uvas no tiene ningún efecto. La forma más obvia de que funcione con uvas es asegurarse de que:

1. El estilo de las uvas también tiene '!important' (esta característica)
2. El peinado de uvas viene después del de la plantilla (ya debería ser así, ¿no?)

Supuse que la forma correcta sería hacer que CssRule.js#36 fuera configurable. Intenté configurar esta bandera de 'importante' usando:

var editor = grapesjs.init(
        {
            cssComposer: { importante: verdadero },
        ... 
        }
);

Pero esto no parece tener efecto. Además, cuando lo codifijo a 'verdadero' en el código, veo que hay dos problemas con esta implementación:

1. también añade '!important' a las reglas que provienen de la plantilla. Esta sugerencia de función es específicamente para reglas que se añaden manualmente a través del gestor de estilos, porque deberían sobrescribir los estilos de la plantilla. De lo contrario, no hay valor añadido.
2. añade '!important' dos veces si ya hay una instrucción importante en las reglas de la plantilla, causando que el renderizado falle por tener propiedades CSS inválidas:

<img width="325" alt="captura de pantalla 2018-04-13 a las 12 11 02 pm" src="https://user-images.githubusercontent.com/331833/38753659-f2020aba-3f13-11e8-9b0f-7b722f985d71.png">

Por lo tanto, mi sugerencia es crear un nuevo valor de configuración 'styleAsImportant: true' (por defecto falso, es decir, sin interrupciones). Tras un poco de depuración inicial, descubrí que este cambio hace que esto ocurra:

style_manager/index.js línea 283:

De:

regla = cssC.add(válido, estado, dispositivoW);

a:

rule = cssC.add(valid, state, deviceW, { important: config.styleAsImportant });

Esto parece funcionar bien. No añade '!important' a las reglas de la plantilla, y sí lo añade a las reglas establecidas por el gestor de estilos. Este es el comportamiento deseado.

¿Estás de acuerdo? ¿Debería presentar una residencia permanente?

¡Salud