Using static transformer for npm packages that use Glitz

[lindelleric]

Problem

• Using glitz in an npm package, where the code is transpiled before it's published, prevents the use of the static transformer.

Predicates

• Each package can only be transpiled once.

  • This means that whatever the classNames are set to, by the transformer, will be the ones that are used when the package is installed and used.

• Since each package is compiled separately, each instance of the static transformer have no information about the classNames that are generated by the other static transformers.

  • So each static transformer should maintain a separate and isolated namespace of classNames to avoid pollution.

Proposed solution:

• Transpile the package, that uses glitz, with the static transformer.
• Add a mechanism for generating classNames that are unique to that package (like prefixing with package name or with an uuid). This should maybe be configurable.
• Each package will export it's own static file. It can be a css-file or some json structure which might be easier to consume later on.
• Merge and deduplicate each static.css/.json file into one main static.css. This should be done during the build of the main web app. The resulting main static.css file will be the one that is served to the client. The deduplication of css properties is technically optional, but advisable in the spirit of atomic css.

The resulting static.css file might look something like this.

...

.a, .package-1-a, .package-2-z, .package-3-b {
  background-color: red;
}

...

Where the initial className, "a", comes from the main web app.

Responsibilities?

Then there is a discussion about who is responsible for what eg:

• [Glitz] Add support for the static transformer to add a prefix to the classNames.
• [Project that consumes glitz] Collecting each generated static.css/.json from the packages. Since the build system for each project can look a lot different.
• [Glitz] Allow the input of multiple pre-generated static.css/.json files to be merged, and deduplicated, into the resulting static.css file.