styleName？styled-jsx？CSS-Modules？ReactのCSSがカオスなんだが。

##結論：styleNameで迷子になると、すごい時間の無駄
create-react-app+pug+stylus+【styleName】
困ったメモ。完全に迷子になってしまってる。
scoped cssが欲しいんですよ。そして簡単に書けるやつが。。

###pugとstylusはイケると思ったのですが、

styled-jsxも求めているものと微妙に違う気がするなぁ…。
→（追記：そんな気がしてた、というだけで、これが正解だと思う）

外人A「なんでVueの"scoped"みたいな簡単な方法がないんだ？」
https://github.com/facebook/create-react-app/issues/4608
外人B「これの開発にコミットしろ」
https://github.com/zeit/styled-jsx
おぉ…html in cssで余計にややこしいと思ったんだけど、僕だけかしら。
→（追記：これもFragmentで回避する方法があった。）

####そもそも、なんで最初にstyleNameだと思ったのか？
CSS-Modulesというかpugをラクに書きたい時にtransform-react-pugの
オプションの説明にclassName→styleNameが出てきたから、
scoped的な記述あり、もしかして、いけるんじゃないの？と思って調べ始めたのだが、
全然参考サイトが見つからないし、issueやcodeを検索しても出てこない。

####素直にApp.module.cssで探したほうが良いんじゃない？
と思ったのですが、諦める前にいろんな角度から見て探してみよう。。

###この世にreactでpug+styleNameで使っている人はいるのか？
####react-boilerplate
こ、これは！？もしかしてコレ参考になるんじゃ？
と思ったが
babel-plugin-react-pug-classnames。
コレ、まだ使ってる人誰もおらん。

styleNameエラー回避までは行けるような気がしますが、
これそもそも、CSS-moduleじゃない感じ。
https://github.com/Yska/react-boilerplate/blob/2987c43efef823b1e9a26c77b40a8de2504edbf6/.babelrc.js

const config = Object.assign({}, babelrc, {
  plugins: [
    ['transform-imports', {（省略）}],
    ['transform-react-pug', {classAttribute: 'styleName'}],
    ['react-pug-classnames', {classAttribute: 'styleName'}]
  ].concat(babelrc.plugins)
})

####Todo-List-React-Redux-
create-react-appというより、スクラッチで新しいbabel(@がついてるほう)でゴリゴリ作ってるっぽい。
create-react-appって依存パッケージのバージョンの縛りが結構あったと思うから参考にならず。
https://github.com/Moogur/Todo-List-React-Redux-/blob/e348d47689b521654ed21c0ad4a1c3c5f0d64909/webpack/js.webpack.js

rules: [{
    test: /\.js$/i,
    exclude: /node_modules/,
    loader: "babel-loader",
    options: {
        presets: [
            ["@babel/preset-env", {
                //debug: true,
                "useBuiltIns": "entry", // entry or usage
                "corejs": 3,
                "modules": false
            }]
        ],
        plugins: [
            ["transform-react-pug", {"classAttribute": "styleName"}], // transform pug to jsx
            ["react-css-modules", {
                "generateScopedName": "[local]__[sha1:hash:hex:5]",
                "filetypes" : {".sass": {"syntax": "postcss-sass"}}
            }],
            "transform-react-jsx", // transform react jsx
            "transform-react-remove-prop-types", // remove prop-types in production
            ["@babel/plugin-proposal-decorators", { "legacy": true }], // decorators
            ["@babel/plugin-proposal-class-properties", { "loose" : true }], // es6 class arrow function
            "@babel/plugin-proposal-function-bind", // x.bind(this) => ::x
            "@babel/plugin-proposal-object-rest-spread", // rest/spred operator for object
            ["@babel/plugin-proposal-private-methods", { "loose" : true }], // es6 class private methods
            "@babel/plugin-transform-async-to-generator", // transform async to generator
            ["@babel/plugin-proposal-pipeline-operator", { "proposal": "fsharp" }] // add pipeline operator (minimal, smart, fsharp)
        ],
        cacheDirectory: true
    }
}]

