linkedin / linkedin/css-blocks
Implement Class Composition
- Dominant language
- TypeScript
- Stars
- 6.3k
- Forks
- 154
- PR merge metrics
- No merged PRs in 30d
Description
We require a syntax that enables class composition between blocks, similar to SASS mixins, but without duplicating declarations. For example:
### Input:
```css
/* elevation.block.css */
.elevation-2dp {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .55);
}
```
```css
/* modal.block.css */
@block-reference elevation from "elevation.block.css";
.root {
apply: "elevation.elevation-2dp";
position: fixed;
width: 800px;
padding: 10px;
}
```
```hbs
{{! modal.hbs }}
```
---
### Output:
```css
.elevation__elevation-2dp {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .55);
}
.modal {
position: fixed;
width: 800px;
padding: 10px;
}
```
```hbs
{{! modal.hbs }}
```
Contributor guide
Research direction
Start by studying the examples in elevation.block.css, modal.block.css, and modal.hbs, then locate the parser or compiler entry point that handles these inputs. Done means the shown composition syntax produces the requested CSS without duplicated declarations and adds elevation__elevation-2dp to the rendered modal class list.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, handlebars, typescript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100