並び順

ブックマーク数

期間指定

  • から
  • まで

1 - 40 件 / 53件

新着順 人気順

PostCSSの検索結果1 - 40 件 / 53件

  • Flow/PostCSS の大規模プロジェクトを TypeScript/emotion に移行して数万行のプルリクを投げた話 - JX通信社エンジニアブログ

    JX通信社CDOの小笠原(@yamitzky)です。 AI 緊急情報サービスの「FASTALERT」は、報道機関や公共機関に導入いただいている(お堅めな) BtoB SaaS でありながら、 事業開始当初から React を使った Single Page Application(SPA) として作っています。 2017年には、より信頼性のあるフロントエンドを提供するため、 Facebook の Flow を導入しました。しかし、昨今の TypeScript の盛り上がりや、社内の他プロダクトで TypeScript を使っていることなどを受けて、フロントエンドのアーキテクチャを大幅に見直しました。 今回取り組んだ大きな変更は、 Flow から TypeScript への移行 (型チェックの移行) TypeScript 化に合わせた、 babel-plugin-proposal-*** の廃

      Flow/PostCSS の大規模プロジェクトを TypeScript/emotion に移行して数万行のプルリクを投げた話 - JX通信社エンジニアブログ
    • 2020-09-21のJS: Moment.jsのステータス、PostCSS 8.0.0、Vue 3.0.0、DOMの順序と表示順序の一致

      JSer.info #506 - Moment.jsのウェブサイトにProject Statusが追加されています。 Moment.js | Docs Moment.jsに新しい機能の追加などはしないメンテンスモードであることが書かれています。 互換性保ちつつ新しい機能や仕組みを入れるのは難しい状態であるため、別のライブラリの利用を推奨しています。 代替となるライブラリとしてLuxon、Day.js、js-joda、date-fnsについて紹介されています。 また、Intl APIや現在策定中のTemporalについても書かれています。 このプロジェクトステータスの明示の発端は、Chrome Dev ToolsのLighthouseにmoment.js利用の警告を表示したことに起因しています。 If JavaScript libraries are proving costly, repl

        2020-09-21のJS: Moment.jsのステータス、PostCSS 8.0.0、Vue 3.0.0、DOMの順序と表示順序の一致
      • 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

          GitHub - postcss-rs/postcss-rs: 🚀 Fast and 100% API compatible postcss replacer, built in Rust
        • PostCSS で先取りする、未来の CSS 7選

          はじめに この記事は 個人的なアドベントカレンダー2021 の1日目です。 次回: postcss-preset-env PostCSS のプラグイン postcss-preset-env は、未来の機能候補として実際に議論されている記法や機能を Polyfill するプラグインをまとめたものです。 postcss-preset-env では、 custom property (var(--some-value)) や nesting rules (ネストしたセレクタ) といった Sass などのプリプロセッサでお馴染みの機能から、ニッチだが便利な機能まで、さまざまな策定中の機能を取り入れることができます。 また、いずれも策定中の機能であるため、将来、CSSの機能として組み込まれる可能性がある機能も含まれており、より標準に近い形で新機能を使えます。 (策定中のため、書き方が変わったり、機能

            PostCSS で先取りする、未来の CSS 7選
          • 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-preset-envで少し未来のCSSを予習する - 弁護士ドットコム株式会社 Creators’ blog
            • CSSの勉強の1つとしてPostCSS Preset Envを眺める - Qiita

              この記事の概要 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の勉強の1つとしてPostCSS Preset Envを眺める - Qiita
              • 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

                  Sassを使わずにPostCSSだけでCSSを書く理由
                • postcss-jsxで React x CSSinJSを快適にする - Qiita

                  自己紹介 @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 ライブラリ

                    postcss-jsxで React x CSSinJSを快適にする - Qiita
                  • 自作TypeScriptパッケージをそこそこいい感じにビルドする (Rollup / tsc / PostCSS / Babel) - Qiita

                    自作TypeScriptパッケージをそこそこいい感じにビルドする (Rollup / tsc / PostCSS / Babel)TypeScriptbabelpostcssrollup.jsrollup やりたいこと Rollupで下記を達成したいと思います。 自作TypeScriptプロジェクトのビルド ES6 Modules (import ...) での出力 Webpackで参照するにはこちらの形式が有利です(TreeShaking) CommonJS (require(...)) での出力 NodeJSで参照するにはこちらの形式が必要です 型宣言(*.d.ts)の出力 ソースマップ(*.js.map)の出力 ビルドしたJavaScriptをBabelでトランスパイルする ソース中で参照しているCSSはPostCSSで処理しながら、一つのファイルとして出力 外部ライブラリ(node

                      自作TypeScriptパッケージをそこそこいい感じにビルドする (Rollup / tsc / PostCSS / Babel) - Qiita
                    • GitHub - postcss/postcss-media-minmax: Writing simple and graceful Media Queries!

                      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

                        GitHub - postcss/postcss-media-minmax: Writing simple and graceful Media Queries!
                      • PostCSS 8 for end users

                        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 for end users
                        • npm-scriptsでdart-sass → postcssのタスクを作る。(ディレクトリ指定 & watch)

                          で開発開始。sassファイルを更新すると処理が走ってdist/に処理結果のcssが吐き出される。 cssファイルの一時経由先として「tmpCssディレクトリ」を設けてるのがコツ。 「watch:sassToPostcss」から連なる処理から解説 まず「build:sass」でsrc/sass/内の(.scss|.sass)を、tmpCss/へトランスパイル。次にwatchを効かせる為、追加オプション「-- -w」を足して「build:sass」「build:postcss」を実行。 「tmpCssディレクトリ」が必要だった理由 直でsassからdist/に吐き出したcssを、postcssの「--replace」で上書きできればシンプルだった…。しかし、いざ実行するとpostcssが「--replace を使うと、同時に --watchが出来ないよ!」と英語で怒ってくる。しぶしぶ経由ディレ

                          • 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

                              PostCSS 8.0: Plugin migration guide—Martian Chronicles, Evil Martians’ team blog
                            • How to Create Gutenberg Block Plugin using wp-scripts with PostCSS Build Process - Jeffrey Carandang

                              How to Create Gutenberg Block Plugin using wp-scripts with PostCSS Build Process I’ve been writing tutorials on how to extend Gutenberg Block Editor and having a lot of requests to create one for “Creating Block and Build Processes”. In this article, I’ll be very happy to do something about this request with added PostCSS build processing to make it more useful and extra special. I hope this will

                                How to Create Gutenberg Block Plugin using wp-scripts with PostCSS Build Process - Jeffrey Carandang
                              • prettier-stylelintのエラー「Error: Couldn't resolve parser "postcss"」を解消する | shimu.dev

                                prettier-stylelintのエラー「Error: Couldn't resolve parser "postcss"」を解消する ちなみに写真は私ではないです。 このブログのソースコードはフロントに弱い人間(ちなみに私のこと)が書いてます。結果、jsの文末にセミコロンがついてたりついてなかったりしてしまってて。scssも同様です。残念。 そこで、prettier-eslintとprettier-stylelintを導入した。 しかし、フォーマット時にprettier-stylelintがエラーが出す。バージョンは0.4.2。 Error: Couldn't resolve parser "postcss" こんなエラーメッセージ。 原因 原因は、依存しているパーサーの名前がpostcssからcssに変わったためらしい。このエラーは、prettierのバージョンが2.0.4から起き

                                  prettier-stylelintのエラー「Error: Couldn't resolve parser "postcss"」を解消する | shimu.dev
                                • rollup-plugin-postcssを調べていたメモ - Qiita

                                  これは何 コンポーネントライブラリを作るためにRollupを使っています https://www.npmjs.com/package/rollup-plugin-postcss RollupでCSS Modulesで書いたスタイルをバンドルするためにrollup-plugin-postcssを使っていて、設定にハマってしまったのでメモとして残す記事です この記事は「単にライブラリを使用するだけでは解決できなさそうで、ライブラリ自体にPull Requestを出すでもしないといけない」ことを示すための記事であり、根本的な解決には至りません。ライブラリ使用を諦めるか、次善策として別なオプションを使うかを判断するのに参考にしてもらえれば幸いです。 前提 CSS Modulesを扱うためにrollup.config.jsの中でpluginsでrollup-plugin-postcssを使いextr

                                    rollup-plugin-postcssを調べていたメモ - Qiita
                                  • GitHub - yunusga/postcss-sort-media-queries: PostCSS plugin for sorting and combining CSS media queries with mobile-first / desktop-first methodologies.

                                    PostCSS plugin for sorting and combining CSS media queries with mobile-first / desktop-first methodologies.

                                      GitHub - yunusga/postcss-sort-media-queries: PostCSS plugin for sorting and combining CSS media queries with mobile-first / desktop-first methodologies.
                                    • PostCSSは開発標準ツールになるのか検証しました - RAKUS Developers Blog | ラクス エンジニアブログ

                                      こんにちは、株式会社ラクスで先行技術検証を行っている技術推進課の@t_okkanです。 技術推進課では、新サービス立ち上げ時の開発速度アップを目的に、現在ラクスでは採用されていない新しい技術の検証を行う、技術推進プロジェクトがあります。 今回はその技術推進プロジェクトで、PostCSSについて検証を行いましたので、その結果の報告を行います。PostCSSの仕組みや利点を中心に紹介するため、実践的な話の紹介は少ないです。PostCSSの実践的な話はまた別の記事で紹介できればと思います。 なお、別テーマの取り組みや、過去の取り組みに関しては、こちらからご覧ください。 tech-blog.rakus.co.jp はじめに CSSのビルドプロセス PostCSS アーキテクチャ PostCSSでできること PostCSSは開発標準ツールになり得る 導入コストが非常に低い 拡張性の高い統一化されたC

                                        PostCSSは開発標準ツールになるのか検証しました - RAKUS Developers Blog | ラクス エンジニアブログ
                                      • GitHub - csstools/postcss-logical: Use logical properties and flow-relative values in CSS

                                        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

                                          GitHub - csstools/postcss-logical: Use logical properties and flow-relative values in CSS
                                        • 【SASS】メディアクエリをまとめるプラグイン「mqpacker」の使い方【gulp】【PostCSS】 | B-side Journal

                                          SASSを書いていると、どうしてもメディアクエリを細切れに記述する事になります。 細切れのままCSSにコンパイルするのはサイトの読み込み速度に悪影響ですし、何より可読性が悪くなるので、メディアクエリ毎にまとめる必要があります。 今回は、PostCSSのプラグイン「mqpacker」を使ってメディアクエリをまとめる手順を書いていきます。 PostCSSの「mqpacker」でメディアクエリをまとめる まず簡単に環境を整えていきます。 Macの場合はターミナル、Windowsの場合はコマンドプロンプトを使ってプロジェクトフォルダに移動します。 コマンドを入力して以下のプラグインをインストール npm install --save-dev gulp npm install --save-dev gulp-sass さらに、メディアクエリをまとめる為の「mqpacker」をインストールするのですが

                                            【SASS】メディアクエリをまとめるプラグイン「mqpacker」の使い方【gulp】【PostCSS】 | B-side Journal
                                          • [Nuxt.js] postcss-nesting を使用する方法 - やくだつブログ

                                            そろそろ脱 Sass(SCSS)をしていきたいなと思いまして PostCSS を積極的に使うようにしています。 もっとも使用頻度の高い『セレクタのネスト』から導入しようと調べたところ、postcss-nested と postcss-nesting のふたつがありました。なにが異なるのか。 簡単にいうと postcss-nested は Sass の気分で書けるもの、postcss-nesting は CSS Nesting Module に準拠した形のものです。 // postcss-nested h1 { span { color: red; } } // postcss-nesting h1 { // & が必要! & span { color: red; } } nesting selector として入れ子にする際に & が必要になります。 postcss-nested のほうが

                                              [Nuxt.js] postcss-nesting を使用する方法 - やくだつブログ
                                            • Release 8.0 “President Ose” · postcss/postcss

                                              PostCSS 8.0 brings new plugin API, node_modules size reduction, better source map support, and CSS parser improvements. Check out a day-by-day diary of PostCSS 8.0 development process. See Migration Guides for end-users and for plugin developers. Thanks to Sponsors With more than 100 M downloads per month, it becomes hard to support PostCSS in free time. For instance, getting the 8.0 release ready

                                                Release 8.0 “President Ose” · postcss/postcss
                                              • SassからPostCSSにしようとして「いや、今じゃない」と移行をやめた話| cumak

                                                ※2024年現在はgulpからAstroに移行し、自分の制作環境に対する考え方も少し変わってきています。この記事は当時のものです。 長年gulpとSassでやってきましたが、最近思うところがあり、npm-scriptとPostCSSに変えようと最近頑張っていました。 …が、SassでできていたことがPostCSSでできなくなる部分が あり、またそれを許容するほどのメリットも今のところ感じられず、これは今乗り換えるべきじゃない、現状維持だという結論に至りました。 移行しようとした理由 dart-sassへの移行に苦労した Sass疲れた…と感じた最近の出来事が、dart-sassへの移行です。 下記ブログの時です。 Dart Sassに移行(Gulp / Node 16 / glob対応) 当時、globbingをdart-sassで使う方法がググってもなく、npmパッケージをnpmサイトで

                                                  SassからPostCSSにしようとして「いや、今じゃない」と移行をやめた話| cumak
                                                • GitHub - takamoso/postcss-aspect-ratio-polyfill: A PostCSS plugin to support aspect-ratio property.

                                                  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

                                                    GitHub - takamoso/postcss-aspect-ratio-polyfill: A PostCSS plugin to support aspect-ratio property.
                                                  • PostCSS 8.0 is coming: Here's what it brings—Martian Chronicles, Evil Martians’ team blog

                                                    PostCSS 8.0 now has its dedicated branch in the project repo. In keeping up with the tradition, the name of the new major release comes from medieval demon lore: President Ose. Andrey Sitnik, the framework’s creator, unveils the upcoming changes that are now officially in the works thanks to the strong support from the open source community. PostCSS, the framework for processing CSS with JavaScrip

                                                      PostCSS 8.0 is coming: Here's what it brings—Martian Chronicles, Evil Martians’ team blog
                                                    • PostCSSから5年、CSSの今とこれから - bagelee(ベーグリー)

                                                      パワフルなグリッドシステム。 これもすごく便利です。 .ColumnSection__grid div { lost-column: 1/1; } @media (min-width: 400px) { .ColumnSection__grid div { lost-column: 1/3; } } @media (min-width: 900px) { .ColumnSection__grid div { lost-column: 1/6; } } このコードで、0~400px の間は1カラムに、 400-900pxの間は3カラムに、900px~は6カラムになります。 CSSの今 PostCSSは今年の11月で5年目を迎えました! それに伴い、PostCSSの開発者のAudrey SitnikがPostCSSやCSSの今とこれからに関するブログを書いています。 そこから、個人的に気になっ

                                                        PostCSSから5年、CSSの今とこれから - bagelee(ベーグリー)
                                                      • Mobile Safariでの100vhが気に入らないからPostCSSで解決した - Qiita

                                                        CSSのvhとかのviewport unitsって画面ぴったりな要素や画面サイズに合わせた要素が簡単に作れて便利ですよね。 しかし残念ながらvhはMobile Safariだとぴったりいかない場合があります。 これはアドレスバーの高さを計算に入れる入れないの問題に起因しているようです。 色々な解決策 Mobile Safariで100vhを画面ぴったりにしたい場合、Stack Overflowには色々な解決策があります。 Stack Overflow - How to fix vh(viewport unit) css in mobile Safari? Viewport Units Buggyfill使う ちゃんと試せてないけど、実行時にvh単位の値を上書きするCSSを付与する様子。 jQueryで対応する

                                                          Mobile Safariでの100vhが気に入らないからPostCSSで解決した - Qiita
                                                        • Rails 6 with Webpacker 6, Tailwind 2, Postcss 8 and some default setup

                                                          It is always nice to follow a detailed guide and steps when building new rails apps. Below is a bit of guidance and step-by-step instructions. Create a new project; rails new project_name -d postgresqlInitial gem setup

                                                            Rails 6 with Webpacker 6, Tailwind 2, Postcss 8 and some default setup
                                                          • 【gulp エラー】Error: PostCSS plugin autoprefixer requires PostCSS 8. Update PostCSS or downgrade this plugin. - Qiita

                                                            【gulp エラー】Error: PostCSS plugin autoprefixer requires PostCSS 8. Update PostCSS or downgrade this plugin.errornpmgulp,Autoprefixer エラーが発生した状況 npm で autoprefixer を v9 から v10 にアップデートし、gulp のCSSタスク(postcss関連含む)を走らせた時に発生 原因 autoprefixer v10 で、必要とする postcss が v8 以上となった gulp-postcss(v8.0 2年前から更新されていない) が依存している postcss が v7 のためエラーとなる 補足:postcss-cli も同様らしい 一時的な対処法 ★★TODO: 後でちゃんと対処(時間がないのでとりあえず) autoprefix

                                                              【gulp エラー】Error: PostCSS plugin autoprefixer requires PostCSS 8. Update PostCSS or downgrade this plugin. - Qiita
                                                            • PostCSS 実践 - Qiita

                                                              PostCSS 入門の続きです。 実際に開発で利用できるPostCSSの環境をnpm-scriptsで作成していきます。 作成する環境の仕様 PostCSSを利用する。(脱Sass) npm-scriptsを利用する。(依存モジュールを減らすため、webpackやgulpは利用しない) srcフォルダ内の.pcssファイルをを変換し、publicフォルダに.cssファイルを出力する。 サブモジュールはファイル名のプレフィックスに_をつける。 開発用ビルドは、ファイルの変更を検知し自動的に再ビルドを行う。 開発用ビルドは、ソースマップを出力する。(本番用ビルドでは出力しない。) 環境の確認

                                                                PostCSS 実践 - Qiita
                                                              • compass-mixins から PostCSS の Autoprefixer に移行する - Sansan Tech Blog

                                                                こんにちは。 Eight でフロントエンドエンジニアをしている鳥山(@pvcresin)です。 最近、事業部長に Slack の絵文字をプレゼントするという実績を解除しました。 早く使われないかなとそわそわしています。 さて今回は、Sass の mixin を集めたライブラリである compass-mixins を消し、Autoprefixer に移行した話をしたいと思います。 Sass の mixin PC 版 Eight では、スタイリングに CSS のプリプロセッサである Sass(SCSS 記法)を使っており、 webpack で CSS に変換しています。 Eight での実際の使われ方についてはこちらの記事で紹介しています。 buildersbox.corp-sansan.com Sass には、あらかじめスタイルを定義しておくことで、そのスタイルを使い回すことができる mix

                                                                  compass-mixins から PostCSS の Autoprefixer に移行する - Sansan Tech Blog
                                                                • PostCSS 、 Autoprefixer の力を借りたかった話 - vaguely

                                                                  はじめに コンパイラーを選ぶ PostCSS ファイルを postcss-cli でコンパイルする はじめに ASP.NET Core + TypeScript ってみる 1 ASP.NET Core + TypeScript ってみる 2 ASP.NET Core + TypeScript ってみる 3 相変わらず HTML や TypeScript と戯れているわけなんですが、動きだけでなく見た目の部分も重要です。 で、まず全体の配置を指定したいと思ったのですが、これには CSS Grid を使うのが良さそうな気がしました。 CSS グリッドレイアウト - CSS: カスケーディングスタイルシート - MDN CSS Grid Layout で、調べてみると IE11 でも使うことができるらしい、と。 IEでも大丈夫!CSS Gridを使用する時の注意点と実装方法 - コリス CSS

                                                                    PostCSS 、 Autoprefixer の力を借りたかった話 - vaguely
                                                                  • postcss-preset-envでpostcss-nestingを使う - Qiita

                                                                    postcss-preset-envを使っていて、CSSをネストさせたいなと思いました。 しかし、普通にオプション付け加えずに書いても、もちろん反映されない。 ググっても、あまりpostcss-preset-envとの組み合わせの情報はなく、postcss-nesting単体のものが多かったため、書き残しておく。 'nesting-rules': true を features に追記すればよいだけ postcss.config.jsのfeatures欄に'nesting-rules': trueを追記すればよいだけでした。 他のpostcss-custom-propertiesとかは'custom-properties'のようにしてfeatureを設定するので、同じ流れで'nesting'を使おうとしたら、上手くいかず少し困った経緯があります。 postcss-preset-envのis

                                                                      postcss-preset-envでpostcss-nestingを使う - Qiita
                                                                    • webpackでPostCSSを使ったベンダープレフィックスの追加やCSSのminifyを行う | オウンドメディア | 大阪市天王寺区ホームページ制作|合同会社デザインサプライ-DesignSupply.LLC-

                                                                      今回もGulpからwebpackへのフロントエンド開発環境に移行するケースについてまとめていきたいと思います。前回記事

                                                                        webpackでPostCSSを使ったベンダープレフィックスの追加やCSSのminifyを行う | オウンドメディア | 大阪市天王寺区ホームページ制作|合同会社デザインサプライ-DesignSupply.LLC-
                                                                      • npm: heroicons, postcss-import, framer-motion のアップデート メモ (Breaking Changes) - Qiita

                                                                        npm: heroicons, postcss-import, framer-motion のアップデート メモ (Breaking Changes)JavaScriptReactframer-motionheroiconspostcss-import 1. heroicons v1 → v2 Release v2.0.0 · tailwindlabs/heroicons アイコンの変更。v1 と v2 は異なるアイコンと見なし、好みの方を使えば良いとある スタイルが2つ(Outline, Solid) から3つ(+ Mini)に増えた Before: import { ... } from '@heroicons/react/solid' After: import { ... } from '@heroicons/react/24/solid' or import { ... } fr

                                                                          npm: heroicons, postcss-import, framer-motion のアップデート メモ (Breaking Changes) - Qiita
                                                                        • 【PostCSS】SassをやめてPostCSSでCSSに変換するようにした

                                                                          2021年6月28日現在、PostCSSのみの環境には移行できていません。 ここ数年、CSSはSass(scss記法)で書いて、npm-scriptsでcssに変換するという流れでした(Compassを利用したり、gulpで変換したりな時期もありましたが)。特に不満はなかったのですが、なんとなくPostCSSだけでいけそうだったので、SassをやめてPostCSSだけの環境に移行してみました。 Sassのときのこと 正確にはautoprefixerやcss-declaration-sorter、stylelintなどは利用していたので、Sass+PostCSS環境からPostCSSのみの環境への移行。 主に利用していたSassの機能は、 変数mixinファイルのインポートネスト くらいで、その他、rgbaに16進数での色指定ができることが便利だなとか、たまにif文書いたりする程度でした。

                                                                            【PostCSS】SassをやめてPostCSSでCSSに変換するようにした
                                                                          • PostCSSを使ってtailwindcssをインストールする手順|シンマデポカポカ

                                                                            このページの概要 webpackで構築したフロントエンド開発環境でtailwindcssをインストールするための手順です。PostCSSを利用するため、PostCSSのインストールについても解説しています。 前回のwebpackを用いたHTML/CSSコーディング環境の構築に続き、tailwindcssを導入します。 https://blog.yusan009.com/webpack-html-css/ PostCSSはCSSのプリプロセッサで、プラグインを入れるとCSSファイルに対して色々な前処理ができます。 このプラグインの1つとして、tailwindcssを読み込みます。 作業の流れ 作業はそんなに多くないです。ハマりさえしなければすぐに終わります。 PostCSSをインストールして、webpackで使える様に設定するtailwindcssをインストールして、バンドルされるように設定

                                                                              PostCSSを使ってtailwindcssをインストールする手順|シンマデポカポカ
                                                                            • CSSの勉強の1つとしてPostCSS Preset Envを眺める - Qiita

                                                                              この記事の概要 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の勉強の1つとしてPostCSS Preset Envを眺める - Qiita
                                                                              • Designing with Tailwind CSS: Setting up Tailwind and PostCSS

                                                                                概要プレスルーム著作権お問い合わせクリエイター向け広告掲載開発者向け利用規約プライバシーポリシーとセキュリティYouTube の仕組み新機能を試してみる© 2024 Google LLC

                                                                                  Designing with Tailwind CSS: Setting up Tailwind and PostCSS
                                                                                • Rails7にpostCSSを導入する - Qiita

                                                                                  前提 事前にyarnのインストールが必要 どうやら「Rails new」時に、postcssや、esbuildが「yarn」を使用してインストールされる模様 ※別にnpmでいいや〜の私はこのせいで少し戸惑った💦 プロジェクトの作成 jオプションでJavaScriptのビルダー指定 cオプションで使用するCSSフレームワークにpostCSSを指定 色々インストールされる(適当) package.jsonにscriptsが登録 yarn + 以下のコマンドで、ビルド処理が可能。 yarn build => JavaScriptのバンドル yarn build:css => CSSファイルのバンドル処理 但し、Rails7にはbin/devコマンドが用意されているため、こちらを使用するのが一般的。 (CSS,JSの変更を検知して、自動でビルド処理してくれる優れもの) gem "jsbundli

                                                                                    Rails7にpostCSSを導入する - Qiita