!important without whitespace considered invalid in some cases

ArgonAlex commented 3 years ago

Related to csstree/csstree/issues/155

Should we be using matchDeclaration() instead of matchProperty()?

const { validate } = require('csstree-validator');
console.log(validate('a { width: calc(100% - 10px)!important }'));

[
    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)
        at validateDeclaration (node_modules\csstree-validator\lib\validate.js:103:45)
        at List.<anonymous> (node_modules\csstree-validator\lib\validate.js:120:32)
        at List.each (node_modules\css-tree\lib\common\List.js:158:12)
        at validateRule (node_modules\csstree-validator\lib\validate.js:118:29)
        at Object.enter (node_modules\csstree-validator\lib\validate.js:158:28)
        at Object.<anonymous> (node_modules\css-tree\lib\walker\create.js:11:16) {
      message: 'Invalid value for `width` property',
      rawMessage: 'Mismatch',
      syntax: 'auto | <length> | <percentage> | min-content | max-content | fit-content( <length-percentage> )',
      css: 'calc(100% - 10px)!important',
      mismatchOffset: 17,
      mismatchLength: 1,
      offset: 28,
      line: 1,
      column: 29,
      loc: { source: '<unknown>', start: [Object], end: [Object] },
      property: 'width',
      details: 'Mismatch\n' +
        '  syntax: auto | <length> | <percentage> | min-content | max-content | fit-content( <length-percentage> )\n' +
        '   value: calc(100% - 10px)!important\n' +
        '  -------------------------^'
    }
  ]

lahmatiy commented 3 years ago

Thank you for the report! Now I see the origin of the issue and able to reproduce it. I found that this is a bug in CSSTree's parser when parseValue option is set to false (it set to false in csstree-validator to speed up parsing since it not needed for a detailed AST for values). In this case !important is included into a value but must not. I will address a fix for this ASAP. The status can be tracked in https://github.com/csstree/csstree/issues/155 (original report about the problem). But this issue is also useful since the bug affects csstree-validator and will indicate when fix will come into csstree-validator.

ArgonAlex commented 3 years ago

Thanks!

lahmatiy commented 3 years ago

Fixed in 2.0.1.

@ArgonAlex Thank you for the report once again!

csstree / validator

!important without whitespace considered invalid in some cases #18