The following CSS ia breaking my build <div class="highlight highlight-source-css

<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clip

This was a bug in css-loader: It didn't like url('...')</cod

Module build failed: SyntaxError: Unexpected token h about css-loader HOT 6 CLOSED

MoOx commented on May 20, 2024

Module build failed: SyntaxError: Unexpected token h

from css-loader.

Comments (6)

sokra commented on May 20, 2024

Could you paste the complete error?

from css-loader.

MoOx commented on May 20, 2024

ERROR in ./~/css-loader!./~/cssnext-loader!./src/index.css
Module build failed: SyntaxError: Unexpected token h
    at Object.parse (native)
    at Object.parseString (/.../node_modules/css-loader/node_modules/loader-utils/index.js:152:14)
    at(/.../node_modules/css-loader/index.js:47:25
    at String.replace (native)
    at Object.module.exports (/.../node_modules/css-loader/index.js:45:12)
 @ ./src/index.css 4:14-293 12:19-298

from css-loader.

sokra commented on May 20, 2024

Oh you are using the cssnext-loader... So the real css code is different:

This:

:root {
  --vr-Color-white: white;
}

.class {
  filter: drop-shadow(0 1px 0 var(--vr-Color-white));
}

transpiles to this:

.class {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="0" /><feOffset dx="1" dy="2" result="offsetblur" /><feFlood flood-color="rgba(255,255,255,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
  -webkit-filter: drop-shadow(0 1px 0 white);
          filter: drop-shadow(0 1px 0 white);
}