cssinjs / cssinjs/jss

[jss-plugin-expand] Border not expanding correctly

Open
#1,323 5 comments 0 reactions 0 assignees View on GitHub
docs
Dominant language
JavaScript
Stars
7.1k
Forks
386
PR merge metrics
No merged PRs in 30d

Description

__Expected behavior:__

As per https://cssinjs.org/jss-plugin-expand?v=v10.0.0-alpha.9

```
container: {
border: {
color: 'black',
width: 1,
style: 'solid'
}
}
```
should compile to
```
.container {
border: 1px solid black;
}
```

__Describe the bug:__

It compiles to
```
.container {
border-width: 1px;
border-style: solid;
border-color: black;
}
```

__Codesandbox link:__
https://codesandbox.io/s/jss-plugin-expand-issue-ww682

__Versions (please complete the following information):__
- jss: 10.1.1
- Browser [e.g. chrome, safari]: Chrome
- OS [e.g. Windows, macOS]: Linux
Feel free to add any additional versions which you may think are relevant to the bug.

This was briefly mentioned in #1023

Edit: Same issue with font properties

Contributor guide

Open the contributing guide

Research direction

Start at the jss-plugin-expand implementation and reproduce the issue using the linked CodeSandbox. Compare the generated CSS with the documented border shorthand behavior, including the related font-property case mentioned in the edit. Done means the expanded declarations produce the expected output without regressing existing behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.