Escape characters in CSS content broke css processing

[kuka-radovan]

If I add content rule to SCSS file, e.g.:

&::before {
     content: '\2014';
}

Result from scss processing will be empty <style></style> tag.

[kuka-radovan]

@drdreo Did you have time to look at this issue?

[drdreo]

Thanks for the hint @kuka-radovan . You might as well open a pull request if you want to.

I investigated into it and found out it's the unescaped backslash which seems to set the imported stylesheet to undefined.

Since the output of my loader returns something like:

import {css} from 'lit-element'; 
export default css`div{background-color:#ff0}div::before{content:'\2014'}`;

I don't seem to find a quick solution for this except than writing the css with double backslashes. But that is not satisfying. I thought of programmatically replacing one backslash with two, but that doesn't work either, or at least i haven't found a way to do that successfully.

&::before {
     content: '\\2014';
}

[kuka-radovan]

I really would love to, but I am booked out for few weeks and I will need this pretty much. I would appreciate if you could fix that issue. If not, I will look at it after this hectic time. Thank you for your time.

[drdreo]

After more debugging, i found out it has nothing to do with this loader but lit-element itself. I filed an issue there https://github.com/Polymer/lit-element/issues/637

[ryangroth5]

You could point the finger in either direction. The lit folks don't claim it as their problem either. The fact is that css in the wild will have these escapes. Outputting something like:

import {css} from 'lit-element'; 
export default css`div{background-color:#ff0}div::before{content:'\\2014'}`;

should fix it. Currently I am forking lit-scss-loader to see if I can change it since I think it is less likely to change than lit-element.

[ryangroth5]

This is what I came up with. It works. I don't know if it does what you want it to though. It will produce a valid css from a file that is imported with the [0-9] looking escape.

diff --git a/node_modules/lit-scss-loader/src/templateGenerator.js b/node_modules/lit-scss-loader/src/templateGenerator.js
index aef3ce8..70633cd 100644
--- a/node_modules/lit-scss-loader/src/templateGenerator.js
+++ b/node_modules/lit-scss-loader/src/templateGenerator.js
@@ -1,4 +1,6 @@
 module.exports = function (parsedFileContents) {
+
+  parsedFileContents = parsedFileContents.replace(/\\([0-9])/g,'\\\\$1');
   return `
         ${generateCSSImport()}   
         ${createCssExport(parsedFileContents)}
\ No newline at end of file
diff --git a/node_modules/lit-scss-loader/src/templateGenerator.min.js b/node_modules/lit-scss-loader/src/templateGenerator.min.js
index e175459..eda33bd 100644
--- a/node_modules/lit-scss-loader/src/templateGenerator.min.js
+++ b/node_modules/lit-scss-loader/src/templateGenerator.min.js
@@ -1,4 +1,5 @@
 module.exports = function (parsedFileContents) {
+  parsedFileContents = parsedFileContents.replace(/\\([0-9])/g,'\\\\$1');
   return `${generateCSSImport()} ${createCssExport(parsedFileContents)}
     `
 }
\ No newline at end of file

[kuka-radovan]

I escaped it the same like you, but in custom webpack-loader which I use before lit-scss-loader

[ryangroth5]

Could you share your method?

On Tue, Apr 23, 2019, 9:40 AM Kuka Radovan [email protected] wrote:

I escaped it the same like you, but in custom webpack-loader which I use before lit-scss-loader

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/drdreo/lit-scss-loader/issues/2#issuecomment-485807455, or mute the thread https://github.com/notifications/unsubscribe-auth/AACOZVCWPQYVMZVQ5Z7ZHSDPR4GWPANCNFSM4G6ROP6A .

[kuka-radovan]

This is it, but it solves our specific case... it is not supposed to be generic solution

module.exports = function(source) {
  const regex = /content: ["|']((?:\\\w+\s*)+)+["|']/gi;

  let match;
  let stripedOutStyle = source;

  while ((match = regex.exec(source)) !== null) {
    // This is necessary to avoid infinite loops with zero-width matches
    if (match.index === regex.lastIndex) {
      regex.lastIndex++;
    }

    // We need stipeOut each part of content value (e.g. 'content: \2014 \00A0";')
    const stripedMatchValue = match[1]
      .split(" ")
      .map(part => `\\${part}`)
      .join(" ");

    stripedOutStyle = stripedOutStyle.replace(
      match[0],
      `content: "${stripedMatchValue}";`
    );
  }

  return stripedOutStyle;
};

[drdreo]

Thanks for collaborating. I didn't have the time to dive deeper into this. My work project now switched from lit to stencil for convenience reasons. Feel free to develop this further.

[margani]

I had this issue when using Bulma sass files, and in Breadcrumb there was couple of content settings like:

    & + li::before
      color: $breadcrumb-item-separator-color
      content: "\0002f"

This caused webpack css processing to fail. I fixed it by defining this:

$content1: "\0002f"

and

    & + li::before
      color: $breadcrumb-item-separator-color
      content: $content1

[margani]

This can be related to css-loader.