Jss: [jss-nested] @-rules inside of regular rules

[kof]

• [ ] Sometimes it is more practical to have @-rules like @media inside of a regular rule.
• [ ] When extending a rule with an at-rule inside, all of them should apply to the extended rule

return {
  button: {
    fontSize: 12,
    '@media (min-width: 1024px)': {
      width: 200
    }
  },
  ctaButton: {
    extend: 'button',
    '&:hover': {
      background: 'red'
    }
  }
}

[alebiavati]

Hi, I would like to try implementing this. Could you give me some pointers to get started?

[kof]

Allright, create a repo, take jss-nested as a template. Let me know on gitter if you need help.

[kof]

Hmm, maybe it could be even part of jss-nested instead of a separate plugin.

[kof]

In this case you may want to fork jss-nested and try to add this functionality.

[kof]

Let me know if this requires any changes in core.

[kof]

@alebiavati any updates?

[johann-sonntagbauer]

@kof @alebiavati any updates on that topic? tried to implement that feature as well and it seems strait forward. One question is how to test in combination with jss-extend. Where should we place tests where several plugins are involved?

[kof]

I think it is ok to add a plugin as a dev dependency and just add tests for it right away.

[johann-sonntagbauer]

all right then I will add the testcases and formulate a PR.
@kof Is there already some utility to merge styles of a rule?

[kof]

using es6 {...}

[johann-sonntagbauer]

of course :)

[alebiavati]

Sorry for the delay, I couldn't find the time to work on it. Thanks @johann-sonntagbauer for picking this up!

[kof]

@johann-sonntagbauer this feature is very important because after we have it, I will create an official release of https://github.com/cssinjs/aphrodisiac

[johann-sonntagbauer]

oh nice ;) i will finalize over the weekend

[johann-sonntagbauer]

@kof
formulated a PR with the changes. Added the missing test case with jss-extend.
https://github.com/cssinjs/jss-nested/pull/14

[kof]

released