Helper Classes

[receter]

If a component is not more than styles that are applied to a html element, it should be a helper class instead. This ensures that the simplicity is visible on the surface and makes it easy for example to use a different html element.

Helper classes are variables that hold a CSS module class name. All helper classes are prefixed with class like classButtonGroup.

Each helper class is defined in a separate .module.css file so it will be automatically tree shaken if it is not used. Similar classes can be grouped in one module file. But it must be noted that all code in the file will end up in the consuming application if only one class of the file is used.

For the tree shaking to work it is important that in the library main file lib/main.ts the css module class names are imported indirectly.

This means that instead of:

// main.ts
// This approach would not work: The "test.module.css" file would be included in the bundle regardless of whether the "Test" class is imported in the consuming application or not.
import test from "./helperClasses/test.module.css";
export const classInlineIcon = inlineIcon.inlineIcon;
export const classTest = test.test;

We do this:

// main.ts
export { classTest } from "./helperClasses/test";

// helperClasses/test/index.ts
import styles from "./styles.module.css";
const classTest = styles.test;
export { classTest };