@alio/preset-tailwind v1.3.1

alio

A little compiler utility.

npm i -D alio

Features

1. glob & multi-entries
2. modern JS
3. modern CSS
4. live-reload
5. convenient CLI
6. extensible via presets

Usage

alio can be used programmatically, or via its built-in CLI.

CLI

Alio supports two commands:

alio build
alio watch

Entries should be specified next:

alio watch src/foo.js

And you can have more than one:

alio watch src/foo.js src/bar.js

Or use a glob:

alio watch src/*.js

Output is specified with a flag after your entries:

alio watch src/*.js --out dist/

CLI Usage

If installed locally to a project, define an npm script:

{
  "scripts": {
    "build": "alio build src/*.js --out /dist"
  }
}

Or use your local copy directly:

./node_modules/.bin/alio build src/*.js --out /dist

If you'd like to use as a globally installed binary, use npx:

npx alio build src/*.js --out /dist

Configuration

alio also accepts a config in place of CLI flags. Here's an example:

module.exports = {
  in: "src/*.js",
  out: "/dist",
  env: {
    API_KEY: process.env.API_KEY
  },
  alias: {
    "@": process.cwd()
  },
  banner: "/** Added to top of file */",
  reload: false
};

By default, it looks for alio.config.js in the current working directory. To specify a different config, use the --config flag:

alio --config ./alio.production.js

config.in

The entrypoint in alio is mapped directly to Webpack.

It supports a single file:

module.exports = {
  in: "src/foo.js"
};

A glob:

module.exports = {
  in: "src/*.js"
};

An object:

module.exports = {
  in: {
    foo: "src/foo.js"
  }
};

An array:

module.exports = {
  in: ["src/foo.js", "src/bar.js"]
};

Or a combo, as an array:

module.exports = {
  in: ["src/*.js", "public/util.js"]
};

config.out

The out prop is also mapped directly to Webpack.

By default, you can just specify a directory:

module.exports = {
  out: "/dist"
};

But for more control, you can supply a Webpack-compatible output object:

module.exports = {
  out: {
    filename: "[name].[hash].js"
  }
};

config.env

Accepts an object with keys and values, which are passed to Webpack's Define Plugin.

config.alias

Creates handy aliases for imports. See Webpack docs.

config.banner

Adds a string to the top of all compiled files.

config.reload

In watch mode only, inserts a tiny live-reload script that will refresh you browser every time a file change is made.

Presets

In alio, presets are functions that apply groups of related settings. They make it easy to use alio in different contexts – like the web or node – and using different technologies – like PostCSS or SASS.

To use a preset, first install it:

npm i @alio/preset-postcss

Then reference it using its shortname:

module.exports = {
  presets: ["postcss"]
};

Available Presets

• @alio/preset-web - applies a solid foundation for most basic modern web needs
• @alio/preset-node - for compiling programs to run in node.
• @alio/preset-serverless - applies some helpful transforms specific to. serverless functions. Should be used in conjuction with @alio/preset-node.
• @alio/preset-postcss - allows you to import a CSS file and output a transpiled version according to your out settings.
• @alio/preset-sass - supports scss and sass dialect.
• @alio/preset-tailwind - enables usage of Tailwind CSS.

Creating Presets

Coming soon. For now, have a look at the existing presets in this repo for examples.

Multi-config

alio supports multiple configs using the config file as well. This allows you to run two or more compilation tasks at the same time.

module.exports = [
  {
    in: "frontend/index.js"
  },
  {
    in: "backend/index.js"
  }
];

API

Your can also use alio in a node script.

First, pass a config object, or array of configs, to the alio factory:

const alio = require("alio");

const bundle = alio([{ in: "src/foo.js" }]);

Then, call either build or watch:

bundle.build();

License

MIT License © Eric Bailey