Transforms

Babel

Poi uses babel-preset-poi which includes following features:

  • JSX (React / Vue / Custom)
  • babel-preset-env (IE9+ or node: 'current' in test env)
  • babel-macros
  • transform-runtime
  • dynamic-import
  • object-rest-spread
  • decorators-legacy
  • class-properties

Please note that Poi supports React JSX by default, but you can change it to Vue JSX or any JSX pragma by using the babel option in config file:

module.exports = {
  babel: {
    // Vue JSX
    jsx: 'vue',
    // Or `h` for preact
    jsx: 'h'
  }
}

However it's recommended to use .babelrc for this so that other tools like ESLint can use the same config.

Transpile modules in node_modules

A module inside node_modules won't be transpiled by Babel, but you can still transpile certains modules if you want:

module.exports = {
  babel: {
    // Include certain module names
    include: ['element-ready']
  }
}

Using .babelrc

Poi will respect .babelrc or any kind of babel config file in current working directory (process.cwd()). It will use this file instead of the default babel-preset-poi when it's present.

CSS

List of CSS transformations:

  • .css: By PostCSS
  • .scss.sass: By PostCSS and Sass
  • .styl.stylus: By PostCSS and Stylus
  • .less: By PostCSS and Less

PostCSS

This works out of the box.

By default we don't use any PostCSS plugins, feel free to add postcss.config.js or any kind of PostCSS config file in your project, it will be automatically picked up by Poi.

Sass/Stylus/Less

For these preprocessors to work, you need to install loader and compiler:

  • Sass: yarn add node-sass sass-loader --dev
  • Stylus: yarn add stylus stylus-loader --dev
  • Less: yarn add less less-loader --dev

CSS modules

CSS modules is supported by default without any configuration, any file ending with .module.css.module.scss.module.less etc will be treat as CSS modules.

Vue

To use PostCSS in Vue single-file component (.vue), no changes are required!

<style>
body {
  color: red
}
</style>

To use Sass/Stylus/Less, you need to set the lang attribute:

<style lang="scss">
.foo {
  .bar {
    color: red;
  }
}
</style>

<style lang="sass">
.foo
  .bar
    color: red;
</style>

<style lang="stylus" src="./external/style.styl">

TypeScript

Use @poi/plugin-typescript for TypeScript support:

yarn add typescript @poi/plugin-typescript --dev

📝 poi.config.js:

module.exports = {
  plugins: [
    require('@poi/plugin-typescript')()
  ]
}

Also make sure you have tsconfig.json in your project.

Optionally you can even write Poi config in TypeScript, just install ts-node in your project and use poi.config.ts instead:

📝 poi.config.ts:

import { Options } from 'poi'

const options: Options = {
  entry: 'src/index.ts',
  plugins: [
    require('@poi/plugin-typescript')()
  ]
}

export default options

Check out the example repo on GitHub.

GraphQL

GraphQL file is automatically transformed by graphql-tag/loader.

Reason / OCaml

Poi uses BuckleScript to compile Reason/Ocaml to JavaScript.

You need to install bs-platform and create a bsconfig.json in your project:

yarn add bs-platform --dev

Sample bsconfig.json:

{
  "name": "whatever",
  "sources": {
    "dir": "src",
    "subdirs": true
  },
  "package-specs": {
    "module": "es6",
    "in-source": true
  },
  "suffix": ".bs.js",
  "bs-dependencies": [
  ],
  "warnings": {
    "error": "+101"
  },
  "namespace": true,
  "refmt": 3
}

📝 src/index.js:

import { sum } from './sum.re'

console.log(sum(1, 2))
//=> 3

📝 src/sum.re:

let sum = (x, y) => x + y;