Add failing test for 'toString' on media queries

[markdalgleish]

I seem to have found a bug when calling toString on style sheets with media queries.

I'm not sure yet how to fix this, but I figured I'd open a discussion by providing a failing test.

The current failing test case shows how this:

{a: {color: 'red'}, '@media (min-width: 1024px)': {a: {color: 'blue'}}}

is erroneously compiled into this:

.jss-0 {
  color: red;
}
.jss-1 {
  a: [object Object];
}

[kof]

nice catch @markdalgleish will fix it asap

[kof]

huh you got me debugging for quite some time util I figured out you have used @media query differently, it has been designed to be like

{
   name: {'@media (min-width: 1024px)': {a: {color: 'blue'}}}
}

where name is there to have this rule accessible via it.

[kof]

wait, there is another issue.

[kof]

I need to rethink at-rule syntax in jss ... I have tested this way

    var rule = new jss.Rule('@media print', {
        button: {
            display: 'none'
        }
    })

However in named style sheet, selector is generated. At-identifiers shouldn't be treated as selectors.

[kof]

The problem is if we go this way

{a: {color: 'red'}, '@media (min-width: 1024px)': {a: {color: 'blue'}}}

It is possible to have rules with same name ... So rules within @media become unaccessible if you want to do sheet.getRule('a')

[kof]

I think ideally every rule should be still accessible via getRule and every rule should be able to be part of some @rule

[kof]

This issue is exists only in named style sheet.

[kof]

Semantically @media is a "conditional rule group" https://developer.mozilla.org/de/docs/Web/CSS/At-rule

Potentially we could have following syntax for conditionals:

{
    myName: {
        condition: '@media (min-width: 1024px)',
        color: 'blue'
    }
}

[kof]

I have added your test but modified to unnamed style sheet 8ac23ec just to make sure this will work.

As for named style sheet I need to sleep over it. Its actually not a bug, its a missing feature.