linkedin / linkedin/css-blocks
Composes should cascade within a block
- Dominant language
- TypeScript
- Stars
- 6.3k
- Forks
- 154
- PR merge metrics
- No merged PRs in 30d
Description
If we have two classes on the same block that are composing other classes, it should _just work_. In the code block below, the resolved style should be that of `text-body[color=text]`.
tag.block.scss
```
:scope {
composes: 'text-body[color=text-on-dark]', 'text-body[size=small]';
border-radius: token('corner-radius-small');
padding: token('spacing-half-x') token('spacing-one-x');
}
// types
:scope[type=enabled] {
composes: 'text-body[color=text]';
background-color: token('color-background-none-active');
}
```
text-body.block.scss
```
/ defaults
:scope {
font-size: token('font-size-medium');
line-height: token('line-height-default');
font-weight: token('font-weight-regular');
color: token('color-text');
}
:scope[size=small] {
font-size: token('font-size-small');
}
:scope {
@include text-color('text');
@include text-color('text-low-emphasis');
@include text-color('action');
@include text-color('signal-positive');
@include text-color('signal-negative');
@include text-color('signal-neutral');
@include text-color('text-on-dark');
}
```
Contributor guide
Research direction
Start with the two example files, tag.block.scss and text-body.block.scss, and trace how CSS Blocks resolves multiple composes declarations within one block. Reproduce the example and inspect the resolved style output. Done means the enabled tag resolves the text color from the later composition while preserving the other composed and local styles.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- scss, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100