vercel/styled-jsx

CSS `content` property no longer renders encoded characters

Open

Aperta il 15 ott 2019

Vedi su GitHub
 (17 commenti) (1 reazione) (0 assegnatari)JavaScript (7547 star) (310 fork)batch import
bughelp wanted

Descrizione

Do you want to request a feature or report a bug?

bug

What is the current behavior?

Old behavior now must be done through string-literal instead of standard string.

If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar

The following no longer works in NextJS 9.1.1 to render a encoded character:

<style jsx>{`
.whatever-class:after { content: "\\0025B6"; };
</style>

We now have to do:

.whatever-class:after { content: ${`"\\0025B6"`}; }

What is the expected behavior?

Standard way of rendering content should still work.

Environment (include versions)

  • OS: macOS Catalina
  • Browser: Chrome 77
  • styled-jsx (version): NextJS 9.1 bundled (styled-jsx@3.2.2)

Did this work in previous versions?

Yes

Guida contributor

Tech stack
javascriptreactcssnextjs
Dominio
frontend
Tipo issue
bug
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
3
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
1-3 hours
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
stale
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
mostly clear
Prerequisiti
Understanding of styled jsx internalsCSS content property escapingJavaScript template literals
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
40
Direzione di ricerca
Investigate the styled jsx compiler source code (likely the babel plugin or the transform function) to understand how CSS strings are parsed and how escaped characters (like \\0025B6) are handled. Check the issue's comments for any discussion on the root cause or suggested fixes. Look for changes between version 3.2.2 and later that might have introduced the regression. The fix likely involves preserving the original escape sequence in the CSS output without converting it to a string literal.