kzk4043

今までほぼ100％scssを入れてきたが、新案件で純粋なCSSで行ってみないか？という話が出た。
variable/nestingあたりが標準装備されて、scssの優位性が薄れてきたため。
そこでscssにできてCSSにできないものを調査依頼

変数 (Variables)→できるがscssの書き方の方が個人的に好き
ネスティング (Nesting)→SLAが気になるくらい
インポート (Import) →scssのは廃止された認識
ミックスイン (Mixins)→やっぱこれがネック？
継承 (Extend)→Mixinで良い気がする
四則演算→calc()

mixinめっちゃ使うわけじゃないが、メディアクエリ系とか使いたい。。

@mixin sp {
  @media only screen and (max-width: #{$breakpoint-tablet-landscape - 1}) {
    @content;
  }
}

kzk4043

もともとのモチベーションは、やはりデフォルトに近い状態で問題なく使えるならそちらの方が長い目でみて良さそうなのと、多少なり軽いと思ったから。

kzk4043

検討の中でPostCSSが候補にあがった。
CSSにプラグインで機能を追加していくイメージのライブラリ。
今まではscssをがぽっと入れて使ってきたが、ほしいのがMixinくらいなのであればそれだけ入れればよくないか？という感覚。
社内ではいくつか導入案件があって聞いたことはあったが、個人的に使ったことはなかった。

kzk4043

この記事わかりやすい

kzk4043

PostCSS自体は、CSSパーサの機能のみを提供する
プラグインを利用し、CSSを加工したり、構文チェックを行う

https://postcss.org

Increase code readability
- Autoprefixerがvenfor prefixとかを追加
Use tomorrow’s CSS today!
- proposal段階のCSSとかを使える
The end of global CSS
- これはPostCSS関係あるのか…？
Avoid errors in your CSS
- stylelint別途入れてるがどういう状態になってるんだろか…

kzk4043

postCSSにもCSS modulesが実装されてますよっていう話？

kzk4043

Next.jsにおけるPostCSS

Next.js compiles CSS for its built-in CSS support using PostCSS.

そもそもNext.js自体がPostCSS使ってるのね…

Warning: When you define a custom PostCSS configuration file, Next.js completely disables the default behavior. Be sure to manually configure all the features you need compiled, including Autoprefixer. You also need to install any plugins included in your custom configuration manually, i.e. npm install postcss-flexbugs-fixes postcss-preset-env.

いや、笑
カスタムするなら全部最初からやってねってことか。
PostCSS自体は入れなくてよさそう…？たぶん…？

「nextjs postcss」の記事が意外とない…

kzk4043

CSS variables are not compiled because it is not possible to safely do so. If you must use variables, consider using something like Sass variables

え…困るんだが。。

PostCSSプラグインでの話？デフォルトCSSの範疇で使う分には問題ないはずよな…

kzk4043

postCSS mixin

Note, that you must set this plugin before postcss-simple-vars and postcss-nested.

もしやデフォルトCSSのvarsとnestingとは混在できないのか…？

kzk4043

@contentは実現できる？

@define-mixin icon $network, $color: blue {
    .icon.is-$(network) {
        color: $color;
        @mixin-content;
    }
    .icon.is-$(network):hover {
        color: white;
        background: $color;
    }
}

@mixin icon twitter {
    background: url(twt.png);
}
@mixin icon youtube, red {
    background: url(youtube.png);
}

@mixin-contentってのがぽいか？
あれ、クラス名も作れる？

kzk4043

vscodeでカラーピッカーが出てこないバグ発生

PostCSS Language Supportをやめて、PostCSS Intellisense and Highlightingというのを入れてみたらいけた

This extension is a mixed of two famous extensions postcss-language and vscode-postcss-language.

kzk4043

PostCSS Language Supportのままだと、ファイルをCSS扱いにしたらいけた

kzk4043

これはなんかうまくいかなかった

kzk4043

え、variablesって@mediaで使えないの…笑

kzk4043

うーむ、なんか仰々しいな…

kzk4043

おいー。。これはscssか…？
やっぱenvironmental variablesを策定中なのね…

kzk4043

⚠️ Word of caution on this solution though. You'll be writing invalid CSS by current browser standards and making it valid, which can look pretty confusing to new codebase contributors. At least be sure to document this plugin in your project README if you decide to go this route.

kzk4043

これはちょっと微妙な仕様じゃなかろうかCSSさん…（envで分けるってのも微妙ちゃう…）
breakpointは

一箇所で管理したい
media query以外の場所でも使うかもだから変数化はしておきたい
- media queryのmixin内と別途でbreakpoint作成するのは二重管理
- だいたいjsでも使いたいってなって三重管理くらいになるんや…
envはなんかめんどくさい（し、CSSの仕様変わったらめんどい）

kzk4043

いや、結論scssでいいなこれ…
mixinってそんな使わないのかな…

kzk4043

vite + react環境

とは言うものの、Vite は .scss、.sass、.less、.styl、.stylus ファイルの組み込みサポートを提供します。それらに Vite 固有のプラグインをインストールする必要はありませんが、対応するプリプロセッサー自体をインストールする必要があります。

npm install -D sass-embedded

本体だけいれればいけた。