!important without whitespace considered invalid in some cases

[ArgonAlex]

It seems like !important immediately preceded by a ) is being considered an invalid value. e.g:

width:calc(100% - 10px)!important;

color:rgb(0,0,0)!important;

[lahmatiy]

Considered by whom? I know nothing about issues with this.

[ArgonAlex]

By csstree. I think it's a bug.

console.log(require('css-tree').lexer.matchProperty('width', 'calc(33.33333% - 10px)!important;').error);

SyntaxError [SyntaxMatchError]: Mismatch
    at matchSyntax (node_modules\css-tree\lib\lexer\Lexer.js:87:17)
    at Lexer.matchProperty (node_modules\css-tree\lib\lexer\Lexer.js:331:16)
  message: 'Mismatch\n' +
    '  syntax: auto | <length> | <percentage> | min-content | max-content | fit-content( <length-percentage> )\n' +
    '   value: calc(33.33333% - 10px)!important;\n' +
    '  ------------------------------^',
  rawMessage: 'Mismatch',
  syntax: 'auto | <length> | <percentage> | min-content | max-content | fit-content( <length-percentage> )',
  css: 'calc(33.33333% - 10px)!important;',
  mismatchOffset: 22,
  mismatchLength: 1,
  offset: 22,
  line: 1,
  column: 23,
  loc: {
    source: '<unknown>',
    start: { offset: 22, line: 1, column: 23 },
    end: { offset: 23, line: 1, column: 24 }
  }
}

[lahmatiy]

Thank you for clarification.
That's not a bug, since lexer.matchProperty() tests a property name and a value against a definition syntax. !important is not a part of a value, but a declaration:

So, you need to discard !important somehow before using matchProperty(). Another option is to use matchDeclaration() e.g.:

const { lexer, parse } = require('css-tree');
console.log(lexer.matchDeclaration(parse('width: calc(33.33333% - 10px)!important', { context: 'declaration' })));

[ArgonAlex]

Ah ok thanks for the explanation. I might have encountered a bug in csstree-validator then, since it's using matchProperty() to validate declarations.

[lahmatiy]

As mentioned in csstree/validator#18, CSSTree's parser has a bug when parseValue option is set to false. In this case !important is included into a value but must not. I found it happens only when parentheses (functions) or brackets are used in a value.

[lahmatiy]

Will be available in next release today.

[lahmatiy]

Fixed in 1.1.3