JisonLexerError: Lexical error on line 1: Unrecognized text #89
Description
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