nested selector

[lionelB]

Hello,

I wonder if there is a way to do something like

cssInJS({
  Title: {
     color: "red"
  },
  '$.my-webfont Title: {
      font-family: webfont'
   }
})

When dealing with async font loading, a common technique is to use a font-observer like https://github.com/bramstein/fontfaceobserver and decorate the body tag with specific classes once font are available.

[martinandert]

Hi Lionel, no that currently doesn't work, but it would indeed be nice to have.

Perhaps you have some time to implement it / submit a PR?

If so, what about changing the structure to

cssInJS({
  Title: {
     color: "red"
  },
  '$.my-webfont': {
    Title: {
      'font-family': 'webfont'
    }
  }
})

I think this way it's going to be simpler to parse.

[lionelB]

I'll try to add that support. I'm a beginner in babel plugin developpement, Do you have any resource to recommend that could help ?

[b6pzeusbc54tvhw5jgpyw8pwz2x6gs]

@lionelB As you know, there are some official guide in the language of many countries. refer plugin-handbook.md https://github.com/thejameskyle/babel-handbook

If I had enough time, I would definitely want to add it. I'd like to help you with writing some test case or something need help.

[lionelB]

@b6pzeusbc54tvhw5jgpyw8pwz2x6gs I just read it :)

What can help me dive in, could be a brief overview of each file and its role in the babel plugin (analyse, transform, generate) but I will try to open a PR with some failing test first :)