search

martinandert / babel-plugin-css-in-js

A plugin for Babel v6 which transforms inline styles defined in JavaScript modules into class names so they become available to, e.g. the `className` prop of React elements. While transforming, the plugin processes all JavaScript style definitions found and bundles them up into a CSS file, ready to be requested from your web server.
MIT License
298 stars 11 forks source link

Is there any support for sub-selectors currently? #23

Closed dkwingsmt closed 7 years ago

dkwingsmt commented 7 years ago

Hello, I wonder if subselectors are supported at the moment, since either of following syntax seems to throw syntax errors,

// Either 
const classes = ({
  'wrapper title': {
    margin: 1,
  }
})

// Or
const classes = ({
  'wrapper': {
    'title': {
      margin: 1,
    }
  }
})

Despite the second syntax being a SASS style and might not be the focus of this project, the first syntax actually belongs to CSS syntax and is quite useful, or actually irreplaceably necessary, in practice.

martinandert commented 7 years ago

Hi @dkwingsmt,

your first syntax example should actually work.

Something like this:

var styles = cssInJS({ 
  foo: { 
    marginTop: 10
  }, 
  'foo p': { 
    color: 'red' 
  } 
});

will get transformed to this:

var styles = { 
  foo: 'test-foo', 
  foo p: 'test-foo p' 
};

an that CSS:

.test-foo {
  margin-top: 10px;
}
.test-foo p {
  color: red;
}
martinandert commented 7 years ago

Oh wait! That foo p key in the transformed styles object actually is invalid syntax and throws a "SyntaxError: Unexpected identifier". Is that also the exception you are getting?

dkwingsmt commented 7 years ago

I think so. I do remember seeing an "Unexpected identifier" error in some cases, not clear if it was this one. Will check tomorrow if needed.

martinandert commented 7 years ago

Will check tomorrow if needed.

Yeah, please do.

dkwingsmt commented 7 years ago

Yes, that's what I got.

martinandert commented 7 years ago

@dkwingsmt The syntax error got fixed in v1.4.1. So your first example above should now properly work. Please check.

I also plan to support for your second proposal (subselectors inside the class name spec) soon.

dkwingsmt commented 7 years ago

Wow that sounds like a great news. Thank you.

By the way, in your test case, p being not localized is a little unexpected to me. Well, it doesn't matter if you will implement my second proposal.

martinandert commented 7 years ago

By the way, in your test case, p being not localized is a little unexpected to me.

What do you mean with "p being not localized"?

dkwingsmt commented 7 years ago

Never mind. I've tested it today and it really works well. Thank you, and looking forward to it. :)