cssnext の custom-media を使っているファイルを import して、別ファイルで使う方法 #JavaScript

ハマったので備忘録です。

エラー内容

breakpoint.css

@custom-media --iPad-viewpoint (min-width: 768px);

foo.css

@import 'breakpoint.css';

.foo {
  @media (--iPad-viewpoint) {
    display: flex;
  }
}

タイトル通り、別ファイルで media query を呼んであげたいんだけど、以下のエラーが出る。

Missing @custom-media definition for '--iPad-viewpoint'. The entire rule has been removed from the output

postcss-loader で呼んでいる、 config ファイルに以下を追加してあげる。 postcss-cssnext だけではダメだった…

postcss.config.js

module.exports = {
  plugins: {
    'postcss-cssnext': {},
    'postcss-import': {}, // add
    'postcss-custom-media': {}, // add
  },
};

postcss-import@8.1.0 以上のバージョンである必要があるみたいです。
https://github.com/postcss/postcss-loader/issues/8#issuecomment-243294973

postcss-cssnext の devDependencies に postcss-import が入ってるからそのまま使っていたのが原因…。そりゃそうだよねっていう当たり前のところでつまづいていました。

なお、 postcss-custom-media は postcss-next の dependencies に入っているみたいなので、 install 不要でいけました。