RTLCSS errors when processing a value directive marked as important #329
Description
Setup
Given the following little program:
const postcss = require('postcss');
const rtlcss = require('rtlcss');
const plugin = {
postcssPlugin: 'make-declarations-important',
Declaration(decl) {
if (decl.important) return;
decl.important = true;
}
};
const defaultRuleSwitchCss = `
.default-rule-switch {
left: 10px;
}
`;
const valueReplacementCss = `
.value-replacement{
color: #F00 /*rtl:#00F*/;
}
`;
const declarationReplacementCss = `
.declaration-replacement {
text-decoration: underline;
/*rtl:remove*/
text-decoration: none;
}
`;
const brokenCss = `${valueReplacementCss}`;
const workingCss = `${defaultRuleSwitchCss}${declarationReplacementCss}`;
console.log(postcss([plugin, rtlcss]).process(brokenCss, {from: 'example.css'}).css);Expected result
.value-replacement {
color: #00F !important;
}Actual result
Uncaught TypeError: Cannot read properties of undefined (reading 'substr')
at /CWD/example.css:3:3
at Object.action (/CWD/node_modules/rtlcss/lib/plugin.js:184:141)
at /CWD/node_modules/rtlcss/lib/rtlcss.js:136:27
at /CWD/node_modules/rtlcss/lib/util.js:259:37
RTLCSS 2 used to work with programmatically set !important declarations - and it worked in RTLCSS v3.0.
However, in v3.1 RTLCSS started erroring on such nodes and it appears to have been broken ever since. The error message line is from v4.1.1, the latest version at the time of writing.
I have traced the issue down to ee9dc53, which presumes that PostCSS will always have a raws.important if Declaration.important is true, but PostCSS' documentation explicitly says that DeclarationRaws.important contains "The content of the important statement, if it is not just !important." (emphasis mine).