Provide separate CSS / SCSS for individual components

[Tom Readings]

This package is really excellent, thanks.

I am initially implementing just a few components from this package, into an existing NHS site which already has its own styling (largely consistent, but implemented independently).

Though I foresee that the site will move closer to the the full design spec as set forward in the service manual, at present I need to extract just the styling that facilitates the individual components as I add them to the site.

The problem I have at present is that only a single, minimised CSS file is provided by the package. If I include this in the template as suggested, the global and element selector styling provided by the package will disrupt, or at least override, existing styles.

My present approach is to manually un-minify the CSS and separate out the components/selectors that I need, editing the resultant CSS to remove un-scoped element selectors (eg body, ol, ul, a). I then add that CSS (as SCSS partials) to the existing FE toolchain.

Is there a way that as well as the full minimised CSS, partials for the individual components could also be included, and/or the remaining rules (also in partials?) be scoped so that they do not apply universally?

I am not quite sure how the above would best be incorporated into a frontend toolchain (I would not be wanting to include multiple CSS files in the template), but at least I could be confident that I could update this package without having to go back through to separate and edit the css required for the components I am using (instead I could copy across the partials to overwrite).

I would be interested in any alternate solutions if I have missed a trick.

[Mike Monteith]

Thanks for opening an issue @tombola

We've had a similar problem on the www.nhs.uk site. We don't actually use the compiled CSS from this repo but we use a node-based frontend build step to compile the frontend library instead. (see https://github.com/nhsuk/nhsuk-frontend/blob/master/docs/installation/installing-with-npm.md#importing-styles)
This allows us to use compile from SCSS and add some custom stuff.

We've found that python doesn't have good enough frontend tools for our use-case so we didn't bother bundling any SCSS or python-based frontend build as this would be duplicating what we already have in the https://github.com/nhsuk/nhsuk-frontend repo.

Can I ask how your frontend toolchain is set up at the moment?

[Tom Readings]

Thanks Mike!

I am not sure how I managed to skip over the npm instructions in the README, we have an npm toolchain, it looks like that is definitely the way to go.

I will likely be able to close this issue once I have confirmed that this will allow me to integrate the component level CSS without affecting the rest of the site.