Css compile error

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

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 :slight_smile:

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 :slight_smile:

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