コンポーネント時代のcss現実バージョン

src__現実-s-c.js

import React from "react"
import styled from "styled-components"

const Button = styled.div`
  padding: 4px;
  border: 1px solid #000;
`

export default React.memo(Button)

src__理想.js

import React from "react"
import css from "void-css"

/*
void-cssは架空のモジュールで以下のような感じだと思ってください。実装は無でビルドした時にbabelで消し去られる記述です
declare module void-css {
  css(style: string[]): void
  export css
}
*/

css`
  .button {
    padding: 4px;
    border: 1px solid #000;
  }
`

const Button: React.FC<{}> = () => (
  <div class=".button"></div>  
)
export default React.memo(Button)

z_dist__理想-rendered-dom-tree.html

<div class="src_理想_button_1dxasdq"></div>

z_dist__理想.css

.src_理想_button_1dxasdq {
  .button {
    padding: 4px;
    border: 1px solid #000;
  }
}

なにがいいたいか

• babel使ってjsからcss``で囲まれたブロックを抜き出してautoprefixerかけてcssファイルとして出力する
• その際にcss-moduleっぽく一意なclass名に置換するやつ。
• ついでにJSXで使ってるclassをcss-moduleっぽく一意なsuffixつけるやつ