facebook / facebook/stylex

inconsistent priority/ordering when using stylex based 3rd party library

Open
#1,207 3 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
JavaScript
Stars
10.3k
Forks
481
Avg merge
3d 8h
Merged PRs (30d)
13

Description

### Describe the issue

We’ve built our design system with StyleX and published it as an npm package. We also have a separate Next.js project that consumes this library. That project uses our third-party library and also applies its own styles directly with StyleX.

While inspecting elements, we noticed something odd: the “computed styles” list shows rules coming from a plain tag and from the styles imported from our library at the same time. When we click that plain <style> in DevTools, there’s no viewable source code and the DOM shows it as an empty <style> tag.

Is this expected behavior?

<img width="914" height="148" alt="Image" src="https://github.com/user-attachments/assets/d2f5a389-5cad-4442-8327-3b719a5401ab" />

<img width="1336" height="1282" alt="Image" src="https://github.com/user-attachments/assets/464021b0-688c-4ecb-9cb4-35182960f928" />

### Expected behavior

Only the styles from our third-party package (the library we built) should be applied.

### Steps to reproduce

Since we are using our own private package we couldnt provide a reproduction. tho further questions are welcomed

### Test case

_No response_

### Additional comments

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.