styled_jsx 18.0.0

AST transforms visitor for styled-jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

const MOBILE_MAX = 767;

export default function Home() {
  return (
    <div>
      <h1 className="header">Hello</h1>
      <style jsx>{`
        .header {
          font-size: 48px;
        }

        @media screen and (max-width: ${MOBILE_MAX}px) {
          .header {
            font-size: 12px;
          }
        }
      `}</style>
    </div>
  );
}