linkedin / linkedin/css-blocks

Implement Class Composition

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

Contributor guide

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.