Point style field to built css

[koddsson]

Hey! 👋

I want to be able to import primer packages like this in my project:

import 'primer-alerts'

and have it setup to import the file set in the style field in my project for primer packages but in a lot of packages it points to the SASS file and I much rather have it point to the built CSS so I don't have to compile it myself.

/cc @primer/ds-core

[josh]

🤔 I could see some people wanting the SCSS version so they can access variables.

Is there some convention for specifying these both separately so the build tool will use the appropriate one? Like JS has main and module for ES5 vs ES6+.

[koddsson]

Is there some convention for specifying these both separately so the build tool will use the appropriate one? Like JS has main and module for ES5 vs ES6+.

If there isn't we can probably make our own with something like "style:css" and "style:scss" and then fish out the fields we want in the build process.

[josh]

To add some additional context, I was experimenting with webpack's style importing and noticed the full path had to be used.

import styles from "primer-buttons/build/build.css";

https://gist.github.com/josh/e93fc4491e327307cd0ac1681e7d7066

[muan]

For reference: Bootstrap uses sass and style. Also found a few others using *.scss as main.

[broccolini]

We discussed this at our last sync, and are going to address this in the next minor release because we didn't want to add more changes to v10 (shipping today). On a quick look it seems that pointing style to the built CSS is popular, but we agree providing a key for the scss makes sense too, so we'll do some more research but main and sass seem like sensible suggestions.

[broccolini]

Thanks @koddsson! Going to merge this in for Primer 10.2 and will add another option for the Sass.