Style bindings? CSS as a type system and type checking props

[d3dc]

Maybe the conventions should more closely mirror that of Typescript declaration files...

Your react components have the same semantic objects as BEM almost exactly. We can add prop-types information to wrapped stylesheets by parsing the unique class identifiers. <block>__<element>--<modifier>-<value>

The library could do this when using css modules and blocks (#2). But this would happen at runtime.

It should be possible to add a webpack plugin or babel macro that "type checks" the props passed to Box and Comp.

I haven't fully thought this through, what else needs to be considered?

[d3dc]

Question I have right now:

• A babel macro seems like a natural fit... but does it resolve css modules at compile time? They would have to be webpacked first...

• should it be a part of the style loading stack? postcss? Instead of a css module you'd get a wrapped one (#2)

  • postcss makes directives easy
  • postcss makes prop-types hard

---

• How do you make library "declarations" explicit? e.g. feature-module.d.css ... feature-module.c.js

• What would style declarations look like?

Build off CSS nesting spec or sass?

[d3dc]

This is the spec I'm tinkering with for writing modules:

.feature-namespace {
  @element element {
    @prop static {
       ...
       @variants hover, tablet {
          ...
          @option sm {
             ...
           }
          @option md {
            ...
           }
          @option lg {
            ...
           }
       }
    }
    @prop generated {
       height: @logRange 0.25rem, 16rem;
    }
  }
}

I wonder if having directives to recreate "tailwind style" modifiers (@logRange) is necessary. It does make it obvious and simple when you are defining something like height

variants are also a weird functionality in definition twist.