Escape characters in CSS content broke css processing about lit-scss-loader HOT 12 OPEN

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

from lit-scss-loader.

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;
};

from lit-scss-loader.

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

from lit-scss-loader.

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

from lit-scss-loader.

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';
}

from lit-scss-loader.

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.

from lit-scss-loader.

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.

from lit-scss-loader.

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

from lit-scss-loader.

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

from lit-scss-loader.

from lit-scss-loader.

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.

from lit-scss-loader.

This can be related to css-loader.

from lit-scss-loader.