JisonLexerError: Lexical error on line 1: Unrecognized text

I’ve got a NextJS project where I’m using withCss and withSass that seems to use postcss-calc to during the project’s build.

When building I’ve got the following error as soon as I use calc functions:

> Failed to build
{ JisonLexerError: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: 100VH - 30px
^..^
    at /home/qlerebours/Projects/TraveledMap/traveledmap/src/app/static/chunks/styles.2606b0eb.chunk.css:8106:7
    at Object.parseError (/home/qlerebours/Projects/TraveledMap/traveledmap/src/app/node_modules/postcss-calc/dist/parser.js:1164:15)
    at Object.lexer_parseError [as parseError] (/home/qlerebours/Projects/TraveledMap/traveledmap/src/app/node_modules/postcss-calc/dist/parser.js:2297:44)
    at Object.lexer_next [as next] (/home/qlerebours/Projects/TraveledMap/traveledmap/src/app/node_modules/postcss-calc/dist/parser.js:3292:22)
    at Object.lexer_fastLex [as fastLex] (/home/qlerebours/Projects/TraveledMap/traveledmap/src/app/node_modules/postcss-calc/dist/parser.js:3367:18)
    at fastLex (/home/qlerebours/Projects/TraveledMap/traveledmap/src/app/node_modules/postcss-calc/dist/parser.js:1567:27)
    at Parser.parse (/home/qlerebours/Projects/TraveledMap/traveledmap/src/app/node_modules/postcss-calc/dist/parser.js:1641:30)
    at /home/qlerebours/Projects/TraveledMap/traveledmap/src/app/node_modules/postcss-calc/dist/lib/transform.js:30:30
    at walk (/home/qlerebours/Projects/TraveledMap/traveledmap/src/app/node_modules/postcss-value-parser/lib/walk.js:19:7)
    at ValueParser.walk (/home/qlerebours/Projects/TraveledMap/traveledmap/src/app/node_modules/postcss-value-parser/lib/index.js:18:3)
    at transformValue (/home/qlerebours/Projects/TraveledMap/traveledmap/src/app/node_modules/postcss-calc/dist/lib/transform.js:24:50)
    at _default (/home/qlerebours/Projects/TraveledMap/traveledmap/src/app/node_modules/postcss-calc/dist/lib/transform.js:59:100)
    at /home/qlerebours/Projects/TraveledMap/traveledmap/src/app/node_modules/postcss-calc/dist/index.js:25:51
    at /home/qlerebours/Projects/TraveledMap/traveledmap/src/app/node_modules/postcss/lib/container.js:135:18
    at Rule.each (/home/qlerebours/Projects/TraveledMap/traveledmap/src/app/node_modules/postcss/lib/container.js:101:16)
    at Rule.walk (/home/qlerebours/Projects/TraveledMap/traveledmap/src/app/node_modules/postcss/lib/container.js:131:17)
    at /home/qlerebours/Projects/TraveledMap/traveledmap/src/app/node_modules/postcss/lib/container.js:148:24
  hash: 
   { errStr: 'Lexical error on line 1: Unrecognized text.\n\n  Erroneous area:\n1: 100VH - 30px\n^..^',
     recoverable: false,
     text: '',
     token: null,
     line: 0,
     loc: 
      { first_line: 1,
        first_column: 0,
        last_line: 1,
        last_column: 0,
        range: [Array] },
     yy: 
      { parseError: undefined,
        quoteName: undefined,
        lexer: undefined,
        parser: undefined,
        pre_parse: undefined,
        post_parse: undefined,
        pre_lex: undefined,
        post_lex: undefined },
     lexer: 
      { yy: {},
        __decompressed: true,
        _input: '',
        yytext: '',
        yyleng: 0,
        match: '',
        matches: false,
        _more: false,
        _backtrack: false,
        yylloc: [Object],
        _signaled_error_token: false,
        done: false,
        yylineno: 0,
        matched: '',
        conditionStack: [Array],
        __currentRuleSet__: null,
        offset: 0 },
     destroy: [Function: destructLexErrorInfo] },
  postcssNode: 
   Declaration {
     raws: { before: '\n      ', between: ':' },
     type: 'decl',
     parent: 
      Rule {
        raws: [Object],
        type: 'rule',
        nodes: [Array],
        parent: [Object],
        source: [Object],
        selector: '.bottom-content-wrapper .slider-wrapper.visible',
        lastEach: 9,
        indexes: [Object] },
     source: { start: [Object], input: [Object], end: [Object] },
     prop: 'max-height',
     value: 'calc(100VH - 30px)' } }
error Command failed with exit code 1.

The source code:

&.visible {
      height: 165px;
      max-height: calc(100VH - 30px);
}

The chunk.css file:

.bottom-content-wrapper .slider-wrapper.visible {
      height: 165px;
      max-height: calc(100VH - 30px); }

This is not the first time that I have this error, as I said as soon as I want to use calc, my build fails because of this error

[eitches]

@kevinisaac https://github.com/creativetimofficial/ct-light-bootstrap-dashboard-pro-react/issues/37

I just found your post so help you. use #{} in calc statement like this calc(100vh - #{$headerheight})

I’ve also tried this and done compile and deploy with Nuxt.js successfully.

[nachogarcia]

Same here, using Nuxt. min-height: calc(100vh - $footer-height - $header-height - $header-margin);