guardian / guardian/dotcom-rendering

Split CSS in `TextBlockComponent` into element specific chunks

Open
#11,978 0 comments 0 reactions 0 assignees View on GitHub
Pick me up Team Candidate: WebX
Dominant language
TypeScript
Stars
274
Forks
34
Avg merge
2d 22h
Merged PRs (30d)
121

Description

In `TextBlockComponent` styles are passed all together for all elements:

https://github.com/guardian/dotcom-rendering/blob/810053789c322c946553ba4a3bed907e7c57c627/dotcom-rendering/src/components/TextBlockComponent.tsx#L161-L233

even though we are parsing the DOM and building the tree element by element:

https://github.com/guardian/dotcom-rendering/blob/810053789c322c946553ba4a3bed907e7c57c627/dotcom-rendering/src/components/TextBlockComponent.tsx#L235-L351

This ticket is to split the big `styles` function into smaller ones and pass only the CSS needed for each element.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.