Closed2024/02/25にクローズ19

はじめてのPostCSS

今までほぼ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;
  }
}

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

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

この記事わかりやすい

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別途入れてるがどういう状態になってるんだろか…

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

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」の記事が意外とない…

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の範疇で使う分には問題ないはずよな…

postCSS mixin

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

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

@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ってのがぽいか？
あれ、クラス名も作れる？

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

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

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

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

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

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

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

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

⚠️ 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.

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

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

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

このスクラップは2024/02/25にクローズされました