postcss-map-get

PostCSS plugin to transform SASS Function map-get.

Why?

Adds the ability to use sass like Map Function map-get.

Install

$ npm install postcss postcss-map-get

Note: This project is compatible with node v8+

Usage

// Dependencies
import fs from 'fs';
import postcss from 'postcss';
import mapGet from 'postcss-map-get';

// CSS to be processed
var css = fs.readFileSync('css/input.css', 'utf8');

// Process CSS
var output = postcss()
  .use(mapGet())
  .process(css, {
    from: 'css/input.css'
  })
  .css;

console.log(output);

Returns the value in a map associated with the given key. If the map doesn't have such a key, returns null.

Example

input.css

body {
  background: map-get((
    body: #fff,
    main-red: #c53831,
    link-blue: #0592fb
  ) !default, body);

  min-width: map-get((
    xxs: 0,
    xs: 576px,
    sm: 768px,
    md: 992px,
    lg: 1280px,
    xl: 1360px,
    xxl: 1600px
  ) !default, lg);

  max-width: 100%;
}

output.css

body {
  background: #fff;

  min-width: 1280px;

  max-width: 100%;
}