Loading article…
 | |
| 開発者 | アンドレイ・シトニク、ベン・ブリッグス、ボグダン・チャドキン |
|---|---|
| 初回リリース | 2013年11月4日 |
| 安定リリース | 8.4.49 [1]
/ 2024年11月11日 |
| リポジトリ | ポストCSS |
| 書かれた | JavaScript |
| オペレーティング·システム | クロスプラットフォーム |
| 利用可能 | 英語 |
| タイプ | CSS開発ツール |
| ライセンス | MITライセンス[2] |
| Webサイト | 翻訳元 |
PostCSSは、JavaScriptベースのプラグインを使用して日常的なCSS操作を自動化するソフトウェア開発ツールです。[3]これはAndrey Sitnikによって設計され、そのアイデアはEvil Martiansのフロントエンド作業に由来しています。[4]
機能性
PostCSSはCSSツールを開発するためのフレームワークです。[5] SassやLESSなどのテンプレート言語の開発に使用できます。[6]
PostCSSコアは以下で構成されています: [7]
機能はプラグインを通じて利用可能になります。プラグインはオブジェクト ツリーを操作する小さなプログラムです。コアが CSS 文字列をオブジェクト ツリーに変換した後、プラグインはツリーを分析して変更します。次に、PostCSS はプラグインによって変更されたツリーの新しい CSS 文字列を生成します。
PostCSS とそのプラグインはJavaScriptで記述されており、低レベルの JavaScript 操作用の API を提供するnpmを通じて配布されます。
Webpack、[8]、 Gulp、[9]、GruntなどのビルドシステムでPostCSSを使用できるようにする公式ツールがあります。[10]コンソールインターフェイスも利用できます。[11] BrowserifyまたはWebpackを使用して、ブラウザでPostCSSを開くことができます。[12]
構文
PostCSSではパーサーとジェネレーターを変更できます。この場合、PostCSSを使用してLess [13]やSCSS [14]のソースを操作できます。ただし、PostCSSだけではSassやLessをCSSにコンパイルすることはできません。PostCSSは元のファイルを変更します。たとえば、CSSプロパティを並べ替えたり、コードの間違いをチェックしたりします。PostCSSはSugarSSをサポートしています。[15]
プラグイン
PostCSS プラグインは、分析やプロパティの並べ替えから最小化に至るまで、さまざまな CSS 処理タスクを実行します。
完全なプラグインのリストは postcss.parts にあります。以下にいくつかの例を示します。
- ブラウザのプレフィックスを追加およびクリアするAutoprefixer 。 [16]
- CSSセレクタを分離し、コードを整理するためのCSSモジュール。Webpackの一部として提供されます。[17] [18]
- stylelintはCSSコードの間違いを分析し、スタイルの一貫性をチェックします。[19]
- stylefmtはstylelint設定に従ってCSSコードを修正します。[20]
- PreCSSはSass / Lessの前処理機能を実行します。[21]
- postcss-preset-envは 未完成のCSS仕様草案の機能をエミュレートします。[22]
- cssnanoはスペースを削除してコードを書き直すことでCSSのサイズを小さくします。[23]
- RTLCSSはCSSコードを変更して、デザインが右から左への書き方に適したものになるようにします（これはアラビア語やヘブライ語に適用されます）。[24]
- postcss-assets、postcss-inline-svg、postcss-spritesを使用してグラフィックを操作します。[25] [26] [27]
歴史
Reworkプロジェクトの過程で、モジュール式CSS処理のアイデアは2012年9月1日にTJ Holowaychukによって提案されました。[28] 2013年2月28日、TJはそれを公に表明しました。[29]
2013年3月14日、Andrey SitnikによるEvil Martiansのフロントエンド作業により、ReworkベースのプラグインであるAutoprefixerが誕生しました。[30]当初、プラグインの名前はrework-vendorsでした。[31]
Autoprefixerが成長するにつれ、Reworkはもはやそのニーズを満たすことができなくなりました。[32] 2013年9月7日、[33] Andrey SitnikはReworkのアイデアに基づいてPostCSSの開発を開始しました。[34]
3か月後、最初のPostCSSプラグインであるgrunt-pixremがリリースされました。[35] 2013年12月22日、Autoprefixerバージョン1.0がPostCSSに移行しました。[36]
PostCSSの場合、主なスタイルの焦点は錬金術です。[37]プロジェクトのロゴは賢者の石を表しています。[38] PostCSSのメジャーバージョンとマイナーバージョンは、アルス・ゴエティアの 悪魔 にちなんで名付けられています。[39]たとえば、バージョン1.0.0はMarquis Decarabiaと呼ばれます。
ポストプロセッサという用語は、混乱を招きました。[40] PostCSSチームは、PostCSSがテンプレート言語（プリプロセッサ）ではなくCSSツールであることを示すためにこの用語を使用しました。しかし、一部の開発者は、ポストプロセッサという用語はブラウザツール（たとえば、-prefix-free）に適していると考えています。[41] PreCSSのリリース後、状況はさらに複雑になりました。現在、PostCSSチームはポストプロセッサの代わりにプロセッサという用語を使用しています。[42]
参考文献
- ^ “リリース 8.4.49”. 2024年11月11日. 2024年11月26日閲覧。
- ^ 「postcss/LICENSE at main · postcss/postcss 」。GitHub。2013-09-24。2021-03-19に取得。
- ^ Bracey, Kezz (2015-09-23). 「PostCSS ディープダイブ: 知っておくべきこと」. Envato Tuts+ . 2021-03-19閲覧。
- ^ Sitnik, Andrey (2014-12-13). 「Evil Martians バッジを追加する · postcss/postcss@513f9c1」. GitHub . 2021-03-19に取得。
- ^ uMaxmaxmaximus; Sitnik, Andrey (2016-08-04). 「Webpack があるのに PostCSS が必要なのはなぜですか o_O? · Issue #861 · postcss/postcss」. GitHub . 2021-03-19に取得。
- ^ Bracey, Kezz (2015-10-21). 「PostCSS Deep Dive: PreCSS による前処理」. GitHub . 2021-03-19に取得。
- ^ Sitnik, Andrey (2015-06-24). Andrey Sitnik - PostCSS: Sass と LESS の後の未来 - YouTube. YouTube (ビデオテープ). BocoupLLC . 2021-03-19に閲覧。
- ^ webpack-contrib (2014-10-03). 「webpack-contrib/postcss-loader: webpack 用の PostCSS ローダー」. GitHub . 2021-03-19に取得。
- ^ Kuzmin, Andrey (2014-08-17). 「postcss/gulp-postcss: 1 回の解析で CSS を PostCSS プロセッサにパイプする」. GitHub . 2021-03-19に取得。
- ^ Nikitenko, Dmitry (2014-09-25). 「nDmitry/grunt-postcss: PostCSS を使用して CSS に複数のポストプロセッサを適用する」. GitHub . 2021-03-19に取得。
- ^ Krzeminski, Damian; Zimmerman, Ryan; Ciniawsky, Michael (2015-03-11). 「postcss/postcss-cli: postcss 用の CLI」. GitHub . 2021-03-19に取得。
- ^ Niemelä, Matias (2016-09-23). 「ブラウザで postcss を実行する · Issue #830 · postcss/postcss」. GitHub . 2021-03-19に取得。
- ^ Powell, Andrew (2016-01-26). 「shellscape/postcss-less: LESS を解析するための PostCSS 構文」. GitHub . 2021-03-19に取得。
- ^ Sitnik, Andrew (2015-08-09). 「postcss/postcss-scss: PostCSS 用の SCSS パーサー」. GitHub . 2021-03-19に取得。
- ^ Sitnik, Andrew (2016-01-04). 「postcss/sugarss: PostCSS のインデントベースの CSS 構文」. GitHub . 2021-03-20に取得。
- ^ 「postcss/autoprefixer: CSS を解析し、ルールにベンダー プレフィックスを追加する (Can I Use 著)」。GitHub。2021年 3 月 19 日閲覧。
- ^ 「css-modules/css-modules: css-modules に関するドキュメント」。GitHub 。2021年3月19日閲覧。
- ^ “css-loader/package.json at 5a003e00645d2ed0b3e759db06f58a08fbdd6745 · webpack-contrib/css-loader”. GitHub . 2016-08-15 . 2021-03-19に取得。
- ^ "stylelint/stylelint". GitHub . 2021年3月19日閲覧。
- ^ 「morishitter/stylefmt: stylefmt はスタイルシートを自動的にフォーマットするツールです」。GitHub 。2021年 3 月 19 日閲覧。
- ^ 「jonathantneal/precss: CSS で Sass のようなマークアップを使用する」。GitHub。2021年3 月 19 日閲覧。
- ^ 「csstools/postcss-preset-env: 最新の CSS をブラウザーが理解できるものに変換します」。GitHub。2021年3 月 19 日閲覧。
- ^ 「cssnano/cssnano: PostCSSエコシステム上に構築されたモジュラーミニファイア」。GitHub 。2021年3月19日閲覧。
- ^ 「MohammadYounes/rtlcss: カスケードスタイルシート (CSS) を左から右 (LTR) から右から左 (RTL) に変換するためのフレームワーク」。GitHub 。 2021年3月19日閲覧。
- ^ 「borodean/postcss-assets: PostCSS のアセットマネージャー」。GitHub 。2021年3月19日閲覧。
- ^ 「TrySound/postcss-inline-svg: SVG ファイルを参照し、その属性を CSS 構文で制御する PostCSS プラグイン」。GitHub。2021年3 月 19 日閲覧。
- ^ 「2createStudio/postcss-sprites: スタイルシートからスプライトを生成する」。GitHub 。2021年3月19日閲覧。
- ^ Holowaychuk, TJ (2012-09-01). 「最初のコミット · reworkcss/rework@0a7be25」. GitHub . 2019年7月21日閲覧。
- ^ Holowaychuk, TJ (2013-02-28). 「Modular CSS preprocessing with rework - TJ Holowaychuk」。Tumblr。2014-09-18にオリジナルからアーカイブ。2014-09-18に取得。
- ^ Sitnik, Andrey (2013-03-14). 「最初のコミット · postcss/autoprefixer@d36346e」. GitHub . 2019-07-21に取得。
- ^ Sitnik, Andrey (2013-03-28). 「プロジェクト名を autoprefixer に変更 · postcss/autoprefixer@419a77d」. GitHub . 2019-07-21に取得。
- ^ Gallagher, Nicolas (2014-06-04). 「自動プレフィックスのニーズを促進する · Issue #20 · reworkcss/css」. GitHub . 2019-07-21に取得。
- ^ Sitnik, Andrey (2013-09-07). 「Init project · postcss/postcss@2d96cea」. GitHub . 2019-07-21に取得。
- ^ Sitnik, Andrey (2015-09-07). 「PostCSS 2 回目の誕生日 — Martian Chronicles、Evil Martians チームのブログ」。Martian Chronicles、Evil Martians チームのブログ。2019年 7 月 21 日閲覧。
- ^ ロブ、ヴィエルズボウスキー (2013-12-14)。 「初期コミット · robwierzbowski/grunt-pixrem@0f7b662」。GitHub 。2019年7月21日に取得。
- ^ [ Sitnik, Andrey (2013-12-21). 「リリース 1.0 "Plus ultra" · postcss/autoprefixer」. GitHub . 2019-07-20に取得。
- ^ Tisäter, Marcus (2015-12-31). 「Mockup · Issue #4 · postcss/postcss.org」. GitHub . 2019-07-21に取得。
- ^ @PostCSS (2015-08-14) 「PostCSS のロゴは、金属を金に変えることができる賢者の石の錬金術記号です」(ツイート) – Twitter経由。
- ^ @Autoprefixer (2013-12-17). 「すべての PostCSS バージョン コード名は、錬金術書「Lemegeton Clavicula Salomonis」の悪魔のリストから取得されています」(ツイート) – Twitter経由。
- ^ Marohnić, Matija (2014-09-07). 「CSS の前処理と後処理 | Silvenon のブログ」。Silvenon のブログ。 2017-11-09 にオリジナルからアーカイブ。2017-11-09に取得。
- ^ 将来の仕様に基づく前処理の問題
- ^ @PostCSS (2015-07-28)。「間違いを認める時が来ました。「ポストプロセッサ」という用語は不適切でした。PostCSS チームはそれを使用することをやめました」(ツイート) – Twitter経由。
外部リンク
- 公式サイト