Merge pull request #1036 from tommedema/dev-fonts

Allow multiple at-rules, fixes #1032

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 = '';

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 =
+        `
+      <style>
+        @font-face {
+          font-family: 'Glyphicons Halflings';
+          src: url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2) format('woff2');
+        }
+        @font-face {
+          font-family: 'Droid Sans';
+          src: url(https://fonts.gstatic.com/s/droidsans/v8/SlGVmQWMvZQIdix7AFxXkHNSbRYXags.woff2) format('woff2');
+        }
+      </style>` + 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);

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 = {

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 = `
+          <style>
+          @font-face {
+            font-family: "Open Sans";
+            src:url(https://fonts.gstatic.com/s/droidsans/v8/SlGVmQWMvZQIdix7AFxXkHNSbRYXags.woff2)
+          }
+          @font-face {
+            font-family: 'Glyphicons Halflings';
+            src:url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot)
+          }
+          </style>
+          <div>a div</div>
+        `;
+
+        const expected = [
+          {
+            selectors: [],
+            selectorsAdd: '',
+            style: {
+              'font-family': '"Open Sans"',
+              src:
+                'url(https://fonts.gstatic.com/s/droidsans/v8/SlGVmQWMvZQIdix7AFxXkHNSbRYXags.woff2)'
+            },
+            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 res = obj.parse(str, new ParserCss());
+        expect(res.css).toEqual(expected);
+      });
+
       it('Parse nested div with text and spaces', () => {
         var str = '<div> <p>TestText</p> </div>';
         var result = {