patternfly / patternfly/patternfly-react
Revamp react-tokens logic
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 862
- Forks
- 392
- Avg merge
- 4d 8h
- Merged PRs (30d)
- 9
Description
Describe the enhancement or change
Our token generation in the react-tokens package needs to be reworked as the logic we use to determine css var values doesn't match 1:1 with how that value will be determined in browser, this can lead to build breaking bugs with recursively defined values.
We've implemented a temporary fix for this, but it is still not optimal as differences in behavior could occur if a var is defined multiple times in a stylesheet. Ideally we should only parse the css within the root selector of the stylesheet.
Additionally, core currently has to add some variables to the root scope for the sole purpose of having the token created in react-tokens, ideally this will not be required in the future.
Jira Issue: PF-92
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the react-tokens package and its temporary token-generation fix, then inspect how core adds variables to the root scope. Compare the package's CSS variable resolution with browser behavior, especially recursively defined or multiply defined variables. Done means root-scope parsing matches browser resolution and core no longer needs extra variables solely to create tokens.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- build-system, frontend
- Issue type
- Refactor
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100