1207 - update stylesheet if !important is set (#1612)

* 1207 - update stylesheet if !important is set

* 1207 - fix typo in test description

* better test name

* 1207 - move replacment inside else block

Co-authored-by: Oleg Isonen <[email protected]>

Author: behnammodi

packages/jss/.size-snapshot.json

@@ -1,30 +1,30 @@
 {
   "jss.js": {
-    "bundled": 64937,
-    "minified": 23204,
-    "gzipped": 7190
+    "bundled": 64939,
+    "minified": 23186,
+    "gzipped": 7211
   },
   "jss.min.js": {
-    "bundled": 63541,
-    "minified": 22435,
-    "gzipped": 6848
+    "bundled": 63543,
+    "minified": 22417,
+    "gzipped": 6866
   },
   "jss.cjs.js": {
-    "bundled": 60615,
-    "minified": 26232,
-    "gzipped": 7308
+    "bundled": 60627,
+    "minified": 26214,
+    "gzipped": 7330
   },
   "jss.esm.js": {
-    "bundled": 58987,
-    "minified": 24926,
-    "gzipped": 7142,
+    "bundled": 58999,
+    "minified": 24908,
+    "gzipped": 7157,
     "treeshaked": {
       "rollup": {
-        "code": 20190,
+        "code": 20172,
         "import_statements": 345
       },
       "webpack": {
-        "code": 21680
+        "code": 21662
       }
     }
   }

packages/jss/src/DomRenderer.js

@@ -38,19 +38,23 @@ const setProperty = (cssRule, prop, value) => {
     let cssValue = value
 
     if (Array.isArray(value)) {
-      cssValue = toCssValue(value, true)
-
-      if (value[value.length - 1] === '!important') {
-        cssRule.style.setProperty(prop, cssValue, 'important')
-        return true
-      }
+      cssValue = toCssValue(value)
     }
 
     // Support CSSTOM.
     if (cssRule.attributeStyleMap) {
       cssRule.attributeStyleMap.set(prop, cssValue)
     } else {
-      cssRule.style.setProperty(prop, cssValue)
+      const indexOfImportantFlag = cssValue ? cssValue.indexOf('!important') : -1
+
+      const cssValueWithoutImportantFlag =
+        indexOfImportantFlag > -1 ? cssValue.substr(0, indexOfImportantFlag - 1) : cssValue
+
+      cssRule.style.setProperty(
+        prop,
+        cssValueWithoutImportantFlag,
+        indexOfImportantFlag > -1 ? 'important' : ''
+      )
     }
   } catch (err) {
     // IE may throw if property is unknown.

packages/jss/src/index.d.ts

@@ -288,7 +288,7 @@ export {sheets, SheetsManager, SheetsRegistry, RuleList}
 export function create(options?: Partial<JssOptions>): Jss
 export const createGenerateId: CreateGenerateId
 export function createRule<D>(name: string, decl: JssStyle, options: RuleOptions): Rule
-export function toCssValue(value: JssValue, ignoreImportant: boolean): string
+export function toCssValue(value: JssValue): string
 export function getDynamicStyles(styles: Styles): Styles | null
 declare const jss: Jss
 

packages/jss/src/utils/toCssValue.js

@@ -17,7 +17,7 @@ const join = (value, by) => {
  * `margin: [['5px', '10px'], '!important']` > `margin: 5px 10px !important;`
  * `color: ['red', !important]` > `color: red !important;`
  */
-const toCssValue = (value, ignoreImportant = false) => {
+const toCssValue = (value) => {
   if (!Array.isArray(value)) return value
 
   let cssValue = ''
@@ -32,7 +32,7 @@ const toCssValue = (value, ignoreImportant = false) => {
   } else cssValue = join(value, ', ')
 
   // Add !important, because it was ignored.
-  if (!ignoreImportant && value[value.length - 1] === '!important') {
+  if (value[value.length - 1] === '!important') {
     cssValue += ' !important'
   }
 

packages/jss/tests/functional/sheet.js

@@ -575,6 +575,31 @@ describe('Functional: sheet', () => {
     })
   })
 
+  describe('sheet.update() with !important', () => {
+    let sheet
+    beforeEach(() => {
+      const onUpdate = (data, rule) => {
+        rule.style = data
+      }
+      sheet = create()
+        .use({onUpdate})
+        .createStyleSheet({a: {color: 'rgb(255, 0, 0) !important'}}, {link: true})
+        .attach()
+
+      expect(computeStyle(sheet.classes.a).color).to.be('rgb(255, 0, 0)')
+    })
+
+    it('should return correct value by an array', () => {
+      sheet.update({color: ['rgb(0, 255, 0)', '!important']})
+      expect(computeStyle(sheet.classes.a).color).to.be('rgb(0, 255, 0)')
+    })
+
+    it('should return correct value by a string', () => {
+      sheet.update({color: 'rgb(0, 255, 0) !important'})
+      expect(computeStyle(sheet.classes.a).color).to.be('rgb(0, 255, 0)')
+    })
+  })
+
   describe('rule.selector', () => {
     let sheet
     let rule