Nested Property for nested rules/@rule

[notoriousb1t]

This PR aims to solve this issue #40 . If accepted, it should be considered a minor/major change since it breaks nesting selectors next to properties.

It adds the following "nested" property to allow nesting selectors:

style({
  nested: {
    '@media screen': {
        color: 'red'
     }
  }
})

It adds shorthands for simple pseudo-selectors so they can still be used without going into a "nested" property.

style({
    color: 'blue',
    '&:active': {
      color: 'red' 
    }
});

And adds several CSS Properties needed to compile and pass the existing tests

• Check that nested actually type checks Code used to work but doesn't in nightly microsoft/TypeScript#12584

[basarat]

It adds shorthands for simple pseudo-selectors so they can still be used without going into a "nested" property.

I feel like this will only result in confusing and difficult to debug errors. Although I did try to do the same (there were a few in NestedCSSProperties) I found people at work and in the wild e.g. https://github.com/staltz/matrixmultiplication.xyz/blob/8f1d761f5e49e2ccd92a1760b07ec6c7a72fbd9e/src/App/styles.ts#L39-L41 using all sorts of selectors with opinions on formatting ... more than the ones I used.

I'll remove that so there is only one way to do things without special cases being documented / maintained elsewhere.

it should be considered a minor/major change since it breaks nesting selectors next to properties.

This has been the biggest concern at the back of my head and the reason I didn't go with v1 yet. So happy to go v1 once we are settled on this :)

[notoriousb1t]

I can't argue with the pseudo-selector thing. I put that in there as an attempt to break as little code as possible, but I can see how it would be confusing if someone did that and expected '& > *' to work.

I also added a special function for fontFace since it has properties directly and some of them appear to be specific to declaring fonts.

[basarat]

I also added a special function for fontFace

Looks good. Thanks. Its a common enough task to deserve its function just like we have for keyframes 🌹

[basarat]

@notoriousb1t Just need a 👍 from you. I'll merge + deploy + write release notes + update website 🌹

[basarat]

Hmm.. It doesn't error on a typo still

edit sample:

style({
        nested: {
          '&:hover': {
            typo: 'red',
            backgroundColor: hsl(0, '100%', '50%'),
          }
        }
      });

[basarat]

Suspect TypeScript type system is getting confused by circular types. Will try and narrow down an issue report 🌹

[basarat]

I created an issue microsoft/TypeScript#12566 . Suspect the answer will be no.

Also had a discussion with colleagues at work and they prefer a nested() function as its easier to write without erroring

declare var style: any; 
declare var nested: any;

// A 
style({
    color: 'grey',
    nested: {
        '&:hover': {
            color: 'red'
        }
    }
})

// B
style(
    { color: 'grey' },
    nested('&:hover', {
        color: 'red'
    })
)

Had people struggle with A and they would write stuff like the following failing to manage brackets correct / and forgetting to write the selector.

style({
    color: 'grey',
    nested: {
       color: 'red'
    }
})

also we wouldn't need to teach people {nested:{[code]:style}} computed property syntax as nested(code,style) is something that people understand from ES5.

I'll work on that soon 🌹

[notoriousb1t]

There is no reason we can't do both 😉

function nested(code, props) {
   return {
      nested: {
         [code]: props
      }
   }
}

style(
    { color: 'grey' },
    nested('&:hover', {
        color: 'red'
    })
)

[basarat]

Will hold off till TS teams comes back on the error 🌹

[notoriousb1t]

Yeah. Trying to replicate CSS in a formal type system has resulted in some pretty interesting types. I think we might be pushing the boundaries a little bit here.

[basarat]

So the code we have works fine if strictNullChecks is false:

@vladima did the analysis microsoft/TypeScript#12584 and already posted a fix for strictNullChecks as well : microsoft/TypeScript#12595

@notoriousb1t I say we can merge this. Hurray for {nested:{'&:hover':obj}}. Thanks for your patience and standing your ground on excellent API design ❤️

[notoriousb1t]

Hurray! 😄

[basarat]

The changes are covered here : #43. Will try to wait for microsoft/TypeScript#12595 to be merged and think through anything else that needs to be done before 1.0 🌹