cssinjs/jss

Dynamic styles and vendor prefixes not working as expected

Open

Aperta il 16 ott 2020

Vedi su GitHub
 (0 commenti) (0 reazioni) (0 assegnatari)JavaScript (7000 star) (434 fork)batch import
bughelp wanted

Descrizione

Expected behavior: I have a dynamic style that read a prop and return its value, I think that the vendor prefixes plugin is not working well in this case.

Describe the bug: I tried to generate the a css class with lineClamp key inside it, I expected that this is transformed to 'webkit-line-clamp'. This works well if I use a static style, but it doesn't if it is a dynamic one.

If I change the order in which the plugins are created and move 'jss-plugin-vendor-prefixer' to the first element, it seems to work.

Codesandbox link: https://codesandbox.io/s/lucid-sutherland-7l2ry?file=/src/App.js

Versions (please complete the following information):

  • jss: 10.4
  • Browser [e.g. chrome, safari]: Chrome
  • OS [e.g. Windows, macOS]: macOS/Linux

Guida contributor

Tech stack
javascript
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.
half day
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
stale
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
clear
Prerequisiti
Understanding of JSS plugin system
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
45
Direzione di ricerca
Investigate why dynamic styles bypass the vendor prefixer when it is not the first plugin. Check the plugin order in JSS createStyleSheet or similar. Look at jss plugin vendor prefixer source to see if it filters non static rules. Reproduce the issue using the provided codesandbox and test with different plugin orders. Consider if the fix should ensure vendor prefixer always runs on all rules regardless of order.