From b67340c48dd45e8b18346572fb4a0285cc3935f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Pereira=20Mu=C3=B1oz?= Date: Sat, 14 Dec 2024 15:50:15 +0100 Subject: [PATCH] Fix a bug when important has been set by another plugin --- lib/plugin.js | 8 ++--- package-lock.json | 2 +- .../rtlcss-with-external-postcss-plugins.js | 36 +++++++++++++++++++ test/test.js | 22 +++++++++++- 4 files changed, 62 insertions(+), 6 deletions(-) create mode 100644 test/data/rtlcss-with-external-postcss-plugins.js diff --git a/lib/plugin.js b/lib/plugin.js index f708fe7..5dea473 100644 --- a/lib/plugin.js +++ b/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) diff --git a/package-lock.json b/package-lock.json index a3aec6f..9c7b9ae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,7 +6,7 @@ "packages": { "": { "name": "rtlcss", - "version": "4.1.1", + "version": "4.3.0", "license": "MIT", "dependencies": { "escalade": "^3.1.1", diff --git a/test/data/rtlcss-with-external-postcss-plugins.js b/test/data/rtlcss-with-external-postcss-plugins.js new file mode 100644 index 0000000..8d158d1 --- /dev/null +++ b/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 + } +] diff --git a/test/test.js b/test/test.js index 752cd41..9362eb0 100644 --- a/test/test.js +++ b/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} `, (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)