Separate templates from CSS modules

[penx]

We currently tie our HTML templates to our CSS modules import/implementation. We want to make HTML templates usable by other CSS techniques at some point in the future - e.g.

• CSS classes only
• with CSS import
• with prebuilt CSS module
• with CSSinJS styled components
• with CSSinJS css function.

However, if you separate out the template from the CSS module import then:

• when a template uses another component, should it import the template component or css module component?
• when a subcomponent/element uses a class name, it needs to get this from the props of the parent component => either prop drill down or context api

Some work has been done to plan how this could be done:

• classNames prop
• elements prop
• components prop
• context api util or prop drilldown

However this is a large change are raises further questions

• if useing prop drill down, do we default styles object at every step? e.g. Radios.Label received classNames prop, if it's missing class name keys we expect, do we use defaults instead? Would say yes... Do we do this via a helper function or merging with defaults each time,? This makes simple arrow function elements a bit messier. Could just do a lookup at time of accessing classNames.hasOwnProperty("class") ? classNames['class'] : defaultClassNames["class"]

What is the smallest evolution we can make in this direction?

=> separate simple components only, i.e. those that don't import other components and don't have any/a lot of elements

=> separate elements in to individual files, pass down styles as a prop to these elements, don't separate template (or at least make css module the default), continue to import other components as css module version for now. Exported versions of elements need to be wrapped to pass down styles.

[penx]

This is too big a rabbit hole for this PoC so will likely be concentrating on a functioning, feature complete CSS modules version before tackling this!