linkedin / linkedin/css-blocks

Update `addStyle` and `addExclusiveStyle` Interface

Open
#33 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

@css-blocks/core
Dominant language
TypeScript
Stars
6.3k
Forks
154
PR merge metrics
No merged PRs in 30d

Description

Problem

Currently, style correlation methods on Analysis objects expect analyzers to pass the exact BlockObject they wish to add. This forces analyzers to look up block references and pushes a lot of standard error catching logic into the analyzers, complicating analyzer implementation.

Solution

By updating addStyle and addExclusiveStyle to accept the parent Block, and string representations of child BlockObjects to add, block lookup and error throwing can happen in css-blocks core, further simplifying analyzer implementations.

Example

addStyle(block, ".foo", true);
addExclusiveStyle(block, true, ".foo[state|bar]", ".foo[state|baz]");

Issues

Analyzers will have to translate discovered classes and attributes into well-formed selector strings. This string formatting may be unpleasant and result in a lot of boilerplate code. We may consider instead exposing a BlockObject lookup API on Blocks that will throw a helpful error if the block doesn't exist. This removed error checking from the Analyzers, but still provides them a programmatic interface for accessing and passing blocks around.

addStyle(block.getClass("foo", locInfo), true); // Will throw if "foo" is not a class on `block`
addStyle(block.getClass("foo", locInfo).getState("bar"), true); // Will throw if "foo[state|bar]" does not exist on `block`

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the Analysis methods addStyle and addExclusiveStyle and the Block lookup APIs described in the issue. Review how analyzers currently pass BlockObjects and handle lookup errors, then decide which proposed interface is appropriate. Done means the selected interface is implemented in css-blocks core and analyzer usage no longer requires duplicated lookup or error-handling logic.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.