SyntaxError: Unexpected character '#' -- When an ID is the first selector inside the <style>.

[trusktr]

I have a file that contains this:

import jss from 'src/lib/jss'

let style = <style>
  #navbar-logo{
    margin-top: -4px;
  }

  .register-button:hover{
    color: white;
    -webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75);
    box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75);
  }

  #permission-disclamer{
    font-size: 10px;
    color: grey;
  }

  /* Custom, iPhone Retina */
  @media only screen and (min-width : 320px) {
    #permission-disclamer{
      width: 278px;
      margin: 0 auto;
      margin-top: 20px;
      text-align: center;
    }
  }

  /* MD Medium Devices, Desktops */
  @media only screen and (min-width : 992px) {
    #permission-disclamer{
      width: 278px;
      margin-left: 6px;
      margin-top: 10px;
      text-align: left;
    }
  }
</style>

jss.createStyleSheet(style, {named: false}).attach()

and when I compile (Webpack with cssx-loader) I get the error:

./src/register/register/register.css.js
Module build failed: SyntaxError: Unexpected character '#' (22:4)
    at Parser.pp.raise (/Users/trusktr/src/refuel4+sme-onboarding/node_modules/cssx-transpiler/lib/cssx-transpiler.js:1636:14)
    at Parser.getTokenFromCode (/Users/trusktr/src/refuel4+sme-onboarding/node_modules/cssx-transpiler/lib/cssx-transpiler.js:5649:13)
    at fallback (/Users/trusktr/src/refuel4+sme-onboarding/node_modules/cssx-transpiler/lib/cssx-transpiler.js:8202:27)
    at Parser.getTokenFromCode (/Users/trusktr/src/refuel4+sme-onboarding/node_modules/cssx-transpiler/lib/cssx-transpiler.js:8211:19)
    at Parser.readToken (/Users/trusktr/src/refuel4+sme-onboarding/node_modules/cssx-transpiler/lib/cssx-transpiler.js:5268:22)
    at Parser.<anonymous> (/Users/trusktr/src/refuel4+sme-onboarding/node_modules/cssx-transpiler/lib/cssx-transpiler.js:4303:21)
    at fallback (/Users/trusktr/src/refuel4+sme-onboarding/node_modules/cssx-transpiler/lib/cssx-transpiler.js:8139:27)
    at Parser.<anonymous> (/Users/trusktr/src/refuel4+sme-onboarding/node_modules/cssx-transpiler/lib/cssx-transpiler.js:8143:41)
    at Parser.readToken (/Users/trusktr/src/refuel4+sme-onboarding/node_modules/cssx-transpiler/lib/cssx-transpiler.js:3327:23)
    at Parser.nextToken (/Users/trusktr/src/refuel4+sme-onboarding/node_modules/cssx-transpiler/lib/cssx-transpiler.js:5257:22)
    at Parser.next (/Users/trusktr/src/refuel4+sme-onboarding/node_modules/cssx-transpiler/lib/cssx-transpiler.js:5169:13)
    at Parser.lookahead (/Users/trusktr/src/refuel4+sme-onboarding/node_modules/cssx-transpiler/lib/cssx-transpiler.js:5210:13)
    at Parser.parseBlock (/Users/trusktr/src/refuel4+sme-onboarding/node_modules/cssx-transpiler/lib/cssx-transpiler.js:8109:85)
    at Parser.pp.cssxParseElement (/Users/trusktr/src/refuel4+sme-onboarding/node_modules/cssx-transpiler/lib/cssx-transpiler.js:8346:32)
    at Parser.<anonymous> (/Users/trusktr/src/refuel4+sme-onboarding/node_modules/cssx-transpiler/lib/cssx-transpiler.js:8086:26)
    at Parser.parseStatement (/Users/trusktr/src/refuel4+sme-onboarding/node_modules/cssx-transpiler/lib/cssx-transpiler.js:3202:23)
    at Parser.pp.parseBlockBody (/Users/trusktr/src/refuel4+sme-onboarding/node_modules/cssx-transpiler/lib/cssx-transpiler.js:2560:22)
    at Parser.pp.cssxParse (/Users/trusktr/src/refuel4+sme-onboarding/node_modules/cssx-transpiler/lib/cssx-transpiler.js:8309:11)
    at Parser.parseExprAtom (/Users/trusktr/src/refuel4+sme-onboarding/node_modules/cssx-transpiler/lib/cssx-transpiler.js:8219:26)
    at Parser.pp.parseExprSubscripts (/Users/trusktr/src/refuel4+sme-onboarding/node_modules/cssx-transpiler/lib/cssx-transpiler.js:647:20)
    at Parser.pp.parseMaybeUnary (/Users/trusktr/src/refuel4+sme-onboarding/node_modules/cssx-transpiler/lib/cssx-transpiler.js:627:20)
    at Parser.pp.parseExprOps (/Users/trusktr/src/refuel4+sme-onboarding/node_modules/cssx-transpiler/lib/cssx-transpiler.js:558:20)
 @ ./src/register/index.js 3:0-34

[trusktr]

Does CSSX support that media query?

[trusktr]

Works when I remove the # symbols, as in

  /* Custom, iPhone Retina */
  @media only screen and (min-width : 320px) {
    permission-disclamer{
      ...
    }
  }

  /* MD Medium Devices, Desktops */
  @media only screen and (min-width : 992px) {
    permission-disclamer{
      ...
    }
  }

[trusktr]

As a workaround, I was able to just use a class instead, with the ., which works.

[krasimir]

@trusktr yep, you hit a bug. It looks like the transpiler didn't understand selectors inside a media query that start with #. Have no idea how I missed that. I'll fix it I hope soon. I'll let you know.

[trusktr]

Cool. No rush in my case, as the workaround was easy.