search

daniel-ac-martin / NotGovUK

An implementation of the GOV.UK Design System in React that provides support for writing internal applications in addition to public ones.
https://not-gov.uk/
MIT License
27 stars 8 forks source link

Package components with webpack? #266

Open daniel-ac-martin opened 2 years ago

daniel-ac-martin commented 2 years ago

We currently package the components with just the TypeScript compiler. This means that you need webpack to consume the components as we import the .scss files. We should probably do something more advanced to offer more options to users.

Typically rollup would be used for this task but perhaps we can just use webpack as we already have it in the applications and we might be able to re-use config.

daniel-ac-martin commented 2 years ago

A very simple example of this: https://github.com/andypotts/components-library-template

daniel-ac-martin commented 2 years ago

I'd expect we want at least two different builds:

  1. ES6 module with reference to .scss file (for consumption via webpack)
  2. CommonJS module with no reference to SASS (for consumption via Node.js and also SASS separately)
daniel-ac-martin commented 2 years ago

Alongside this, we should also think about whether we can use CSS modules, somehow. (Doing so would give us compatibility with Next.js.)

penx commented 2 years ago

If it helps, I started working on a CSS modules version of govuk-react here

https://github.com/penx/govuk-frontend-react

I was waiting for https://github.com/alphagov/govuk-frontend/issues/460 to be resolved in order to fully see through the vision on this. This was recently marked as closed, but as per my comment I'm not sure the issues have been fixed due to fixtures still passing through class names.

daniel-ac-martin commented 2 years ago

Useful links:

daniel-ac-martin commented 2 years ago

Thanks @penx. I'll take a look.

My current (very early) thinking on CSS modules is that I'd like to have a noddy implementation that somehow preserves GDS's class names. (From what I've seen of CSS modules, you get a random class-name.) That might be completely unrealistic though.

daniel-ac-martin commented 2 years ago

A lot of the repo's using rollup for this task, will automatically insert CSS into the <head>. I don't think that's a great solution as we should allow our users to bundle up the SCSS code into a cachable static asset.