How to use postcss-js - 10 common examples

import {getSupport, detectBrowser, getVersionIndex} from 'caniuse-support'
import autoprefixer from 'autoprefixer'
import data from 'autoprefixer/data/prefixes'
import postcssJs from 'postcss-js'

const currentBrowser = detectBrowser(window.navigator.userAgent)

const browserQuery = `${currentBrowser.id} ${getVersionIndex(currentBrowser)}`
const ap = autoprefixer({overrideBrowserslist: browserQuery})
const prefixer = postcssJs.sync([ap])

const skipProperties = [
  // Caniuse doesn't cover this property and spec might drop this: https://www.w3.org/TR/css-fonts-3/.
  'font-language-override',
  // Caniuse doesn't cover those properties.
  'grid-row-align',
  'grid-column-align',
  // Lack of caniuse data. See https://github.com/Fyrd/caniuse/issues/2116.
  'font-variant-ligatures'
]

const notDescribedCanIUseProps = ['css3-cursors-grab', 'css-text-spacing']

const gridProps = [
  'grid-template-columns',
  'grid-template-rows',

let twConfig = {};
if (fs.existsSync("./tailwind.js")) {
  twConfig = require(process.cwd() + "/tailwind.js");
} else {
  twConfig = require("tailwindcss/defaultConfig")();
}

let twObj = {};
if (fs.existsSync("./tailwind.custom.css")) {
  twObj = fs.readFileSync("./tailwind.custom.css", "utf8");
} else {
  twObj = fs.readFileSync("./node_modules/tailwindcss/dist/tailwind.min.css", "utf8");
}

twObj = postcss.parse(twObj);
twObj = postcssJs.objectify(twObj);
twObj = formatTailwindObj(twObj);

export default function(babel) {
  const { types: t } = babel;

  return {
    name: "tailwind-to-css-in-js", // not required
    visitor: {
      CallExpression(path) {
        const node = path.node;

        if (
          node.callee.name === "tw" &&
          (t.isStringLiteral(node.arguments[0]) || t.isArrayExpression(node.arguments[0]))
        ) {
          let selectors = isArray(node.arguments[0].elements)

// @flow

import postcssJs from 'postcss-js';
import autoprefixer from 'autoprefixer';

export default postcssJs.sync([autoprefixer]);

/* global baseStyles */
import postcss from "postcss";
import postcssJS from "postcss-js";
import autoprefixer from "autoprefixer";
import cssAnnotation from "css-annotation";
import { check, Match } from "meteor/check";
import { Meteor } from "meteor/meteor";
import { Shops, Themes } from "/lib/collections";
import { Reaction } from "./core";

const prefixer = postcssJS.sync([autoprefixer]);

function annotateCSS(stylesheet) {
  check(stylesheet, String);
  return cssAnnotation.parse(stylesheet);
}

function cssToObject(styles) {
  check(styles, Match.OneOf(String, null, undefined, void 0));

  const parsedStyle = postcss.parse(styles || baseStyles);
  const styleObject = postcssJS.objectify(parsedStyle);

  return styleObject;
}

function objectToCSS(styles) {

// @flow
import Input from 'postcss/lib/input'
import Declaration from 'postcss/lib/declaration'
import Parser from 'postcss/lib/parser'
import postcssNested from 'postcss-nested'
import postcssJs from 'postcss-js'
import objParse from 'postcss-js/parser'
import autoprefixer from 'autoprefixer'
import { processStyleName } from 'emotion-utils'

export const staticProcessor = postcssJs.sync([autoprefixer, postcssNested])

export const processor = postcssJs.sync([autoprefixer])

type Decl = {
  parent: { selector: string, nodes: Array },
  prop: string,
  value: string,
  remove: () => {}
}

export function parseCSS(
  css: string,
  extractStatic: boolean,
  filename: string
): {
  staticCSSRules: Array,
  styles: { [string]: any },
  composesCount: number

// @flow
import Input from 'postcss/lib/input'
import Declaration from 'postcss/lib/declaration'
import Parser from 'postcss/lib/parser'
import postcssNested from 'postcss-nested'
import postcssJs from 'postcss-js'
import objParse from 'postcss-js/parser'
import autoprefixer from 'autoprefixer'
import { processStyleName } from 'emotion-utils'

export const staticProcessor = postcssJs.sync([autoprefixer, postcssNested])

export const processor = postcssJs.sync([autoprefixer])

type Decl = {
  parent: { selector: string, nodes: Array },
  prop: string,
  value: string,
  remove: () => {}
}

export function parseCSS(
  css: string,
  extractStatic: boolean,
  filename: string
): {
  staticCSSRules: Array,

export function parseCSS(
  css: string,
  extractStatic: boolean,
  filename: string
): {
  staticCSSRules: Array,
  styles: { [string]: any },
  composesCount: number
} {
  // todo - handle errors
  let root
  if (typeof css === 'object') {
    root = objParse(css, { from: filename })
  } else {
    root = parse(css, { from: filename })
  }
  let vars = 0
  let composes: number = 0

  root.walkDecls((decl: Decl): void => {
    if (decl.prop === 'composes') {
      if (!/xxx(\d+)xxx/gm.exec(decl.value)) {
        throw new Error('composes must be a interpolation')
      }
      if (decl.parent.nodes[0] !== decl) {
        throw new Error('composes must be the first rule')
      }
      if (decl.parent.type !== 'root') {
        throw new Error('composes cannot be on nested selectors')

var postcssJs = require('postcss-js');

var style = {
    a: {
        color: 'green'
    }
};

module.exports = postcssJs.parse(style);

'use strict'

const postcssJS = require('postcss-js')

const style = {
  a: {
    color: 'green'
  }
}

module.exports = postcssJS.parse(style)

export async function parseCss(cssString, { fontDisplay = `swap`, useMerge }) {
  const root = postcss.parse(cssString);

  const cssObject = postcssJs.objectify(root);

  if (cssObject[`@font-face`]) {
    const reducer = fontFaceReducer(fontDisplay, useMerge);
    cssObject[`@font-face`] = Array.isArray(cssObject[`@font-face`])
      ? cssObject[`@font-face`].reduce(reducer, [])
      : reducer([], cssObject[`@font-face`]);
  }

  const { css } = await postcss().process(cssObject, {
    parser: postcssJs,
    from: undefined,
  });

  return css;
}