RFC: Expose interface for custom CSSObject declaration

[tpict]

What:

Modifications to @emotion/serialize/types so that the user may specify a custom CSSObject declaration in preference to the default.

Why:

• To allow users to constrain what styles may be applied at any leaf in their React tree
• To allow users to opt-out of arbitrary CSS selectors etc

How:
The existing CSSObject is renamed to DefaultCSSObject. A new, empty interface named CustomCSSObject is added. Finally, a new type named CSSObject is exported that takes the value of CustomCSSObject is it's provided, otherwise DefaultCSSObject. Users can augment CustomCSSObject in their project to override the value of CSSObject globally. This shouldn't have any impact on users who don't provide their own declaration.

Checklist:

• Documentation
• Tests
• Code complete
• Changeset

I'm not sure if/how this can be tested without splitting dtslint into two stages, since declaring a CustomCSSObject anywhere changes the value globally. Feedback appreciated!

[changeset-bot]

🦋 Changeset detected

Latest commit: 5b691b6

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 5b691b6:

Sandbox	Source
Emotion	Configuration

[Andarist]

Please describe what issue this tries to solve.

[tpict]

The issue is the difficulty of enforcing design constraints in a large-scale React application where styles can be freely applied to any component. This change would allow design constraints to be enforced at compile time. For example, if my designer prescribes a palette of 12 colors only, any violations of that constraint could be reported in CI.

It would be useful even for ad-hoc styling. CSSType has certain limitations. The README describes how to work around missing properties, but missing values are a possibility too:

// this results in a TS2322 error
<div css={{ fontWeight: "var(--verybold)" }}>
  Hello world
</div>

Of course you can work around this on a case-by-case basis, but that gets pretty tiresome, and there's no autocomplete hint for values that are implicitly valid in your environment.