Include styled child component's CSS

[dan-searle]

When we have one x-dash styled component dependent on another x-dash styled component, how do we include the styles of the child?

The x-timeline-feed component has x-teaser and x-article-save-button as child components. x-teaser isn't a problem because it doesn't have styles of its own, but x-article-save-button does have its own styles.

How can I make x-timeline-feed include x-article-save-button's styles itself?

[i-like-robots]

I'll start by stating that this isn't a new issue. Styles for FT.com are distributed across different programmes, teams, repositories, and package managers so when a component needs to use the styles of another there is not currently a single correct answer.

If components distribute CSS files then we could rely on our optimisation steps to remove duplicate declarations, but this changes the cascade as authored which can (and has!) lead to bugs.

If components distribute Sass files they may implement a mechanism to try and only output the code once. This is similar to silent mode implemented by Origami components (which will switch silent mode on after being used) or n-ui-foundation's applied but these mechanisms lack robustness, require context to be shared between all stylesheets being compiled, and are incompatible with @import-once style functionality should we ever want to use that.

The most reliable solution I can think of for now is to include the instructions for importing the styles of the sub-component in the parent-component's readme.

EDIT: If you mean how can you load them in when developing using Storybook, hmm... possibly don't. If we're going to encapsulate components effectively then perhaps it could be left to the eventual implementer to provide the sub-components as arguments and your demo only render placeholders.