Skip to content

RTLCSS errors when processing a value directive marked as important #329

@svieira

Description

@svieira

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).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions