cssinjs/jss

Dynamic styles and vendor prefixes not working as expected

Ouverte

#1 409 ouverte le 16 oct. 2020

Voir sur GitHubGuide contributeur
 (0 commentaire) (0 réaction) (0 personne assignée)JavaScript (434 forks)batch import
bughelp wanted

Métriques du dépôt

Stars
 (7 000 étoiles)
Métriques de merge PR
 (Métriques PR en attente)

Description

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

Guide contributeur

Direction de recherche
Enquetez sur l'ordre des plugins dans la configuration JSS. Le problème indique que le déplacement de 'jss plugin vendor prefixer' vers la première position résout le problème pour les styles dynamiques. Vérifiez comment les styles dynamiques sont traités et assurez vous que le préfixeur de fournisseur s'exécute avant les autres plugins qui pourraient consommer l'objet de style.
Stack technique
javascript
Domaine
frontend
Type d'issue
Bug
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
2
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 heures
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
JavaScriptJSS basics
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
80