styled_jsx 2.0.0

AST transforms visitor for styled-jsx
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

export default function Home() {
  const breakpoint = "500px";
  return (
    <div>
      <div className="container">
        container (should be blue)
        <div className="responsive">
          responsive (purple on mobile, orange on desktop)
        </div>
      </div>

      <style jsx>{`
          .container {
            color: blue;
            padding: 3rem;
  
            @media (max-width: ${breakpoint}) {
              .responsive {
                color: purple;
              }
            }
          }
        `}</style>
    </div>
  );
}