CSS→SCSS変換でカスケード順を壊さないために

CSSをSCSSへ変換するツールは多くありますが、見た目を整えるためにルールやメディアクエリの順番まで無条件に動かすと、変換後にスタイルの優先順位が変わることがあります。このツールは、まずカスケード順を保つことを優先しています。

通常モードでは、ルールの出現順を維持したまま、BEM形式の .c-button__label や .c-button--primary を &__label、&--primary のSCSSネストへ変換します。離れたルールを勝手に一つに統合せず、元のCSSが持つ優先順位をできるだけ残します。

ブレークポイント整理モードは任意です。単純な min-width は小さい順、max-width は大きい順に整えます。ただし、minとmaxの混在、範囲指定、複数条件など、順番を判断しにくいメディアクエリはそのまま残し、変換レポートで確認できるようにしています。

一方で、CSS Modules、@layer、複雑な @supports、ネスト済みCSS、SCSS独自構文の完全な理解や、自動でのプロパティ並べ替えは対象外です。万能な整形を目指すより、変換結果をレビューしやすく、意図しない見た目の崩れを減らすことを優先しています。