How to use postcss - 10 common examples

export default function(t, name, opts, postcssOpts, warnings)
{
  opts = assign({ path: "test/fixtures/imports" }, opts)
  return postcss(atImport(opts))
    .process(read(name), postcssOpts || {})
    .then((result) => {
      var actual = result.css
      var expected = read(name + ".expected")

      // handy thing: checkout actual in the *.actual.css file
      fs.writeFile("test/fixtures/" + name + ".actual.css", actual, () => {
        t.is(actual, expected)

        if (!warnings)
          warnings = []

        result.warnings().forEach((warning, index) => {
          t.is(
            warning.text,
            warnings[index],

function processLayoutConf(css, result, rule, decl, grids, layout) {
  // Look for layout prop in rule.
  if(decl.prop == 'layout') {
    var sels = [];
    layout.childrenRule = null;
    layout.pseudoRule = null;
    layout.values = decl.value.split(/\s*,\s*|\s/);
    layout.container = clone(defaults.container);
    layout.item = clone(defaults.item);
    layout.pseudo = clone(defaults.pseudo);
    
    for (var i = 0; i < rule.selectors.length; i++) {
      sels.push(rule.selectors[i] + ' > *');
    };

    layout.childrenRule = postcss.rule({selector: sels.join(', '), source: decl.source});
    layout.item.selector = sels.join(', ');
    layout.item.source = decl.source;
    sels = [];

    for (var i = 0; i < rule.selectors.length; i++) {
      sels.push(rule.selectors[i] + ':after');
    };

    layout.pseudoRule = postcss.rule({selector: sels.join(', '), source: decl.source});
    layout.pseudo.selector = sels.join(', ');
    layout.pseudo.source = decl.source;

    layout.isSet = true;
    layout.decl = decl;
  }
  // Look for grid prop in rule.

export default (e, rootCss, opts) => {
  containers(e.containers, rootCss, opts);
  rows(e.rows, rootCss, opts);
  blocs(e.blocs, rootCss, opts);
  fractions(e.fractions, rootCss, opts);
  columns(e.columns, rootCss, opts);

  fractionsQuery(e.fractions[0], rootCss, opts);
  columnsQuery(e.columns, rootCss, opts, 0);
  rulesQuery(e.rules[0], rootCss);

  for (let breakpoint = 1; breakpoint <= opts.max; breakpoint += 1) {
    const queryWidth = breakpoint * opts.width - opts.gutter + 2 * opts.padding;
    const mediaQuery = postcss.atRule({
      name: 'media',
      params: `(min-width: ${queryWidth}rem)`,
    });

    blocsQuery(e.blocs, mediaQuery, opts, breakpoint);

    if (breakpoint >= opts.min) {
      containersQuery(e.containers, mediaQuery, opts, breakpoint);
      fractionsQuery(e.fractions[breakpoint], mediaQuery, opts);
      columnsQuery(e.columns, mediaQuery, opts, breakpoint);
      rulesQuery(e.rules[breakpoint], mediaQuery);
    }

    if (mediaQuery.nodes && mediaQuery.nodes.length) {
      // console.log('booo', util.inspect(mediaQuery.nodes.length, false, null))
      rootCss.append(mediaQuery);

rule.each(function (decl, i) {

      if (decl.type !== 'decl') { return; }

      var value = decl.value;

      if (value.indexOf('rem') !== -1) {

        var prop = vendor.unprefixed(decl.prop);
        // replace rems only if needed
        var isFontShorthand = (prop === 'font');
        var isSpecialCaseIE9_10 = (isIE9_10 && (isPseudoElement || isFontShorthand));
        var isUseless = (!isIE9_10 && !(_VALUES.test(value) || _PROPS.test(prop)));

        if ( isSpecialCaseIE9_10 || isUseless ) {

          value = value.replace(_remgex, function ($1) {
            // Round decimal pixels down to match webkit and opera behavior:
            // http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
            return Math.floor(parseFloat($1) * toPx(_rootvalue)) + 'px';
          });

          if (_options.replace) {
            decl.value = value;
          } else {

}

  if (prefixes.add.selectors.length > 0) {
    return;
  }

  if (Object.keys(prefixes.add).length > 2) {
    return;
  }
  /* istanbul ignore next */


  result.warn('Greetings, time traveller. ' + 'We are in the golden age of prefix-less CSS, ' + 'where Autoprefixer is no longer needed for your stylesheet.');
}

module.exports = postcss.plugin('autoprefixer', function () {
  for (var _len = arguments.length, reqs = new Array(_len), _key = 0; _key < _len; _key++) {
    reqs[_key] = arguments[_key];
  }

  var options;

  if (reqs.length === 1 && isPlainObject(reqs[0])) {
    options = reqs[0];
    reqs = undefined;
  } else if (reqs.length === 0 || reqs.length === 1 && !reqs[0]) {
    reqs = undefined;
  } else if (reqs.length <= 2 && (reqs[0] instanceof Array || !reqs[0])) {
    options = reqs[1];
    reqs = reqs[0];
  } else if (typeof reqs[reqs.length - 1] === 'object') {
    options = reqs.pop();

var postcss = require('postcss')
var selectorParser = require('postcss-selector-parser')
var loaderUtils = require('loader-utils')

var addId = postcss.plugin('add-id', function (opts) {
  return function (root) {
    root.each(function rewriteSelector (node) {
      if (!node.selector) {
        // handle media queries
        if (node.type === 'atrule' && node.name === 'media') {
          node.each(rewriteSelector)
        }
        return
      }
      node.selector = selectorParser(function (selectors) {
        selectors.each(function (selector) {
          var node = null
          selector.each(function (n) {
            if (n.type !== 'pseudo') node = n
          })
          selector.insertAfter(node, selectorParser.attribute({

mqpacker,
      // minify
      cssnano({ discardUnused: { fontFace: false } })
    ]
    const { css: head } = await postcss(headPostcssPlugins).process(
      headStyles,
      postcssOpts
    )

    return { head, inline }
  }
}

/** POSTCSS PLUGINS **/

const postcssImportantEverything = postcss.plugin(
  'postcss-important-everything',
  () => css => {
    css.walkDecls(decl => {
      if (decl.parent.name !== 'font-face') {
        decl.important = true
      }
    })
  }
)

const pseudoClasses = [':hover', ':visited', ':active', ':focus']
const isPseudoClass = selector =>
  pseudoClasses.some(pseudoClass => selector.includes(pseudoClass))

const postcssExtractHeadStyles = styles =>
  postcss.plugin('postcss-extract-media', () => css => {

// if no exact match exist we search for children nodes duplication
    if (!checkChildren) {
      const nodes = mqCache.get(atRuleId)
      node.nodes.forEach((n) => {
        const ruleId = n.toString().replace(/(\s{2,})|(\r)|(\n)/gm, ' ')
        if (nodes.has(ruleId)) {
          node.removeChild(n)
        } else {
          nodes.add(ruleId)
        }
      })
    }
  })
}

module.exports = postcss.plugin('postcss-discard-duplicates', () => discardDuplicates)

})
          if (!hasImport) {
            // save hash files to skip them next time
            if (!state.hashFiles[content]) state.hashFiles[content] = {}
            state.hashFiles[content][media] = true
          }
        }

        // recursion: import @import from imported file
        return parseStyles(result, styles, options, state, media)
      }
    )
  })
}

module.exports = postcss.plugin("postcss-import", AtImport)

function cssnext (tagName, css) {
  // A small hack: it passes :scope as :root to PostCSS.
  // This make it easy to use css variables inside tags.
  css = css.replace(/:scope/g, ':root')
  css = postcss([postcssCssnext]).process(css).css
  css = css.replace(/:root/g, ':scope')
  return css
}