CSS duplicado escrito bajo consultas de medios

Inicialización del editor GrapeJs

var editor = grapesjs.init({
	Offsets: 1,
	avisoOnUnload: 0,
	Contenedor: '#gjs',
	Altura: '100%',
	fromElement: cierto,
	storageManager: { autoload: 0 },
	StyleManager: {
		Sectores: [
			{
				nombre: 'General',
				abierto: falso,
				buildProps: ['flotar', 'mostrar', 'posición', 'arriba', 'derecha', 'izquierda', 'abajo']
			}, {
				nombre: 'Dimension',
				abierto: falso,
				buildProps: ['ancho', 'altura', 'ancho máximo', 'altura mínima', 'margen', 'relleno'],
			}, {
				nombre: 'Tipografía',
				abierto: falso,
				buildProps: ['familia-fuente', 'tamaño-fuente', 'peso-fuente', 'espaciado entre letras', 'color', 'altura de línea', 'sombra-texto'],
			}, {
				nombre: 'Decoraciones',
				abierto: falso,
				buildProps: ['radio de borde-c', 'color de fondo', 'radio de borde', 'borde', 'sombra de caja', 'fondo'],
			}, {
				nombre: 'Extra',
				abierto: falso,
				buildProps: ['transición', 'perspectiva', 'transformación'],
			}, {
				nombre: 'Flex',
				abierto: falso,
				Propiedades: [
					{
						nombre: 'Flex Container',
						Propiedad: 'Display',
						tipo: 'select',
						valores predeterminados: 'bloquear',
						lista: [
							{ valor: 'bloqueo', nombre: 'Desactivar' },
							{ valor: 'flex', nombre: 'Enable' }
						],
					}, {
						nombre: 'Flex Parent',
						Propiedad: 'etiqueta-padre-flexión',
						tipo: 'entero',
					}, {
						nombre: 'Dirección',
						Propiedad: 'dirección flexible',
						Tipo: 'Radio',
						valores predeterminados: 'fila',
						lista: [{
							valor: 'fila',
							nombre: 'Row',
							claseNombre: 'iconos-flex, icono-dir-fila',
							título: 'Row',
						}, {
							valor: 'invertida de fila',
							nombre: 'Reverso de fila',
							claseNombre: 'icons-flex icon-dir-row-rev',
							título: 'Reversa de fila',
						}, {
							valor: 'columna',
							nombre: 'Columna',
							título: 'Columna',
							claseNombre: 'icons-flex icon-dir-col',
						}, {
							valor: 'reverso de columna',
							nombre: 'reverso de columna',
							título: 'reverso de columna',
							claseNombre: 'iconos-flex icon-dir-col-rev',
						}],
					}, {
						nombre: 'Justificar',
						Propiedad: 'justificar-contenido',
						Tipo: 'Radio',
						Valores por defecto: 'Arranque Flexible',
						lista: [{
							Valor: 'Salida Flexible',
							claseNombre: 'iconos-flexionar icono-acaba-empezar',
							título: 'Inicio',
						}, {
							valor: 'flex-end',
							título: 'Fin',
							claseNombre: 'iconos-flexionar icono-solo-terminar',
						}, {
							valor: 'espacio entre',
							título: 'Espacio entre',
							claseNombre: 'iconos-flex icono-solo-sp-apuesta',
						}, {
							valor: 'espacio-alrededor',
							título: 'Espacio alrededor',
							claseNombre: 'iconos-flexión, icono-justo-sp-ar',
						}, {
							valor: 'centro',
							título: 'Centro',
							claseNombre: 'iconos-flexión, icono-justo-sp-c-cent',
						}],
					}, {
						nombre: 'Align',
						propiedad: 'alinear-elementos',
						Tipo: 'Radio',
						valores predeterminados: 'centro',
						lista: [{
							Valor: 'Salida Flexible',
							título: 'Inicio',
							claseNombre: 'iconos-flex icon-al-start',
						}, {
							valor: 'flex-end',
							título: 'Fin',
							claseNombre: 'icons-flex icon-al-end',
						}, {
							valor: 'estiramiento',
							título: 'Estira',
							claseNombre: 'iconos-flexión icon-al-str',
						}, {
							valor: 'centro',
							título: 'Centro',
							claseNombre: 'iconos-flex icon-al-centro',
						}],
					}, {
						nombre: 'Flex Children',
						Propiedad: 'etiqueta-padre-flexión',
						tipo: 'entero',
					}, {
						nombre: 'Orden',
						Propiedad: 'orden',
						tipo: 'entero',
						Defaults: 0,
						min: 0
					}, {
						nombre: 'Flex',
						Propiedad: 'flex',
						tipo: 'compuesto',
						Propiedades: [{
							nombre: 'Crece',
							Propiedad: 'flex-grow',
							tipo: 'entero',
							Defaults: 0,
							min: 0
						}, {
							nombre: 'Shrink',
							Propiedad: 'flex-shrink',
							tipo: 'entero',
							Defaults: 0,
							min: 0
						}, {
							nombre: 'Base',
							Propiedad: 'Base flexible',
							tipo: 'entero',
							Unidades: ['PX', '%', ''],
							Unidad: '',
							Valores por defecto: 'auto',
						}],
					}, {
						nombre: 'Align',
						Propiedad: 'Alinear-Yo',
						Tipo: 'Radio',
						Valores por defecto: 'auto',
						lista: [{
							valor: 'auto',
							nombre: 'Auto',
						}, {
							Valor: 'Salida Flexible',
							título: 'Inicio',
							claseNombre: 'iconos-flex icon-al-start',
						}, {
							valor: 'flex-end',
							título: 'Fin',
							claseNombre: 'icons-flex icon-al-end',
						}, {
							valor: 'estiramiento',
							título: 'Estira',
							claseNombre: 'iconos-flexión icon-al-str',
						}, {
							valor: 'centro',
							título: 'Centro',
							claseNombre: 'iconos-flex icon-al-centro',
						}],
					}
				]
			}
		]
	}
});

