Fix a bug when important has been set by another plugin

lib/plugin.js

@@ -144,7 +144,7 @@ module.exports = {
         action (decl, expr, context) {
           let prefix = ''
           const hasRawValue = decl.raws.value && decl.raws.value.raw
-          const raw = `${decl.raws.between.substr(1).trim()}${hasRawValue ? decl.raws.value.raw : decl.value}${decl.important ? decl.raws.important.substr(9).trim() : ''}`
+          const raw = `${decl.raws.between.substr(1).trim()}${hasRawValue ? decl.raws.value.raw : decl.value}${decl.important && decl.raws.important ? decl.raws.important.substr(9).trim() : ''}`
           raw.replace(expr, (m, v) => {
             prefix += v
           })
@@ -159,7 +159,7 @@ module.exports = {
         action (decl, expr, context) {
           let suffix = ''
           const hasRawValue = decl.raws.value && decl.raws.value.raw
-          const raw = `${decl.raws.between.substr(1).trim()}${hasRawValue ? decl.raws.value.raw : decl.value}${decl.important ? decl.raws.important.substr(9).trim() : ''}`
+          const raw = `${decl.raws.between.substr(1).trim()}${hasRawValue ? decl.raws.value.raw : decl.value}${decl.important && decl.raws.important ? decl.raws.important.substr(9).trim() : ''}`
           raw.replace(expr, (m, v) => {
             suffix = v + suffix
           })
@@ -171,7 +171,7 @@ module.exports = {
         name: 'insert',
         action (decl, expr, context) {
           const hasRawValue = decl.raws.value && decl.raws.value.raw
-          const raw = `${decl.raws.between.substr(1).trim()}${hasRawValue ? decl.raws.value.raw : decl.value}${decl.important ? decl.raws.important.substr(9).trim() : ''}`
+          const raw = `${decl.raws.between.substr(1).trim()}${hasRawValue ? decl.raws.value.raw : decl.value}${decl.important && decl.raws.important ? decl.raws.important.substr(9).trim() : ''}`
           const result = raw.replace(expr, (match, value) => value + match)
           decl.value = hasRawValue ? (decl.raws.value.raw = result) : result
           return true
@@ -181,7 +181,7 @@ module.exports = {
         name: '',
         action (decl, expr, context) {
           const hasRawValue = decl.raws.value && decl.raws.value.raw
-          const raw = `${decl.raws.between.substr(1).trim()}${hasRawValue ? decl.raws.value.raw : ''}${decl.important ? decl.raws.important.substr(9).trim() : ''}`
+          const raw = `${decl.raws.between.substr(1).trim()}${hasRawValue ? decl.raws.value.raw : ''}${decl.important && decl.raws.important ? decl.raws.important.substr(9).trim() : ''}`
           raw.replace(expr, (match, value) => {
             decl.value = hasRawValue
               ? (decl.raws.value.raw = value + match)

test/data/rtlcss-with-external-postcss-plugins.js

@@ -0,0 +1,36 @@
+'use strict'
+
+const importantPlugin = {
+  postcssPlugin: 'make-declarations-important',
+  Declaration (decl) {
+    if (decl.important) return
+    decl.important = true
+  }
+}
+
+module.exports = [
+  {
+    should: 'Should append directive value if decl.important has been set in true by a postcss plugin',
+    expected: '.test { transform: rotate(45deg) scaleX(-1) !important; }',
+    input: '.test { transform: rotate(45deg) /*rtl:append:scaleX(-1)*/; }',
+    postcssPlugin: importantPlugin
+  },
+  {
+    should: 'Should insert directive value if decl.important has been set in true by a postcss plugin',
+    expected: '.test { margin: 1px 2px 3px !important; }',
+    input: '.test { margin: 1px /*rtl:insert:2px*/ 3px; }',
+    postcssPlugin: importantPlugin
+  },
+  {
+    should: 'Should prepend directive value if decl.important has been set in true by a postcss plugin',
+    expected: '.test { font-family: "Droid Arabic Kufi","Droid Sans" !important; }',
+    input: '.test { font-family: "Droid Sans"/*rtl:prepend:"Droid Arabic Kufi",*/; }',
+    postcssPlugin: importantPlugin
+  },
+  {
+    should: 'Should replace directive value if decl.important has been set in true by a postcss plugin',
+    expected: '.test { color: #00F !important; }',
+    input: '.test { color: #F00 /*rtl:#00F*/; }',
+    postcssPlugin: importantPlugin
+  }
+]

test/test.js

@@ -2,6 +2,7 @@
 
 'use strict'
 
+const postcss = require('postcss')
 const assert = require('assert').strict
 const rtlcss = require('..')
 
@@ -23,11 +24,30 @@ const tests = {
   '# RTLCSS (Hooks):': require('./data/rtlcss-hooks.js'),
   '# Special:': require('./data/special.js'),
   '# Variables:': require('./data/variables.js'),
-  '# Regression:': require('./data/regression.js')
+  '# Regression:': require('./data/regression.js'),
+  '# Running RTLCSS as a postcss plugin after other plugins': require('./data/rtlcss-with-external-postcss-plugins.js')
 }
 for (const [key, group] of Object.entries(tests)) {
   describe(key, () => {
     for (const item of group) {
+      if (item.postcssPlugin) {
+        ((test) => {
+          it(test.should, (done) => {
+            assert.equal(postcss([test.postcssPlugin, rtlcss]).process(test.input, { from: 'test.css' }).css, test.expected)
+            done()
+          })
+        })(item)
+        if (item.reversable) {
+          ((test) => {
+            it(`${test.should} <REVERSED>`, (done) => {
+              assert.equal(postcss([test.postcssPlugin, rtlcss]).process(test.expected, { from: 'test.css' }).css, test.input)
+              done()
+            })
+          })(item)
+        }
+        continue
+      }
+
       ((test) => {
         it(test.should, (done) => {
           assert.equal(rtlcss.process(test.input, test.options, test.plugins, test.hooks), test.expected)