Thinking about emotion js vs styled component

// css/WithEmotionComponent.js
import { css } from '@emotion/core';

...

const blackButton = css`
  ${button}
  label: black-button;
  background-color: black;
  color: white;
`

export {
  wrapperClass,
  imgClass,
  titleClass,
  whiteButton,
  blackButton
}

// WithEmotion.js

/** @jsx jsx */

import React, { useState } from 'react';
import { jsx } from '@emotion/core';
import { wrapperClass, imgClass, titleClass, whiteButton, blackButton } from './css/WithEmotionComponent';
function App() {
  const [ count , setCount ] = useState(0);

  const addCount = () => setCount(count + 1);
  const subCount = () => setCount(count - 1);

  return (
    <div css={
      wrapperClass
    }>
      <h1 color="white" css={titleClass}>With emotion</h1>
      <p>MINIFIED :17.2kB</p>
      <p>MINIFIED + GZIPPED : 6.4kB</p>
      <img css={imgClass} src="https://cdn-images-1.medium.com/max/1600/1*gGzRmUKNOC_X7klFjTk8EA.png" />
      <p>{count}</p>
      <button css={[blackButton, whiteButton]} onClick={addCount}>+</button>
      <button css={[whiteButton, blackButton]} onClick={subCount}>-</button>
    </div>
  );
}

export default App;

// css/WithStyledComponent.js
import styled from 'styled-components';

...

const ImgClass = styled.img`
  width:40px;
  height: 40px;
`

export {
  WrapperClass,
  TitleClass,
  WhiteButton,
  BlackButton,
  ImgClass
}

// WithStyledComponent.js

import React, {useState} from 'react';
import { WrapperClass, TitleClass, ImgClass, WhiteButton, BlackButton} from './css/WithStyledComponent';
function App() {
  const [ count , setCount ] = useState(0);

  const addCount = () => setCount(count + 1);
  const subCount = () => setCount(count - 1);

  return (
    <WrapperClass>
      <TitleClass>With styled component</TitleClass>
      <p>MINIFIED : 43.3kB</p>
      <p>MINIFIED + GZIPPED : 15.8kB</p>
      <ImgClass src="https://cdn-images-1.medium.com/max/1600/1*p1TndLk3UsGPBsM7qHPZIw.png"/>
      <p>{count}</p>
      <WhiteButton onClick={addCount}>+</WhiteButton>
      <BlackButton onClick={subCount}>-</BlackButton>
    </WrapperClass>
  );
}

export default App;

[local] - the name of the variable the result of the css or styled expression is assigned to.

[filename] - name of the file (without extension) where css or styled expression is located.

[dirname] - name of the directory containing the file where css or styled expression is located.

"plugins": [
    [
      "emotion",
      {
       "autoLabel": true
       "labelFormat": "[dirname]-[filename]--[local]",
      }
    ]
  ]

If you’re using the new css prop or styled, you don’t need to do anything other than calling React’s renderToString (or renderToNodeStream). This is especially exciting for component libraries because consumers don’t need to do anything special to use a component.
You can now publish a React component to NPM with styles, and it will just work with server-side rendering without requiring consumers to do anything.

<button css="{[blackButton," whiteButton]} onClick="{addCount}">+</button>
<button css="{[whiteButton," blackButton]} onClick="{subCount}">-</button>

const button = css`
  border: 2px solid black;
  font-size: 20px;
`;

const whiteButton = css`
  ${button}
  label: white-button;
  background-color: white;
  color: black;
`;

const blackButton = css`
  ${button}
  label: black-button;
  background-color: black;
  color: white;
`;

/** @jsx jsx */

import React, { useState } from "react";
import { jsx } from "@emotion/core";
import {
  wrapperClass,
  imgClass,
  titleClass,
  whiteButton,
  blackButton,
} from "./css/WithEmotionComponent";

function App() {
  const [count, setCount] = useState(0);

  const addCount = () => setCount(count + 1);
  const subCount = () => setCount(count - 1);

  return (
    <div css={wrapperClass}>
      <h1 color="white" css={titleClass}>
        With emotion
      </h1>
      <p>MINIFIED :17.2kB</p>
      <p>MINIFIED + GZIPPED : 6.4kB</p>
      <img
        css={imgClass}
        src="https://cdn-images-1.medium.com/max/1600/1*gGzRmUKNOC_X7klFjTk8EA.png"
      />
      <p>{count}</p>
      <button css={[blackButton, whiteButton]} onClick={addCount}>
        +
      </button>
      <button css={[whiteButton, blackButton]} onClick={subCount}>
        -
      </button>
    </div>
  );
}

export default App;

const titleClass = (props) => css`
  label: title;
  font-size: 30px;
  color: ${props.color} ${[media[0]]} {
    font-size: 40px;
  }
  ${[media[1]]} {
    font-size: 50px;
  }
  ${[media[2]]} {
    font-size: 60px;
  }
`;

const button = css`
  border: 2px solid black;
  font-size: 20px;
`;

const whiteButton = css`
  ${button}
  label: white-button;
  background-color: white;
  color: black;
`;

const blackButton = css`
  ${button}
  label: black-button;
  background-color: black;
  color: white;
`;

const breakpoints = [320,768,1024,1440];

const media = breakpoints.map(
  bp => `@media (min-width: ${bp}px)`
)

const titleClass = (props) => css`
  label: title;
  font-size: 30px;
  color: ${props.color}
  ${[media[0]]} {
    font-size: 40px;
  }
  ${[media[1]]} {
    font-size: 50px;
  }
  ${[media[2]]} {
    font-size: 60px;
  }

smallPhone: 320
phone: 375
tablet: 768
desktop: 1024
largeDesktop: 1440

import media from "css-in-js-media";

export const exampleClass = css`
  color: red;
  ${media(">desktop")} {
    font-size: 15px;
  }
  ${media("<=desktop", ">tablet")} {
    font-size: 20px;
  }
  ${media("<=tablet", ">phone")} {
    font-size: 25px;
  }
  ${media("<=phone")} {
    font-size: 30px;
  }
`;

const TitleClass = styled.h1`
  font-size: 30px;
  color: ${(props) => props.color} ${[media[0]]} {
    font-size: 40px;
  }
  ${[media[1]]} {
    font-size: 50px;
  }
  ${[media[2]]} {
    font-size: 60px;
  }
`;

//아래와 같이 mixin 처럼 사용 가능
const Button = styled.button`
  border: 2px solid black;
  font-size: 20px;
`;

const WhiteButton = styled(Button)`
  background-color: white;
  color: black;
`;

const BlackButton = styled(Button)`
  background-color: black;
  color: white;

const breakpoints = [320, 768, 1024, 1440];

const media = breakpoints.map((bp) => `@media (min-width: ${bp}px)`);

const TitleClass = styled.h1`
  font-size: 30px;
  color: ${(props) => props.color} ${[media[0]]} {
    font-size: 40px;
  }
  ${[media[1]]} {
    font-size: 50px;
  }
  ${[media[2]]} {
    font-size: 60px;
  }
`;

import media from "css-in-js-media";

export const exampleClass = css`
  color: red;
  ${media(">desktop")} {
    font-size: 15px;
  }
  ${media("<=desktop", ">tablet")} {
    font-size: 20px;
  }
  ${media("<=tablet", ">phone")} {
    font-size: 25px;
  }
  ${media("<=phone")} {
    font-size: 30px;
  }
`;

Consequently, there are a bunch of practical issues to consider
with traditional CSS-file-based styling (especially with SSR),
so we suggest avoiding this method when styling for Next.js.