CSS Modulesの歴史、現在、これから - Hatena Developer Blog
マンガメディア開発チームの id:mizdra です。半年ほど前から「フロントエンドエキスパート」という肩書きをもらい、社内でフロントエンドの啓蒙活動をしています。具体的にどんな活動をしているかについては、社内のポッドキャストで少し話しましたので、興味があれば聞いてみてください。 developer.hatenastaff.com 最近、私はReactを採用する社内プロダクトでのCSSの書き方を検討していました。最終的にそのプロダクトでは、CSS Modulesを採用するに至りました。しかしその過程で、CSS Modulesのメンテナンス体制に対して懸念があり、将来的な存続を危ぶむ声が界隈にあることを知りました。 ただし、実際にメンテナンス体制について調べてみたところ、万全ではないものの引き続きメンテナンスがされていて、使用もできることが分かりました。そこで、今回はCSS Modulesに
こんにちは。フロントエンドエキスパートチームの穴井（@pirosikick）です。福岡在住で、普段は福岡のweworkで働いています。他のメンバーは皆、東京に居てリモートで仕事をしていますが、モブでわいわい開発していますし、weworkが快適すぎて、毎日楽しいです！ フロントエンドエキスパートチームでは、サイボウズの各プロダクトが抱えるWebフロントエンドの課題を解決するのが仕事の一つです。 blog.cybozu.io 最近の取り組みとして、Puppeteerで不要なCSSを消した事例を紹介します。 このブログは、6/19に福岡で開催した「Google I/O '19のWebをまとめる会」で登壇したときの内容を詳細に説明しつつ、アップデートした部分もあるので、発表見たぞ、スライド見たぞという方も見ていただけますと幸いです。 speakerdeck.com きっかけ とあるプロダクトのCS
AbemaTVにおけるCSS is too fragile問題に対する解 / Solution of "CSS is too fragile" by AbemaTV
リファクタリングをしていたらCSS Modulesを使っていたにも関わらずCSSが壊れてしまった私達は、CSS ModulesがCSSの特性・我々のプロダクトの構成や開発方針に合わないと判断し「BEMベースのクラス名設計 + PostCSS」へ移行を進める方針を決めました。 これらの背景や、どうやって移行を進めたのか、また移行したあとの評価について話しました。
GitHub - postcss-rs/postcss-rs: 🚀 Fast and 100% API compatible postcss replacer, built in Rust
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
はじめに この記事は 個人的なアドベントカレンダー2021 の1日目です。 次回： postcss-preset-env PostCSS のプラグイン postcss-preset-env は、未来の機能候補として実際に議論されている記法や機能を Polyfill するプラグインをまとめたものです。 postcss-preset-env では、 custom property (var(--some-value)) や nesting rules (ネストしたセレクタ) といった Sass などのプリプロセッサでお馴染みの機能から、ニッチだが便利な機能まで、さまざまな策定中の機能を取り入れることができます。 また、いずれも策定中の機能であるため、将来、CSSの機能として組み込まれる可能性がある機能も含まれており、より標準に近い形で新機能を使えます。 （策定中のため、書き方が変わったり、機能
postcss-preset-envで少し未来のCSSを予習する - 弁護士ドットコム株式会社 Creators’ blog
こんにちは、弁護士ドットコムでデザイナーをしているhosogaiです。 ふだんは https://www.bengo4.com/ サービス内のUI改善などをしています。 先日このブログ「弁護士ドットコム株式会社 Creators’ blog」のデザインカスタマイズを行った際にCSSの新機能をいくつか試す機会があったので、今回ここで紹介させていただこうと思います。 きっかけ PostCSSとは postcss-preset-envの使い方 npm packageで使う場合 CodePenで使う場合 試せるCSSの機能 Stage0（意欲的） Stage1（実験） Stage2（許容） Stage3（包含） Stage4（標準化） 新機能のNesting CSS Moduleを使ってみる Nesting CSS Moduleのルール 直接入れ子にする場合 @nestを使う場合 プラグインでの挙
この記事の概要 PostCSSのプラグインであるPostCSS Preset Envをご存知でしょうか。 "Use tomorrow’s CSS today!"というキャッチフレーズが示す通り、まだ正式な仕様になる前のCSSを色々と使うことができます。 CSS関連の勉強会などに登壇すると「普段どこからインプットしていますか？」と質問されることがあり、学ぶ先の1つとしてPostCSS Preset Envがあるので紹介してみます。 Features CSSでは策定段階がStage 0から4まであります。 数字が高いほど仕様として固まっていて、低いほど変更や破棄になる可能性が高いです。 Stage 2でも「一部のブラウザでは使用できるけど、まだ動かないことも多い」くらいで、実用的と言えるのはStage 3からでしょうか。 そんな中でも、PostCSS Preset Envを使えばStage 0
使われていないCSSルールを検出する stylelint-no-unused-selectors を作った - 徒然技術日記
github.com 背景 発端はあるツイートより． 真面目な話、命名規則でCSSを管理する場合のdead code eliminationどうしてるのか知見ほしいマンです— terrierscript (@terrierscript) March 1, 2019 たしかに CSS Modules は webpack の恩恵により，styled-components や emotion の場合にはその仕組みゆえに，どれも CSS の dead code elimination (使われていない CSS ルールが最終的な CSS ファイルに入らないようにすること) は自然と行われます． 一方で， CSS in JS なアプローチを取らない場合には往々にして challenging なものとなります．既存のツールとしては UnCSS, DropCSS, PurifyCSS, PurgeCSS
Next.jsでTailwind CSSを使えるようにする **Next.jsとはVercelが作成しているReactのフレームワークです。**面倒な設定を書かなくてもすぐに使えるZero Configを標榜しており、実際にwebpackやTypeScriptと一緒にReactを書く際にも特別な準備は不要です。SSRにも対応しており、Reactで開発するならNext.jsかFacebook製のCreate React Appを使うのがスタンダードになっています。 **また、Tailwind CSSとはユーティリティファーストのCSSフレームワークです。**その特徴は、Tailwind CSSによって提供されるクラスを組み合わせてコンポーネントを作り、サイトをデザインしていくところにあります。さらにCSSフレームワークなので、CSSに慣れていない人でも簡単に使うことができます。 関連記事:
Sassを使わずにPostCSSだけでCSSを書く理由
はじめに Sass とは Sass は現在の CSS のコーディング環境のデファクトスタンダードである。 SASS 記法と SCSS 記法の 2 種類がある。（現在主に利用されているのは SCSS 記法） CSS を効率よく書くための便利な機能が含まれている。 コンパイルライブラリはnode-sass(libsassに依存)が最もシェアが多い。 libsass が先日deprecatedになったため、今後はsass(旧:dart-sass)のシェアが伸びると予測される。 PostCSS とは PostCSS 自体は、CSS を加工しやすいようにパースし、結果を CSS として出力する機能のみ提供する。 最新の CSS の polyfill として利用できるものから、ジョークプラグインまで様々なプラグインが公開されている。 Sass との組み合わせでもよく利用される。Autoprefixer
自己紹介 @otofu-square 外部登壇2回目の初心者です🙇 JUBILEE WORKS, inc でフロントエンド業 TimeTree というカレンダーアプリ React/Redux/TypeScript/hypernova...etc 最近 wasm(Rust), Web Components に興味あり 今日お話すること 今日お話すること postcss-jsx とは postcss-jsx で出来るようになったこと① postcss-jsx で出来るようになったこと② 所感 postcss-jsx とは https://github.com/gucong3000/postcss-jsx PostCSS の syntax プラグイン 様々なCSS in JSライブラリの記法をパース CSS in JS内のスタイルにPostCSSを適用可 様々な CSS in JS ライブラリ
Inline Webpack CSS Modules classNames, reducing bundle size. https://npm.im/constant-locals-loader
constant-locals-loader for Webpack This loader optimizes the output of mini-css-extract-plugin and/or css-loader, entirely removing the potentially large CSS classname mappings normally inlined into your bundle when using CSS Modules. Run npm install constant-locals-loader, then make these changes in your Webpack config: module.exports = { module: { rules: [ { test: /\.css$/, use: [ + 'constant-lo
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
PostCSS 8.0: Plugin migration guide—Martian Chronicles, Evil Martians’ team blog
PostCSS received a major update with the release of version 8.0, codenamed “President Ose”. Plugin creators can now opt in for a new API that сan increase build speeds and reduce the size of dependencies for the end-users of their tools. This guide describes the steps you need to take as a plugin developer to make the most out of the improved framework. PostCSS—a framework for processing CSS with
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Puppeteerで不要なCSSを消す - Cybozu Inside Out | サイボウズエンジニアのブログ
PostCSS で先取りする、未来の CSS 7選
CSSの勉強の1つとしてPostCSS Preset Envを眺める - Qiita
Next.jsにTailwind CSSを導入する - パンダのプログラミングブログ
postcss-jsxで React x CSSinJSを快適にする - Qiita
GitHub - tokencss/tokencss