AbemaTVにおけるCSS is too fragile問題に対する解 / Solution of "CSS is too fragile" by AbemaTVリファクタリングをしていたらCSS Modulesを使っていたにも関わらずCSSが壊れてしまった私達は、CSS ModulesがCSSの特性・我々のプロダクトの構成や開発方針に合わないと判断し「BEMベースのクラス名設計 + PostCSS」へ移行を進める方針を決めました。 これらの背景や、どうやって移…
PostCSS まとめ - Qiita
僕はPostCSSは開発当初から追いかけていて、GitHubでPostCSSチームのメンバーのひとりだったり、実際にPostCSSを使ってプラグインやツールをいくつか作ったり、ブログや雑誌で記事を書いたり、勉強会等で話したりしています。 本記事では、自分が知っているPostCSSについての事柄を共有します。 PostCSSとは何か PostCSSとは、ロシア人の Andrey Sitnik という人が開発している、Node.js製の「CSSツールを作るためのフレームワーク」です。PostCSS製のツールとして、ベンダープリフィックスを自動で付与する「Autoprefixer」、未来のCSSの構文の一部を今のブラウザで解釈できるようにする「cssnext」、カスタマイズ性に富んでいるCSSリンターである「stylelint」などが有名です。 PostCSSは2018年2月、かなり広く使われて
PostCSSのプラグインを作ってみる - Qiita
3日目では、PostCSSのASTを簡単に、効率よく操作するためのAPIをいくつか紹介しました。今日は、実際にPostCSSのプラグインを作り切るところまで説明します。 作るプラグイン 今回は、PostCSSのプラグインの例として、overflow-wrap プロパティが使われたとき、フォールバックとして word-wrap プロパティを追加するためのプラグインを考えます。 PostCSSプラグインの開発ガイドライン PostCSSのプラグインを開発するためのガイドラインがあるので、そこからいくつか紹介します。 パッケージ名に postcss- プリフィックスを付ける 名前を明確にするために postcss- プリフィックスをパッケージに付けたほうが良いです。（e.g. postcss-mixins, postcss-simple-vars）ただし、Autoprefixerやstyleli
PostCSSのASTを操作する - Qiita
PostCSSには2日目で説明した、ASTを簡単に操作するためのAPIが用意されています。ASTはJavaScriptのオブジェクトなので、JavaScriptの構文で直接変換させることもできますが、より便利に、そして効率の良い処理をするためにも提供されているAPIを使います。 また、PostCSSの全てのAPIはAPIドキュメントで確認することができます。 ノードの種類 まずはASTのノードの種類です。PostCSSのASTのノードは以下の5つです。 Rootノード: ASTの1番上のノード（Rootノードは親ノードがない） Ruleノード: 1つのルールセット AtRuleノード: 1つの@ルール Declarationノード: 1プロパティ宣言 Comment: 1つのコメント これらは実装的には PostCSSの Node クラスを継承したもので、Node.type を参照すること
PostCSSの仕組み - Qiita
// parse.js const fs = require('fs') const util = require('util') const postcss = require('postcss') const css = fs.readFileSync('./input.css') const ast = postcss.parse(css) console.log(util.inspect(ast, false, null)) $ node parse.js Root { raws: { semicolon: false, after: '\n' }, type: 'root', nodes: [ Rule { raws: { before: '', between: ' ', semicolon: true, after: '\n' }, type: 'rule', nodes:
Modern CSS: architecture, future specs and build flow
at DevFest Tokyo 2016.
cssnextから学ぶ次世代CSS - Qiita
cssnextとは策定中のCSS仕様を先立って使えるようにするツールのことです。 ひとことで言うとCSS版Babelです。 CSSを変換する仕組みはPostCSSのプラグインとして有志によって作成されています。 cssnextはそのプラグインをまとめたプラグインパックと呼ばれるものです。 ※古いブラウザに対応させるためのフォールバック機能を提供するプラグインも含んでいます。 本記事は策定中のCSSの知識をつけることが目的です 参考リンクなど cssnext（PostCSS）の背景や使い方は先日記事を書いたので是非見てみてください Step by Stepで始めるCSSモダン化（PostCSS） playgroundでcssnextが実際にどのように変換するのかを試せます。 機能一覧 本記事で紹介する機能一覧を出すのに使ったcssnextのページです。 postcss-cssnext fea
社内でCSSの新しい方針について話したメモ - Qiita
社内で新しいドメインを設立するにあたり、CSS Modules, PostCSS, cssnextを試してみました。 このスライドは、その際の説明に使ったものです。せっかくなので公開します。 「プロトタイプ作成で試してみたけど、みなさんどう思いますか？」くらいの温度感。本番採用が確定したわけではありません。何かお役に立つことがアレば幸いです。 以後、説明に使ったスライド。 おしながき 1. コンポーネント時代のスタイリング 2. グローバルCSS、BEM、そしてローカルCSS 3. CSS Modules、そしてJSXへの割り振り 4. cssnextと、その書き方 5. 我々のPostCSSスタンダード 新ドメインの CSS環境（案） CSS Modules css next PostCSS on webpack 何が変わるのか 我々の今までのスタイリング sassで書く スタイルのモジ
Improving CSS quality at Facebook and beyond
With thousands of engineers working across a range of products at Facebook, we face some unique challenges when it comes to code quality. Not only are we dealing with a large codebase, but things are also moving fast — new features are being added, existing ones are being improved, and things are being reorganized. For CSS, this means having thousands of files that are in a continuous state of flu
So You Want To Make A PostCSS Plugin | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Marcus Tisäter. I think there are a lot of us out there that find PostCSS kind of fascinating. Especially from the perspective of potentially being able to write our own plugins, in JavaScript, that transform CSS in any way we want. But where to begin? How do
Improving the Quality of Your CSS with PostCSS — SitePoint
April 26, 2016Improving the Quality of Your CSS with PostCSS The term “code quality” is not new to programmers. After all, every developer knows that it’s not enough for the code to just work. It should also possess other qualities: it should be readable, well formatted and consistent. It should also match a certain standard of quantitative metrics. Unfortunately, this is often overlooked when wri
噂のPostCSSを検証してみた｜dwango creators' blog（ドワンゴクリエイターズブログ）
皆さん、どーもこんにちは、イズムです。 普段仕事でCSSを触る時はSassを使って快適なCSS記述ライフを送ってるわけですが、最近、なにやらたまーに耳にするPostCSSとやらが気になっています。 名前からすると「Post（次の、後の）CSS」ということかな？と、雑な推測をしたところで、どんなものなのか全然想像つかないですね！ そんなわけで、今日は私が気になっているPostCSSについてサクッと調べつつ、実際に使ってみたいと思います！ PostCSSってなに？ PostCSS どうやらPostCSSとは、JavaScriptで記述されたCSSにまつわるプラグインを扱うことのできるAPIを持ったツールのようです。 有名なプリプロセッサーであるSassやLess、Stylusなどは否応なしにありとあらゆる機能をワンパッケージにして提供しているのに対し、PostCSSはプラグインとして個別にプリ
PostCSS - a tool for transforming CSS with JavaScript
Add vendor prefixes to CSS rules using values from Can I Use. Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you. :fullscreen { }CSS input:-webkit-full-screen { } :-ms-fullscreen { } :fullscreen { }CSS output PostCSS Preset Env, lets you convert modern CSS into something most browsers can understand, determining the polyfills you need
PostCSSとcssnextで最新CSS仕様を先取り！
どうも、Kaizen Platform, Inc.の@t32kです。今日はPostCSSについて解説しようと思います。PostCSSについてはそれを解説した同僚のスライドも素晴らしいので、そちらも参考にしてもらえば幸いです。 PostCSS とは何か // Speaker Deck PostCSSとはなにか？ PostCSSは、Autoprefixerの作者でも有名なロシアのAndrey Sitnik氏が開発しているツールです。 postcss/postcss 公式のレポジトリのREADMEには以下のように書かれています。 PostCSS is a tool for transforming styles with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax,
PostCSS 5.0: for Custom CSS Preprocessing
at Back to Basics, CSS event in Japan
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
postcss.parts
Fix Global CSS with PostCSS
PostCSS and cssnext
PostCSS とは何か