ae-biu/src/config/postcss.config.js

Born For AE, Born To Do

// @flow
import { resolve } from 'path'

// https://en.wikipedia.org/wiki/Right-to-left
const RTL_LANGS = [
  'العربية', // 阿拉伯语 Arabic
  'עברית', // 希伯来语 Hebrew
  'فارسی', // 波斯语 Persian
  'اردو' // 乌尔都语 Urdu
]

// TODO: merge project config
export default function getPostcssConfig (langs: {[string]: string}) {
  const postcssConfig = {
    plugins: [
      require('postcss-import')({
        path: [
          resolve('src/theme/styles'),
          resolve('node_modules/@sdp.nd')
        ]
      }),
      require('postcss-url')({
        basePath: resolve('src/static'),
        filter: ({ originUrl }) => {
          // filter like //cdn/xxx/xx
          if (/^\/\/.*/.test(originUrl)) {
            return false
          }
          return true
        }
      }),
      require('postcss-nesting')(),
      require('postcss-cssnext')({
        features: {
          customProperties: {
            variables: require('../theme/variables.js') // it can be override by project
          },
          nesting: false,
          autoprefixer: false
        }
      })
    ]
  }

  if (RTL_LANGS.some(rtl => langs[rtl] !== undefined)) {
    postcssConfig.plugins.push(
      // PostCSS plugin for RTL-optimizations
      require('postcss-rtl-fish')({
        // Custom function for adding prefix to selector. Optional.
        addPrefixToSelector (selector, prefix) {
          if (/^html/.test(selector)) {
            return selector.replace(/^html/, `html${prefix}`)
          }
          if (/:root/.test(selector)) {
            return selector.replace(/:root/, `${prefix}:root`)
          }
          return `${prefix} ${selector}`
        }
      }))
  }

  postcssConfig.plugins.push(
    require('autoprefixer')(),
    require('postcss-browser-reporter')(),
    require('postcss-reporter')()
  )
  return postcssConfig
}