linkedin / linkedin/css-blocks

Feat: Multiple Inheritance

Open
#212 6 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

Hi 👋!

I think this project is really interesting and I was wondering, why is it that I can only extend a block once? I'm in a situation where I want to import 2 blocks.

```
@block-reference buttons from "../../styles/blocks/buttons.block.css";
@block-reference loading from "../../styles/blocks/loading.block.css";

:scope {
extends: buttons;
extends: loading;
}
...

Generates Error:

{ Error: [css-blocks] BlockSyntaxError: A block can only be extended once. (tmp/broccoli_css_blocks_analyze-output_path-Co5Mjhle.tmp/src/ui/components/.../stylesheet.css:6:3)
```

I think the guide may be a bit confusing because I just want to use classes from 2 different files in one file and I really don't know any way of doing that.

Here's my package.json (the relevant parts [I think?]):
```
"@css-blocks/ember-cli": "^0.20.0-beta.3",
"@glimmer/application": "^0.9.1",
```

Contributor guide

Open the contributing guide

Research direction

The issue names no files or tests. Start by locating the parser or validation path that emits “A block can only be extended once,” then trace how @block-reference and extends are represented. Done means the requested multiple inheritance behavior is defined and implemented with coverage for extending a block from both referenced files.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, typescript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.