Create-React-App cannot use this repo's components

[amaury1093]

I was trying to import Page into a dapp created with CRA.

Problem

Components imports styles with className={styles.someClass} (Css modules syntax), and CRA dapp directly imports these components (i.e. there's no processing on styles). However CRA doesn't support Css modules, except via 1/ a :local(.someClass) hack that is not widely accepted or 2/ an ongoing PR. Which means, as of today, CRA dapps cannot use this repo.

Solution: Process the CSS in this repo

The idea is to have this repo spitting plain CSS as an output.

I dug into this direction a bit by installing babel-plugin-css-modules-transform, and then a SASS preprocessor, but then more errors came out about not being able to import fonts, so gave up. Ultimately it could work.

Basically if we go this way, we would have to do in the dapp:

Either a/ Simply do

import Page from '@parity/ui/lib/Page';

and this will internally do a require('./Page.css) which will ultimately be processed by CRA. In this case only the strict minimum CSS will be imported when we import a component.

This is the ideal solution, but not sure if possible yet (PR going on... maybe try with webpack?)

Or b/ Let this repo output one huge minified CSS file, and at the beginning of our dapp we could

import '@parity/ui/lib/parity.css';

// Later
import Page from '@parity/ui/lib/Page'; // No need to import CSS anymore here

This would be more in the direction of #4.

Between a/ and b/ I would go with a/, more modular.

Note: Use vanilla CSS directly in this repo

We could of course use vanilla CSS directly in this repo className="some-class", and use "semantic" class names exactly like SUI. However I think there'll be conflicts with dapps' own classNames, so I wouldn't recommend me.