lasso-postcss v0.4.0
lasso-postcss
Lasso plugin to transform CSS using PostCSS.
Usage
1. Install the plugin and dependencies
npm install --dev lasso-postcss postcss
or
yarn add --dev lasso-postcss postcss
Also install the packages for any plugins you want to use.
2. Add plugin to your project.js
or lasso configuration
NOTE: This example assumes you're using marko-starter.
const isProduction = process.env.NODE_ENV === 'production';
module.exports = require('marko-starter').projectConfig({
lassoConfig: {
plugins: [
'lasso-marko',
{
plugin: 'lasso-postcss',
config: {
map: isProduction ? false : 'inline',
},
},
],
},
});
3. Install any required PostCSS plugins and create a PostCSS configuration file
See documentation for more information. An example setup:
Install dependencies:
yarn add --dev postcss-import postcss-nested autoprefixer
Then create a .postcssrc.js
file:
module.exports = {
plugins: {
'postcss-import': { path: ['src', 'node_modules'] },
'postcss-nested': {},
'autoprefixer': {},
}
};
Options
All options are the same as in postcss-load-config. It's generally recommended to use a standalone config file but you can also pass options via the lasso plugin config
object.
NOTE: You can use both a standalone config and lasso config together. Options are merged from both sources but the lasso config will override anything else.
Example:
{
plugin: 'lasso-postcss',
config: {
syntax: 'postcss-scss',
plugins: [
require('postcss-nested'),
require('autoprefixer'),
],
map: 'inline',
},
},
Source maps
Due to limitations in lasso, if you want external source maps it's necessary to add a mapPath
option to your config so this plugin knows where to save your source maps. Alternatively your can use inline source maps. See docs for configuration info.
NOTE: External source map files are named after the source filename NOT the compiled filename (no fingerprint etc.). This is due to a lasso limitation.
For example:
{
plugin: 'lasso-postcss',
config: {
map: true, // outputs inline source map (default)
},
},
or
const path = require('path');
...
{
plugin: 'lasso-postcss',
config: {
map: { inline: false },
mapPath: path.join(process.env.PWD, 'dist'),
},
},
// outputs external source map to: <root>/dist/<source_filename>.map
© 2018 We Are Genki