How to expose style guide to in-repo addon and engines

I am working on a project where we have a style guide that we are trying to make available to our ember app. The app has a couple of in-repo engines and an I am creating an in-repo addon that will contain shared components.

My first thought was to add the style guide to the shared addon and make the styles accessible to the host app, the engines, and the components in the shared addon.

We are using ember-cli: 3.1, ember-cli-sass, ember-css-modules, ember-css-modules-sass.

Can someone point me in the right direction on this? Is this even possible?

Could you make it an external addon? if so, you can see what we’re doing in ember-styleguide.

1 Like

What kinds of things need to be consumed by the host app/engines/component addon from this new styleguide? More than CSS?

A lot of times styleguides include shared components, including all their JS/HBS/CSS, and sometimes even services (latter is less likely, IMO).

Another Addon seems best here, either in-repo or external.

Hi Mel, We started with an external repo, but the push is to turn it into an in-repo addon. There are some issues with surfacing component styles (I think it has to do with ember-css-modules) - if I can fix that, that would be a great step forward.

Correct, basically what @localpcguy described. I am moving services to the consuming app, but trying to expose components (including css) through the in-repo addon.

Even as an external addon, the styles still aren’t being recognized. I think it has to do with ember-css-modules, although when I look through the broccoli build files, I see that the hashed styles are in the cssmodules-output_path to the funnel-output_path then get lost. Still trying to wrap my head around broccoli…

The ‘styleguide’ is a design pattern library that uses foundation.