Is importing specific component styles still supported?

[SimonFinney]

The usage guidance describes importing specific component styles as the preferred method for importing styles:

@use "@carbon/react/scss/components/button";

@janhassel and I discovered cases where not all component dependencies are imported with their module. For example, Toggletip depends on Popover which is absent from its imports. Other cases include Layer and contextual layout tokens.

We assume these are slipping under the radar because currently only all the Carbon styles are imported for visual testing.

So... is this method still supported? If so, how might we catch these issues sooner?

[tw15egan]

I'm seeing part of the issue is because we are referencing --temp-1lh: (var(--#{$prefix}-body-compact-01-line-height), which can be undefined if there is not a :root level type import. Should we update this assignment to use a new function, like here, that can return a type-tokens line-height?

The layout tokens were also not added to the export files and weren't included in the build. I've got a PR up to fix this

https://stackblitz.com/edit/github-c7km3p-4rbsey?file=src%2Findex.scss,src%2FApp.jsx,src%2Findex.jsx

[SimonFinney]

layout tokens were also not added to the export files and weren't included in the build. I've got a PR up to fix this

🙏🏻 Awesome, @janhassel and I discussed this as a short-term workaround while this is discussed.

As a consumer, I wouldn't expect to have to understand the inner workings of a component and ensure I imported the correct dependencies for it (in the button's case contextual layout tokens for its padding):

// app.scss
@use "@carbon/styles/scss/layout";
@use "@carbon/styles/scss/components/button";

// App styles.

Part of the issue is because we are referencing --temp-1lh: (var(--#{$prefix}-body-compact-01-line-height), which can be undefined if there is not a :root level type import

I would propose to, either import scss/layout in components that depend on contextual layout tokens to ensure they're available in the :root:

// @carbon/styles/scss/components/button

@use "@carbon/styles/scss/layout";

// Other Carbon imports and styles.

// app.scss
@use "@carbon/styles/scss/components/button"; 

// App styles.

Or alternatively, provide a fallback for these values in the absence of the :root-level import, similarly to other tokens like theme and type.

[janhassel]

fyi: I opened a PR (#13984) to add these imports to the components relying on the layout module as well as providing a fallback for the type property token.

[tw15egan]

Thanks for the quick work Jan, we've pushed out 1.31.3 that includes your changes

[tay1orjones]

@tw15egan, @janhassel put up additional PR up here: #13984

@SimonFinney, yes importing specific component styles is supported. I've updated it to no longer stay "preferred" though. The e2e test file you referenced there is actually unused and should've been removed a while ago but was missed. The e2e setup used right now runs against the storybook. To test component styles in isolation we'd need to reconsider this approach. The implications of this would include:

• Setting up a new environment (in addition to the existing storybook one) for e2e testing component styles in isolation from one another
• Slower tests due to having to compile styles with sass for each test/component
• VRT snapshots are sent to percy - snapshotting individual component styles would potentially double the amount of snapshots we're using right now

[SimonFinney]

Yes importing specific component styles is supported. I've updated it to no longer say "preferred" though

Okay, great — thanks for clarifying this! 🙏🏻

To test component styles in isolation we'd need to reconsider this approach.

If it's helpful, I'm happy to explore and share approaches if the outcomes improve support for this method.

In the meantime, I can create issues and PRs when I notice something off.

[tay1orjones]

That sounds great, thank you!