styled-componentをやめる話

はじめに

なぜstyled-componentをやめるかというと、Angular + React + Scullyという 変態 ちょっと変わった構成のため。
ScullyのレンダリングされたHTMLだとデザインが当たらないのでレンダリング済みHTML→SPAの表示の際画面がガタつくことから他の手法にする話。

React の CSS（sass）の当て方

import React from 'react';
import ReactDOM from 'react-dom';

import './index.scss';

const App:React.FC = () => {
  return (
    <p className="hello-text">
      hello, world!!
    </p>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

すごく簡単にやるなら上記で行けるっぽい。
が、グローバルスコープなcssクラスはあまり扱いたくないので CSS Modules を使う。

AngularでCSS Modulesを使うには

以下のように記述すると使える。

import * as style from '../../styles/react-items/card-origin-article.module.css'

がAngularではうまく css module import できないのでカスタムWebpackを定義する必要がある。

npm i -D @angular-builders/custom-webpack
npm i -D css-loader style-loader sass-loader sass

"projects": {
  ...
  "example-app": {
    ...
    "architect": {
      ...
      "build": {
        "builder": "@angular-builders/custom-webpack:browser",
        "options": {
          "customWebpackConfig": {
           "path": "./extra-webpack.config.js",
           "mergeRules": {
             "externals": "replace"
           }
          ...
          }
        }
      },
      ...
      "serve": {
        "builder": "@angular-builders/custom-webpack:dev-server",
        "options": {
          "browserTarget": "example-app:build"
        }
      },
      ...
    }
  }
}

.css fiileではangular側のビルドツールと競合してうまく通らないので拡張子を変更して対応。

module.exports = {
  module: {
    rules: [
      {
        test: /module\.wcss$/i,
        use: [
          "style-loader",
          "css-loader",
        ],
      }
    ],
  },
}

結果

グローバルでsassでコード自体は分けておいて global.scss で @import するようにする。 @angular-builders/custom-webpack を使って css-loader で いい感じにカプセル化もできるようになった。 ただ拡張子を wcss としているのが解せない。
*.css ファイルをAngularのコンパイラで拾ってしまうので何かいい方法がないか探す…。

参考

https://zenn.dev/asano/articles/db9a30c5b1eb46

https://github.com/just-jeb/angular-builders/tree/master/packages/custom-webpack https://qiita.com/niyou0ct/items/290d74d8be86eae4e358