Unwanted characters are inserted when escaping CSS strings

[nibushibu]

I hope you can check my repository below.
https://github.com/nibushibu/Getup

After compilation, unnecessary characters are inserted into CSS (SCSS) described in the file / src/riot/my-app.riot.

Before

/* style tag (scss) in `my-app.riot` */

h1 {
  color: green;
  display: flex;
}

.unmount-animation {
  opacity: 1;
  transition: opacity 1s;

  &.is-unmount {
    opacity: 0;
  }
}

After (compiled)

my-app h1,[is="my-app"] h1{A   color: green;A   display: flex; } my-app AA.unmount-animation,[is="my-app"] AA.unmount-animation{A   opacity: 1;A   transition: opacity 1s; } my-app A   .unmount-animation.is-unmount,[is="my-app"] A   .unmount-animation.is-unmount{A     opacity: 0; }A

When I checked why the unwanted A character was inserted, I found that it was inserted aftercssEscape ()was executed.

compiler/src/generators/css/index.js

Lines 105 to 108 in 227c544

	const cssCode = (options.scopedCss ?
	scopedCSS(escapedCssIdentifier, cssEscape(preprocessorOutput.code)) :
	cssEscape(preprocessorOutput.code)
	).trim()

cssEscape (preprocessorOutput.code)

By rewriting the above part (2 places) as below, we could avoid the problem for the time being.

preprocessorOutput.code

I think the above is temporary workaround, but I could not find a fundamental solution.

If this is a problem with my file, please point out the cause, or if it is a bug, please help me solve it. 🙇

[GianlucaGuarini]

Ok that's a weird issue, it seems that the preprocessor adds chars to escape to the css code. I will check this issue during the weekend thank you for reporting it!

[GianlucaGuarini]

I am trying to reproduce the issue but I got no luck. Could you please post the css string failing?

[GianlucaGuarini]

Ok locally I was unable to produce the issue but the CI seems to have found it https://travis-ci.org/riot/compiler

[GianlucaGuarini]

@nibushibu ok the issue appears only in node 10. Everything works fine in node 12. I am trying to find a solution