Skip to content

Commit

Permalink
docs: Add PostCSS instructions
Browse files Browse the repository at this point in the history
Resolves #38
  • Loading branch information
DangoDev authored and smalluban committed Feb 6, 2019
1 parent f5a9d32 commit 4a3dda9
Showing 1 changed file with 54 additions and 1 deletion.
55 changes: 54 additions & 1 deletion docs/template-engine/styling.md
Expand Up @@ -84,7 +84,7 @@ For external CSS content, use `style` helper method from the result of the `html
* **returns**:
* update function compatible with content expression

Style helper works the best with bundlers, which support importing text content of the CSS files (for [Webpack](https://github.com/webpack/webpack) use [css-loader](https://github.com/webpack-contrib/css-loader) without [style-loader](https://github.com/webpack-contrib/style-loader)):
Style helper works the best with bundlers, which support importing text content of the CSS files (for [webpack](https://github.com/webpack/webpack), use [raw-loader](https://github.com/webpack-contrib/raw-loader).

```javascript
// `styles` should contain text content of CSS file
Expand All @@ -96,3 +96,56 @@ const MyElement = {
`.style(styles),
};
```

### webpack Config

```js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ['raw-loader']
}
]
}
}
```

## Preprocessors (PostCSS, Sass, etc.)

If using external stylesheets (above), you can add a preprocessor such as [PostCSS](https://github.com/postcss/postcss) using a webpack config. You can alternately use `"sass-loader"` for Sass.

It’s important **not** to use `css-loader` or `style-loader` like you may be used to, as either will interfere with Hybrid’s ability to parse the stylesheet.

### Installation

```bash
npm install --save-dev raw-loader postcss postcss-loader postcss-preset-env
```

### webpack Config

```js
const postcssPresetEnv = require("postcss-preset-env"); // optional; for example (below)

module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
'raw-loader',
{
loader: 'postcss-loader',
// This is optional; just showing an example of a plugin w/ options
options: {
plugins: () => [postcssPresetEnv({ 'nesting-rules': true })]
}
}
]
}
]
}
}
```

0 comments on commit 4a3dda9

Please sign in to comment.