CSS spec compliance: !IMPORTANT is valid – should be case insensitive

[lydell]

• Node Version: 8.3.0
• NPM Version: 5.3.0
• postcss-less Version: 1.1.0

LESS

a{k: v !IMPORTANT;}

JavaScript

console.dir(require("postcss-less").parse('a{k: v !IMPORTANT;}'), {colors: true, depth: null})

Expected Behavior

The declaration should be parsed as:

Declaration {
  prop: 'k',
  important: true,
  value: 'v'
}

Just like for a{k: v !important;}.

Actual Behavior

The declaration is parsed as:

Declaration {
  prop: 'k',
  value: 'v !IMPORTANT' }
}

How can we reproduce the behavior?

console.dir(require("postcss-less").parse('a{k: v !IMPORTANT;}'), {colors: true, depth: null})

Spec

CSS is actually mostly case insensitive. Here is the spec mentioning how !important should be parsed case insensitively: https://www.w3.org/TR/css-syntax-3/#consume-a-declaration

If the last two non-<whitespace-token>s in the declaration’s value are a <delim-token> with the value "!" followed by an <ident-token> with a value that is an ASCII case-insensitive match for "important", remove them from the declaration’s value and set the declaration’s important flag to true.

Related

postcss/postcss#1065

[shellscape]

Fix should go here, should be a simple regex instead of straight string compare.

[orottier]

I've fixed this for less mixins, but I think the issue should be migrated to shellscape/postcss

edit: oops just noticed the related bug in that repo

[shellscape]

@lydell @orottier has this one been resolved by #91?

[lydell]

@shellscape I asked myself the same question when I saw #91 and tried it – but, no, this is still an issue.

[orottier]

I've made the check for mixins case-insensitive, see related test: https://github.com/shellscape/postcss-less/pull/91/files#diff-d7e2ac4acbb2c79fd1039710696f1cefR139

the postcss bug postcss/postcss#1065 is also fixed, it landed in 6.0.11. Should we update package.json?