WARNING: This project is no longer maintained. Marko/lasso never worked as we would have liked and so we've migrated to Svelte. See minna-ui for our new web UI framework.

---

lasso-postcss

Lasso plugin to transform CSS using PostCSS.

IMPORTANT: Lasso currently runs transforms per each component, not once globally. This plugin is useful for processing syntax (e.g. nested selectors) but it's highly recommended to do minification after lasso processing.

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