Hello everyone,
I am trying to add some css theme to a Phoenix application… It is a 2016 bootstrap theme.
When I compile the assets, I have the following error.
$ npm run deploy --prefix ./assets
> @ deploy /home/sqrt/elixir_src/calabrese/assets
> webpack --mode production
JisonLexerError: Lexical error on line 1: Unrecognized text.
Erroneous area:
1: 100% - 160px, 120px, 120px, 120px
^..............^
...
Looking at the theme css, I have this css code, which looks like the troublesome part for postcss.
.search-modal {
...
width: -webkit-calc(100% - 120px);
width: -moz-calc(100% - 120px);
width: calc(100% - 120px);
height: -webkit-calc(100% - 160px, 120px, 120px, 120px);
height: -moz-calc(100% - 160px, 120px, 120px, 120px);
height: calc(100% - 160px, 120px, 120px, 120px);
...
}
I am just too bad in css and prefix, does anyone knows how to fix this?
Thanks for taking time
Nicd
2
Maybe one of these errors? https://github.com/search?q=jisonlexererror&type=Issues
Some of those have promising looking comments. Didn’t find any smoking gun though.
1 Like
Thank You for your help…
I have commented out calc part, and it is compiling correctly, I need to find the exact correct syntax in css to completely solve this problem.
I am closing this as it is not related to Phoenix, but to CSS.
Anyway, I welcome any help from css gurus about this error
This would make sense to me
height: -webkit-calc(100% - 160px);
height: -moz-calc(100% - 160px);
height: calc(100% - 160px);
I think the CSS processor just mistakenly dumped some short hand properties (like top, right, bottom, left) in there.
1 Like
Thank You for your response. Changing css to…
height: -moz-calc(100% - 160px), 120px, 120px, 120px;
… seems to compile fine
The height
property takes one value only, so it should likely be either calc(100% - 160px)
or 120px
, but not both, or four.
1 Like