diff --git a/src/css_composer/index.js b/src/css_composer/index.js index 1a5dd374d..3443780cb 100644 --- a/src/css_composer/index.js +++ b/src/css_composer/index.js @@ -182,8 +182,13 @@ module.exports = () => { var w = width || ''; var opt = { ...opts }; var rule = this.get(selectors, s, w, opt); - if (rule) return rule; - else { + + // do not create rules that were found before + // unless this is an at-rule, for which multiple declarations + // make sense (e.g. multiple `@font-type`s) + if (rule && rule.config && !rule.config.atRuleType) { + return rule; + } else { opt.state = s; opt.mediaText = w; opt.selectors = ''; diff --git a/test/specs/grapesjs/index.js b/test/specs/grapesjs/index.js index db4723538..c4ad136d1 100644 --- a/test/specs/grapesjs/index.js +++ b/test/specs/grapesjs/index.js @@ -157,6 +157,27 @@ describe('GrapesJS', () => { expect(editor.getStyle().length).toEqual(2); }); + it('Init editor from element with multiple font-face at-rules', () => { + config.fromElement = 1; + config.storageManager = { type: 0 }; + fixture.innerHTML = + ` + ` + htmlString; + const editor = obj.init(config); + const css = editor.getCss(); + const styles = editor.getStyle(); + expect(styles.length).toEqual(2); + }); + it('Set components as HTML', () => { var editor = obj.init(config); editor.setComponents(htmlString); diff --git a/test/specs/parser/model/ParserCss.js b/test/specs/parser/model/ParserCss.js index dc5c8bae8..99bdef6f3 100644 --- a/test/specs/parser/model/ParserCss.js +++ b/test/specs/parser/model/ParserCss.js @@ -277,6 +277,39 @@ module.exports = { expect(obj.parse(str)).toEqual(result); }); + it('Parses multiple font-face at-rules', () => { + const str = ` + @font-face { + font-family: "Open Sans"; + } + @font-face { + font-family: 'Glyphicons Halflings'; + src:url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot) + }`; + const result = [ + { + selectors: [], + selectorsAdd: '', + style: { 'font-family': '"Open Sans"' }, + singleAtRule: 1, + atRuleType: 'font-face' + }, + { + selectors: [], + selectorsAdd: '', + style: { + 'font-family': "'Glyphicons Halflings'", + src: + 'url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot)' + }, + singleAtRule: 1, + atRuleType: 'font-face' + } + ]; + const parsed = obj.parse(str); + expect(parsed).toEqual(result); + }); + it('Parse ID rule', () => { var str = `#test { color: red }`; var result = { diff --git a/test/specs/parser/model/ParserHtml.js b/test/specs/parser/model/ParserHtml.js index f7e5ba1a9..683c1afa1 100644 --- a/test/specs/parser/model/ParserHtml.js +++ b/test/specs/parser/model/ParserHtml.js @@ -372,6 +372,50 @@ module.exports = { expect(res.css).toEqual(resCss); }); + it('Respect multiple font-faces contained in styles in html', () => { + const str = ` + +
TestText