Reconsider the API for interpolation

[basarat]

I can understand if this should be closed as it can be done in userland quite easily. Neverthless I wanted to leverage your opinion on something like the following for interpolation :

interface NestedCSSProperties extends CSSProperties {
  /** Interpolated */
  '&'?: {
    [selector: string]: NestedCSSProperties;
  }
}

Example:

{
  'color' : 'red',
  '&': {
     ':focus': SomeCSSProperties
  }
}

The current implementation is not amenable for typing:

interface NestedCSSProperties extends CSSProperties {
  /** States */
  '&:hover'?: NestedCSSProperties;
  '&:active'?: NestedCSSProperties;
  '&:disabled'?: NestedCSSProperties;
  '&:focus'?: NestedCSSProperties;

  /** Children */
  '&>*'?: NestedCSSProperties;
  '&:first-child'?: NestedCSSProperties;
  '&:last-child'?: NestedCSSProperties;

 /** Others like nth-child cannot be helped :-/ */
}

Again, thanks for being so awesome :rose:

[blakeembrey]

Briefly, the nice thing about interpolation today is it's free-form and doesn't force a user into building components a specific way. For instance, I can do a selector like .featured-post & to interpolate the current selector and change the current style based on a classname on the body, etc. Although not the recommended approach, it's quite useful in places (I imagine it'd mix well with existing codebases also, plus tools like https://modernizr.com/ which add classes for you based on feature support).

Based on this, I don't think it's possible to do things like that - unless we treat & keys as every child is interpolation without a space. The benefit of this is missing from me though.

Why couldn't every other selector just be this? I think TypeScript should provide the autocompletion anyway once it sees that it's not an array or primitive. If it doesn't, that might an enhancement request, but I'm pretty sure it does 😄

[selector: string]: undefined | number | string | (number | string)[] | NestedCSSProperties

Is there any other goals, other than simpler auto-completion?

[basarat]

[selector: string]: undefined | number | string | (number | string)[] | NestedCSSProperties

Works like a charm! Thanks :rose:

[basarat]

other than simpler auto-completion?

Also error reporting. Thought I'd mention :rose:

Thank you for making my life so much easier :heart: