Upstream API errors are encountered when using construction styles in Lit.

[ouweiya]

A parse error occurs when \ is included in a construction pattern.

In the following styles, .hover\:bg-red-300:hover will be ignored. I used tailwindcss so would generate classnames like this.

const sheet = new CSSStyleSheet();
sheet.replaceSync(`
.aaa {
  color: red;
}
.bbb {
  color: red;
}
.hover\:bg-red-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(252 165 165 / var(--tw-bg-opacity))
}
.ccc {
  color: red;
}
`);

console.log(sheet.cssRules);

output

CSSStyleRule {selectorText: '.aaa', style: CSSStyleDeclaration, styleMap: StylePropertyMap, cssRules: CSSRuleList, type: 1, …}
CSSStyleRule {selectorText: '.bbb', style: CSSStyleDeclaration, styleMap: StylePropertyMap, cssRules: CSSRuleList, type: 1, …}
CSSStyleRule {selectorText: '.ccc', style: CSSStyleDeclaration, styleMap: StylePropertyMap, cssRules: CSSRuleList, type: 1, …}

[ouweiya]

After investigation, I found out that in JS, backslashes \ need to be escaped. Otherwise, .hover\:bg-red-300:hover is parsed as .hover:bg-red-300:hover, which is obviously not a valid CSS selector. The problem can be fixed by escaping the backslash, resulting in .hover\\:bg-red-300:hover.

If you're using PostCSS to compile TailwindCSS, you can write a mini plugin to complete the escape operation.

const postcssDoubleEscape = () => {
  return {
    postcssPlugin: 'postcss-double-escape',
    Once(root) {
      root.walkRules(rule => {
        rule.selectors = rule.selectors.map(selector => {
          return selector.replace(/\\:/g, '\\\\:');
        });
      });
    },
  };
};
// Run postcssDoubleEscape after tailwindcss plugins.
const result = await postcss([...config.plugins, postcssDoubleEscape()]).process(code, {
  from: id,
  to: id,
  map: { inline: false, annotation: false },
});

Another method is to use the TailwindCSS Separator, but I don't want to uglify my class names.

export default {
  separator: '_',
  content: ['./src/**/*.ts', './src/index.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

<div class="hover_bg-purple-800">Hello</div>

[e111077]

Would also like to note that this issue is specific to JS template strings and the web platform (CSSStylesheet) and not lit

[ouweiya]

Yes, I have stated in the title that it's an issue with the upstream API, but since we can't change the behavior of the upstream API, would Lit consider implementing some measures to prevent accidental pitfalls to make it easier for developers, thereby enhancing the development experience?