# Stylesheets

Parse CSS and add vendor prefixes to rules by Can I Use.

Autoprefixer uses Browserslist.

# styles.extname

styles.extname: string = 'css'

Compiling PostCSS/Sass/Less into CSS.

Supported CSS extensions: css, scss/sass and less.

🌰 For example:

balm.config = {
  styles: {
    extname: 'scss'
  }
  // Other Options...
};

# styles.minified

styles.minified: boolean = false

Ignore the environment and force CSS compression.

Tips: Often used with mix.serve in development mode.

# styles.atImportPaths

styles.atImportPaths: string[] = []

(Absolute path) An array of paths that Balm can look in to attempt to resolve your @import declarations.

# styles.options

styles.options: object

Cssnano optimisations. Reference options.

Defaults to:

{
  safe: true,
  autoprefixer: false,
  discardComments: {
    removeAll: true
  }
}

# styles.sassOptions

styles.sassOptions: object = {}

LibSass options.

# styles.lessOptions

styles.lessOptions: object = {}

Less plugin for Gulp. Reference options.

# styles.postcssEnvOptions

styles.postcssEnvOptions: object

PostCSS Preset Env options.

Defaults to:

{
  stage: 0,
  autoprefixer: {
    flexbox: 'no-2009'
  }
}

# styles.postcssPlugins

styles.postcssPlugins: object[] = []

PostCSS plugins.

# styles.postcssLoaderOptions

interface PostcssLoaderOptions {
  exec?: boolean;
  parser?: string | object;
  syntax?: string | object;
  stringifier?: string | object;
  config?: object;
  plugins?: object[] | Function; // NOTE: The same to `styles.postcssPlugins`
  sourceMap: string | boolean;
}

styles.postcssLoaderOptions: PostcssLoaderOptions = { sourceMap: false }

PostCSS loader for webpack. Reference options.

# styles.imageBasePath

styles.imageBasePath: string = '../'

The path to use in CSS referring to sprite image location.

# styles.sprites

styles.sprites: string[] = []

Convert a set of images into a spritesheet and CSS variables.

🌰 For example:

// Input:
// `/path/to/workspace/${roots.source}/${paths.source.img}/icons/*.png`

balm.config = {
  styles: {
    sprites: ['icons']
  }
  // Other Options...
};

// Output:
// image: `/path/to/workspace/${roots.target}/${paths.target.img}/icons-sprites.png`
// css: `/path/to/workspace/${roots.source}/${paths.source.css}/sprites/_icons.${styles.extname}`

# styles.spriteRetina

styles.spriteRetina: boolean = false

Enable retina spritesheet generation.

🌰 For example:

// Input:
// `/path/to/workspace/${roots.source}/${paths.source.img}/icons/*.png`
// `/path/to/workspace/${roots.source}/${paths.source.img}/icons/*@2x.png`

balm.config = {
  styles: {
    sprites: ['icons'],
    spriteRetina: true
  }
  // Other Options...
};

// Output:
// image: `/path/to/workspace/${roots.target}/${paths.target.img}/icons-sprites.png`
//        `/path/to/workspace/${roots.target}/${paths.target.img}/[email protected]`
// css: `/path/to/workspace/${roots.source}/${paths.source.css}/sprites/_icons.${styles.extname}`

# styles.spriteParams

styles.spriteParams: object = {}

Spritesmith parameters.