postcss-cli で postcss-cssnext

postcss-cli で postcss-cssnext を使う場合のメモ。 （ついでに、sugerss と postcss-import も）

ディレクトリ構成

.
├── dist/
├── package.json
├── postcss.config.js
└── src/

セットアップ

$ yarn add postcss-cli postcss-import postcss-cssnext sugerss --dev

postcss.config.js

module.exports = () => ({
  map: false,
  parser: 'sugarss',
  plugins: [
    require('postcss-import'), // postcss-import を先に記述
    require('postcss-cssnext')
  ]
})

対象ブラウザを指定したい場合

module.exports = () => ({
  map: false,
  parser: 'sugarss',
  plugins: [
    require('postcss-import'),
    require('postcss-cssnext')({
      browsers: [
        '> 1%',
        'last 2 versions',
        'Firefox ESR',
        'Opera 12.1'
      ]
    })
  ]
})

package.json

{
  "scripts": {
    "build": "postcss --ext css -d dist src",
    "watch": "postcss --ext css -d dist src -w --verbose"
  },
  "devDependencies": {
    "postcss-cli": "^5.0.1",
    "postcss-cssnext": "^3.1.0",
    "postcss-import": "^11.1.0",
    "sugarss": "^1.0.1"
  }
}

ビルド

$ yarn build

before

src/style.sss

@import 'hoge.sss'

:root
  --bg-color: gray(10%)
  --font-color: #333
  --main-color: red

@custom-media --small-viewport (width <= 800px)

html
  color: var(--font-color)
  background-color: var(--bg-color)

a
  color: var(--main-color)

  & span
    color: var(--font-color)

  @nest span &
    color: blue

@media (--small-viewport)
  a
    color: yellow

src/hoge.sss

// hoge
.hoge
  display: none

after

dist/style.css

/* hoge */
.hoge {
  display: none
}
html {
  color: #333;
  background-color: rgb(26, 26, 26)
}

a {
  color: red
}

a span {
  color: #333
}

span a {
  color: blue
}

@media (max-width: 800px) {
  a {
    color: yellow
  }
}

参考：

Using postcss-cssnext