Bloque de prueba añadido

editor.on('load', function () {
	var $ = uvasjs.$;
	var pn = editor. Paneles;

Configuración de carga y visualización y gestor de estilos
	var openTmBtn = pn.getButton('views', 'open-tm');
	openTmBtn & & openTmBtn.set('active', 1);
	var openSm = pn.getButton('vistas', 'open-sm');
	openSm & & openSm.set('active', 1);

Añadir Sector de Configuración
	var traitsSector = $('<div class="gjs-sm-sector no-select">' +
		'<div class="gjs-sm-title"><span class="icon-settings fa fa-cog"></span> Settings</div>' +
		'<div class="gjs-sm-properties" style="display: none;"></div></div>');
	var traitsProps = traitsSector.find('.gjs-sm-properties');
	traitsProps.append($('.gjs-trt-traits'));
	$('.gjs-sm-sectores').antes(traitsSector);
	traitsSector.find('.gjs-sm-title').on('click', function () {
		var traitStyle = traitsProps.get(0).style;
		var hidden = traitStyle.display == 'ninguno';
		si (oculto) {
			traitStyle.display = 'bloqueo';
		} else {
			traitStyle.display = 'ninguno';
		}
	});

Bloque de pruebas
	editor. BlockManager.add('test', {
		etiqueta: 'prueba',
		categoría: 'Básico',
		Atributos: { Clase: 'FA FA-Cabeza' },

Contenido: '
		<cabecera data-gjs-type="default" data-gjs-droppable="true" class="custom-header">
			<p>Test</p>
		</header>
		<style>
			.custom-header {
				ancho: 100%;
				Altura: 70px;
				Color de fondo: #414141;
				relleno: 20px;
				color: #fff;
			}
			@media (ancho máximo: 480px){
				.custom-header {
					Color de fondo: Rojo;
				}
			}
		</style>
		`
	});
})

Salida

! bug_screenshot_grapejs

@artf estoy intentando añadir un bloque personalizado y proporcionar 'HTML/CSS' del bloque mediante el atributo 'content'. Cuando suelto el 'bloque' en el 'lienzo', entonces 'Media Query CSS' se añade dos veces a 'DOM Element' con la clase 'gjs-css-rules-480px'. Solo ocurre si proporciono 'CSS' mediante el atributo 'content'. Si añado cualquier 'CSS' usando el 'StyleManager', entonces solo se renderiza una vez. Parece un problema al analizar 'CSS' al inicializar cualquier bloque.

Estoy buscando el enlace a GrapeJS - https://grapesjs.com/js/grapes.min.js?v0.14.33

En mi depuración (puede que esté equivocado), en el archivo: './src/css_composer/index.js' Cuando se añade una regla

    /**
     * Añadir nueva regla a la colección, si aún no existe con los mismos selectores
     * @param <Selector>{Array} selectores Array de selectores
     * @param Estado de cadena {String} estado de regla Css
     * @param {String} Ancho Para qué dispositivo está orientado este estilo
     * @param {Objeto} opta Otras opciones para la regla
     * @return {modelo}
     * @example
     * var sm = editor. SelectorManager;
     * var sel1 = sm.add('miClase1');
     * var sel2 = sm.add('myClass2');
     * var rule = cssComposer.add([sel1, sel2], 'hover el cursor');
     * rule.set('style', {
     * ancho: '100px',
     * color: '#fff',
     * });
     * */
    add: función add(selectors, state, width) {
      var opts = argumentos.longitud > 3 && argumentos[3] !== indefinido ? Argumentos[3] : {};

var s = estado || '';
      var w = ancho || '';
      var opt = _extends({}, opts);
      var rule = this.get(selectors, s, w, opt);

No crees reglas que ya se encontraron antes
      a menos que esto sea una regla AT, para la cual múltiples declaraciones
      Tiene sentido (por ejemplo, varios '@font-tipo')
      if (rule & & rule.config && !rule.config.atRuleType) {
        regla de retorno;
      } else {
        opt.state = s;
        opt.mediaText = w;
        opt.selectors = '';
        regla = nueva CssRule(opt, c);
        regla.get('selectors').add(selectors);
        rules.add(regla);
        regla de retorno;
      }
    },

/**
     * Entiende la regla
     * @param <Selector>{Array} selectores Array de selectores
     * @param Estado de cadena {String} estado de regla Css
     * @param {String} Ancho Para qué dispositivo está orientado este estilo
     * @param {Object} ruleProps Otros ruleProps
     * @return {model|null}
     * @example
     * var sm = editor. SelectorManager;
     * var sel1 = sm.add('miClase1');
     * var sel2 = sm.add('myClass2');
     * var rule = cssComposer.get([sel1, sel2], 'hover el cursor');
     * // Actualizar el estilo
     * rule.set('style', {
     * ancho: '300px',
     * color: '#000',
     * });
     * */
    get: función get(selectors, state, width, ruleProps) {
      var rule = nulo;
      rules.each(función (m) {
        si (regla) regresa;
        si (m.compare(selectors, state, width, ruleProps)) regla = m;
      });
      regla de retorno;
    },

La regla se compara con las reglas existentes, si no está presente, se añade o se actualiza. De alguna manera, en la función 'comparar' no puede encontrar la regla y eso lleva a añadirla dos veces.

Gracias, Yomesh, estoy investigando esto