[TOC]
## Description
The principle of CSS is easy to grasp, yet CSS is complicated to write at large scales.
We want to offer the best experience for writing CSS that is compatible with most browsers without the long configuration process.
## Features
**PostCSS** is a CSS parser that supports plugins, countless plugins are maintained by a big community, we use a handful of them.
[Features and examples](CSS_Features.md)
## Linting
**Stylelint** is a wonderful tool to lint CSS in according to your rules, we have a custom configuration preset for Stylelint that comes pre-configured.
Stylelint is provided automatically in this preset by also including [`crafty-preset-stylelint`](05_Packages/05_crafty-preset-stylelint/index.md).
## Installation
```bash
npm install @swissquote/crafty-preset-postcss --save
```
```javascript
module.exports = {
presets: [
"@swissquote/crafty-preset-postcss",
"@swissquote/crafty-runner-webpack", // optional
"@swissquote/crafty-runner-gulp", // optional
],
};
```
## Usage with Webpack
Webpack defines the right loaders to support CSS.
To use it, add `import "myfile.scss"` in your Webpack imported file.
### Hot Module Replacement
When setting `hot: true` in your `crafty.config.js` for your main JavaScript bundle, you can enable Hot Module Replacement.
With this, the CSS files imported in your Webpack bundles are automatically reloaded upon changes.
This is used inside `crafty watch`, the build mode will not take it into account.
### Extracting CSS
By default, the CSS will be embedded in your bundle, but you can provide the `extractCSS` option to extract your styles using the `MiniCssExtractPlugin`.
`extractCSS` controls if the CSS should be embedded within the JavaScript bundle or extracted in a separate file.
By default, the default is that the CSS content remains within the main file.
**Possible options**
| Value | Note |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `false` | Default Behaviour, CSS stays in the JavaScript bundle, added to the page via a `