Bundle design-tokens and webcorestylesheets with auro components

[B-E-A-F]

Is it possible to bundle all of the css required for a component with the component itself?

Starting a project that uses auro I have to

• Install design-tokens
• Install webcorestylesheets
• Install components (and any other components that the component relies on)
• Setup my scss variable imports so that the styles are accessible to the auro components

Is it possible to make it so that components have access to the styled variables they need without having to rely on a dependency of design-tokens and webcorestylesheets? It would be amazing if we could be in a position where using auro was just a matter of:

• Install components (and any other components that the component relies on)
• install design-tokens / webcorestylesheets when I need to access colors/fonts/variables

[blackfalcon]

Hi @ArcherScript

The issue with your proposal is a maintenance problem. Due to the fact that all Auro components are using the ShadowDOM, installing all the tokens and CSS in with a component means a lot of duplication and when there are updates to either tokens or WCSS, then each element needs to be updated individually.

The process as it exists today, when tokens and WCSS are updated, teams are only required to update those versions of the dependencies. The file references will be the same. No other component will require an update.

Additionally, there is a side-effect of installing all the CSS in the web component unless it is fully server-side rendered. There will be a moment of unstyled content.

Design tokens and WCSS should be listed as peer dependencies for all Auro components. As of npm@7 (released 2020/Node 14) npm should auto-install these peer dependencies.

  "peerDependencies": {
    "@aurodesignsystem/design-tokens": "^4.3.0",
    "@aurodesignsystem/webcorestylesheets": "^5.0.8"
  },

Just FYI, using Tokens and WCSS for base install doesn't require Sass. You can reference the following files once in your app primary HTML template. This is only required to be set up once. Sass does not require that CSS custom properties are installed in the Sass files for processing.

1. /dist/tokens/CSSCustomProperties.css
2. /dist/bundled/essentials+fv.css

Everything after those baseline files will be contained within the web component. Other Sass files are à la carte to fit your app's needs.

Proposal

All this being said, there is a proposal for adding these types of CSS files to an outer-most wrapping element, but we still have the flash of unstyled content issues unless you are fully server-side rendering a first pass of the UI. Full ESM compatibility is something that the team is working on. https://github.com/orgs/AlaskaAirlines/discussions/502

[B-E-A-F]

Thanks for the detailed explanation. I think I'm understanding it now, just one more follow up question:

Is it possible to just build the styles the individual component needs into raw css, or will you still get the flash of unstyled content? I think that this would change the idea from peer dependency to a dev dependency of design tokens and WCSS.

[blackfalcon]

The styles for each component are within the scope of the shadow DOM. To do this we process the Sass to a .js file that you can see here.

This JS file is imported here, then added to the scope of the component class here.

We use peer dependencies versus nested dependencies to allow consumers granular control over their dependencies and versions. The truth is that npm is messy and if tokens and WCSS were always nested dependencies there is always a chance that multiple versions would be listed. Deployments should always perform an npm ci, but with local dev, you can't count on that and bugs have been reported that were mainly local environment issues, not code issues.

Hope this helps.