# Slite style

This module exposes the postcss sources and build versions of the Slite clients shared style.

## Install

```sh
npm i -S @slite/style
```

## Using build versions

If you don't want to mess with the postcss config and rely on pure CSS versions, you can simply import the files from the `dist` folder:

```js
import 'style/dist/index.css' // will import everything
// or ... target specific subsets:
import 'style/dist/variables.css'
```

## Using sources

It requires a bit more setup but it's possible to use the source version of the files. There are a few steps:

1 - install our postcss dependencies (if you don't use them already)

```sh
yarn add -D postcss-cssnext postcss-import
```

2 - make sure to use them by adding the following to your postcss.config.js:

```js
module.exports = {
  plugins: [
    // add the two following plugins:
    require('postcss-import')({
      path: ['node-modules', 'node_modules/@slite/style/src'],
    }),
    require('precss')(),
    require('postcss-cssnext')(),
  ],
}
```

3 - import in your js or post css files:

```js
import '@slite/style' // to import everything
import '@slite/style/src/variables.css' // ... or subsets
```

in post css:

```css
@import 'variables'; /* you'd better only import subsets from here */
```

## Contributing

### Build

You can either run the `build` or `dev` commands. `build` will do a production build (only once + minified) while `dev` will not minify and also stay in watch mode.

### Publishing

Please only use npm to publish, not yarn as it's too buggy.

```
npm version patch
npm publish
yarn upgrade-services
```