####Star-DB-React-Redux-Router-Thunk-
さっきと同じ人のだけど、これもbabelが新しいんですよね。（@がついてるほう）
https://github.com/Moogur/Star-DB-React-Redux-Router-Thunk-/blob/d3d25c6b44936906970085ac1a4f9a6c052cb12a/webpack/js.webpack.js

 rules: [{
    test: /\.js$/i,
    exclude: /node_modules/,
    loader: "babel-loader",
    options: {
        presets: [
            ["@babel/preset-env", {
                //debug: true,
                "useBuiltIns": "entry", // entry or usage
                "corejs": 3,
                "modules": false
            }]
        ],
        plugins: [
            ["transform-react-pug", {"classAttribute": "styleName"}], // transform pug to jsx
            ["react-css-modules", {
                "generateScopedName": "[local]__[sha1:hash:hex:5]",
                "filetypes" : {".sass": {"syntax": "postcss-sass"}}
            }],
            "transform-react-jsx", // transform react jsx
            "transform-react-remove-prop-types", // remove prop-types in production
            ["@babel/plugin-proposal-decorators", { "legacy": true }], // decorators
            ["@babel/plugin-proposal-class-properties", { "loose" : true }], // es6 class arrow function
            "@babel/plugin-proposal-function-bind", // x.bind(this) => ::x
            "@babel/plugin-proposal-object-rest-spread", // rest/spred operator for object
            ["@babel/plugin-proposal-private-methods", { "loose" : true }], // es6 class private methods
            "@babel/plugin-transform-async-to-generator", // transform async to generator
            ["@babel/plugin-proposal-pipeline-operator", { "proposal": "fsharp" }] // add pipeline operator (minimal, smart, fsharp)
        ],
        cacheDirectory: true
    }
}]

上手く併用できている人がいることはいる。。（babelのバージョンが違うけど。）

###プラグインのページをよく読む
似たようなプラグインが沢山あり、どの組み合わせが正解なのか？
スター数でみた方が公式感が分かると思う。

####babel-plugin-transform-react-pug★▲●（必須）
Githubスター「523」（そうか。そもそもあんまりpug使ってる人がいない）
どうりで、あまりメンテされてない感じなのかしら。
https://github.com/pugjs/babel-plugin-transform-react-pug

####babel-plugin-react-css-modules▲●（２番）
Githubのスターが1.8k（みんな使ってる）これはpugに限らず使ってるからか。
https://github.com/gajus/babel-plugin-react-css-modules

####babel-plugin-transform-react-jsx▲●（３番）
Githubのスターが35.9k（みんな使ってる）
これは多分pugに限らずいろんな人が使う。
https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx

####babel-plugin-react-pug-classnames
Githubのスターが０？まだ使うのやめたほうがいい。
https://github.com/dmapper/babel-plugin-react-pug-classnames

####babel-plugin-transform-jsx-css-modules
Githubスターが０？まだ使うのやめたほうがいい。
https://github.com/ezhlobo/babel-plugin-transform-jsx-css-modules

react-pug-classnamesやjsx-css-modulesと言う名前のプラグインは、
Readme読んで、あ〜なんかコレ使えそうだな、と思ったけど使わなくて良い気がしてきた。

###プラグインを整頓してみた。

.babelrc

  "plugins": [
    "transform-react-pug",
    "react-css-modules",
    "transform-react-jsx"
  ]

CSSはハッシュされたんだが、今度は名前が一致しない。
react-css-modulesのオプション設定が足りないんだろうか。

たぶん、もうちょっと調べると何か分かりそう。
↓
そうか！！styled-jsxが結構良い感じに見えてきた。

####■参考記事
https://www.yoheim.net/blog.php?q=20180312