linkedin / linkedin/css-blocks

Composes should cascade within a block

Open
#475 0 comments 0 reactions 0 assignees View on GitHub
@css-blocks/core
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.