From 0f4f38a4326202261adf0215a3ffbef1fcc85964 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Thu, 17 Nov 2022 14:15:02 +0400
Subject: [PATCH] Fix CSS rule creation with at-rule different from media.
 Closes #4727

---
 src/css_composer/index.ts        |  5 +++-
 test/specs/css_composer/index.js | 40 ++++++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/src/css_composer/index.ts b/src/css_composer/index.ts
index b8fad7bb7..32f706f76 100644
--- a/src/css_composer/index.ts
+++ b/src/css_composer/index.ts
@@ -136,7 +136,10 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
       opt.state = s;
       opt.mediaText = w;
       opt.selectors = [];
-      w && (opt.atRuleType = 'media');
+      // #4727: Prevent updating atRuleType if already defined
+      if (w && !opt.atRuleType) {
+        opt.atRuleType = 'media';
+      }
       rule = new CssRule(opt, this.config);
       // @ts-ignore
       rule.get('selectors').add(selectors, addOpts);
diff --git a/test/specs/css_composer/index.js b/test/specs/css_composer/index.js
index 3ebfe32a7..efa9cc493 100644
--- a/test/specs/css_composer/index.js
+++ b/test/specs/css_composer/index.js
@@ -348,6 +348,7 @@ describe('Css Composer', () => {
         expect(obj.getAll().length).toEqual(1);
         expect(getCSS(obj)).toEqual(cssRule);
       });
+
       test('Add multiple rules as CSS string', () => {
         const cssRules = [
           '.test-rule{color:red;}',
@@ -360,6 +361,7 @@ describe('Css Composer', () => {
         expect(obj.getAll().length).toEqual(cssRules.length);
         expect(getCSS(obj)).toEqual(cssString);
       });
+
       test('Able to return the rule inserted as string', () => {
         const cssRule = `
         .test-rule1 {color:red;}
@@ -387,6 +389,44 @@ describe('Css Composer', () => {
         expect(obj.get('.test-rule3', null, '(max-width: 992px)')).toBe(rule3);
         expect(obj.get('.test-rule4', 'hover', '(max-width: 992px)')).toBe(rule4);
       });
+
+      test('Add rules with @font-face', () => {
+        const cssRules = ['@font-face{font-family:"Font1";}', '@font-face{font-family:"Font2";}'];
+        const cssRule = cssRules.join('');
+        const result = obj.addCollection(cssRule);
+        expect(result.length).toEqual(2);
+        expect(obj.getAll().length).toEqual(2);
+
+        result.forEach(rule => {
+          expect(rule.get('selectors').length).toBe(0);
+          expect(rule.get('selectorsAdd')).toBeFalsy();
+          expect(rule.get('mediaText')).toBeFalsy();
+          expect(rule.get('atRuleType')).toBe('font-face');
+          expect(rule.get('singleAtRule')).toBe(true);
+        });
+
+        expect(getCSS(obj)).toEqual(cssRule.trim());
+      });
+
+      // TODO update jest to be able to test keyframes
+      test.skip('Add rules with @keyframes at rule', () => {
+        const cssRule = `
+        @keyframes keyname {
+          from { width: 0% }
+          40%, 50% { width: 50% }
+          to { width: 100% }
+        }
+        `;
+        const result = obj.addCollection(cssRule);
+        console.log({ result });
+        const [rule1, rule2, rule3] = result;
+        expect(result.length).toEqual(3);
+        expect(obj.getAll().length).toEqual(3);
+
+        expect(rule1.get('mediaText')).toBe('keyname');
+        expect(rule1.get('atRuleType')).toBe('keyframes');
+        // TODO to complete
+      });
     });
   });
 });