feat: new CSSDirective design

[EisenbergEffect]

Pull Request

📖 Description

This PR implements a new design for CSSDirective that matches the new HTMLDirective API. The changes are as follows:

• Decouples directives and behaviors.
• Directives can now add 0-N behaviors when they generate CSS.
• createCSS() now receives a method for adding behaviors.
• Base classes removed for directive. Everything is based on interfaces and registration now.
• Directives are now registered with CSSDirective.define API
• You can also decorate a class to register it as a directive with @cssDirective
• cssPartial is now optimized so that it doesn't need to add itself as a behavior unless it is composing ElementStyles. This means that partials that compose design tokens should perform better.
• cssPartial is changed to css.partial to reduce import count

Examples

Here's an example of the most basic CSSDirective:

@cssDirective()
class HelloWorldDirective implements CSSDirective {
  createCSS() {
    return "color: red";
  }
}

// alternative to the decorator
// CSSDirective.define(HelloWorldDirective); 

Here's an example that adds behaviors:

@cssDirective()
class HelloWorldDirective implements CSSDirective {
  createCSS(add: AddBehavior) {
    add(someBehaviorInstance);
    return "color: red";
  }
}

🎫 Issues

This is the second half of and completes #5799

👩‍💻 Reviewer Notes

This one is much less destructive than the HTMLDirective change. Only a few places are affected by the work. One additional change I made was to change cssPartial to css.partial` to reduce the number of imports when working with CSS. Not sure what folks think about this. I like it but I can revert this change if other folks don't.

📑 Test Plan

Existing tests updated and passing against the new APIs.

✅ Checklist

General

• I have included a change request file using $ yarn change
• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

⏭ Next Steps

I think this completes the work on directive APIs.

[chrisdholt]

I like the ergonomic of ‘css.partial’; setup to be an extensible pattern if need be too, which is nice.

[KingOfTac]

Although I really like the new api for partials, it may be a good idea to still export cssPartial as an alias of css.partial and mark it as deprecated to help ease migrating to the new version.