[Bug]: @use no longer works for importing style sheets

[finken2]

Application/Team

IBM Cloud Satellite

What happened?

We were previously using @use '@carbon/charts/styles' with @carbon/charts 1.6.14, but this isn't working with newer version. I've tried many variations with 1.15.7 and can't get any of them to work.
@import '@carbon/charts/styles.css'; does work, but i'd prefer to use @use if possible.

SassError: Can't find stylesheet to import.
  ╷
4 │ @use '@carbon/charts/styles';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  client/scss/app.scss 4:1  root stylesheet
SassError: SassError: Can't find stylesheet to import.
  ╷
4 │ @use '@carbon/charts/styles';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  client/scss/app.scss 4:1  root stylesheet
    at Object.loader (/Users/edwardfink/containers/satellite-ui/node_modules/sass-loader/dist/index.js:56:14)

Version

@carbon/charts 1.15.7

Data & options used

No response

Relevant log output

No response

StackBlitz example

No response

What priority level would this be in your opinion?

P3

[nstuyvesant]

@finken2 - what bundler are you using?

What happens if you do...

@use '@carbon/charts/scss'

or

@use '@carbon/charts/scss/index.scss'

[finken2]

We're using webpack. The first one fails the same way, but the 2nd one does work. A little weird to need to the index.scss there, but at least it works. I tried like 100 different approaches, and i swear that was one of them, but who knows. Thanks for the suggestion.

I started this conversation on Slack by asking "what's the recommended way to load styles in 1.x?" and was directed to open an issue. We should get the docs updated to whatever the expected working approach is. I doubt i'm the only one who got tripped up by the change between versions.

[nstuyvesant]

Webpack is finicky about resolving paths and it's unfortunately not good at using the modern conventions for package.json exports.

There is a new docs website in a PR under review. I just added the reference for this file to it.

BTW... if you have an option to use vite instead of webpack, I think you'll find it's faster and requires less configuration.

[crhuff-ibm]

To add on to this, I'm trying to install just @carbon/charts-react and not both /charts and /charts-react. When installing the charts-react styling using @import '@carbon/charts-react/styles.css'; it works but again, the goal is to use use not import.

I think the issue here may come from having the exports mapping to the dist/ directory, because in our component library we bundle and ship the styles.css file without being explicit on exports, and are able to use @use '@our/package/styles' and don't have to specify .css or import

[crhuff-ibm]

We also can't re-write our entire bundler just to solve this one issue.

Additionally, looking at the docs out right now it includes the following for Getting started

import { StackedBarChart } from '@carbon/charts-react'
import '@carbon/charts-react/styles.css'

We can't really be expected to import .css files directly into our code in 2024 and not put into our styling tree right?

[nstuyvesant]

To add on to this, I'm trying to install just @carbon/charts-react and not both /charts and /charts-react. When installing the charts-react styling using @import '@carbon/charts-react/styles.css'; it works but again, the goal is to use use not import.

I think the issue here may come from having the exports mapping to the dist/ directory, because in our component library we bundle and ship the styles.css file without being explicit on exports, and are able to use @use '@our/package/styles' and don't have to specify .css or import

Only @carbon/charts publishes the SCSS unfortunately so if you want to use @use with an SCSS file, you would need to do

@use '@carbon/charts/scss/index.scss';

There are two exports in package.json for the same file. See https://github.com/carbon-design-system/carbon-charts/blob/master/packages/core/package.json#L13 (and line 14).

The @carbon/charts package.json has no SCSS exports pointing to the dist directory - only CSS.