Skip to content
This repository was archived by the owner on Aug 27, 2020. It is now read-only.

nested styles #3

Closed
ahoyahoy opened this issue Feb 7, 2018 · 1 comment
Closed

nested styles #3

ahoyahoy opened this issue Feb 7, 2018 · 1 comment

Comments

@ahoyahoy
Copy link

ahoyahoy commented Feb 7, 2018

not working with

<style jsx>{`{
      div {
        background: yellow;

        span {
          color: blue;
        }
      }
    }`}</style>

Home.tsx: Nesting detected at 7:9. Unfortunately nesting is not supported by styled-jsx.

I dont know if css plugins are loaded.

Can you enhance styles loading with https://github.com/zeit/next-plugins/tree/master/packages/next-css ?

thx

deptno pushed a commit that referenced this issue Feb 7, 2018
@deptno
Copy link
Owner

deptno commented Feb 7, 2018

I don’t know styled-jsx supports postCSS,

I applied @zeit/next-css you suggest, however, you can load external css(I thought you originally want to) like this

import css from ‘./legacy.css’

or

import css from ‘./module.css’

export default _ => <div className={css[‘classNameYouDefined’]}>text</div>

It works with nested styles(check postcss.config.js)
I will prepare example section and documentation

thank you for your feedback

@deptno deptno closed this as completed Feb 7, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants