hanakin's avatar

complex css mix assisstence

Currently we have a rather complicated gulp task for managing all of our requirements for our css.

  1. we use a customized rendering through sass
  2. we autoprefix to a custom browser-list

we then apply several postcss plugins to our code.

  1. we leverage postcss-sorting using a custom sorting file
  2. we leverage postcss-pxtorem to enforce rem requirements for certain properties
  3. we leverage stylefmt to ensure that all of our coding practices are adhered to according to our stylelint rc file.

We have to maintain a minified and an un-minified version of our css due to customization capabilities.

All of this works in our current gulp build process.

This is what the mix file looks like.

const mix = require('laravel-mix');
const scss = require('postcss-scss');

// Config
const sortOrder = require('./.postcss-sorting.json');

const AUTOPREFIXER_BROWSERS = [
    'ie >= 11',
    'edge >= 12',
    'ff >= 38',
    'chrome >= 35',
    'safari >= 8',
    'opera >= 35',
    'ios >= 8'
];

// CSS

mix.sass('src/scss/core.scss', 'dist/assets/css', {
    indentType: 'tab',
    indentWidth: 1,
    outputStyle: 'expanded',
    precision: 10,
    onError: console.error.bind(console, 'Sass error:')
})
.options({
    processCssUrls: false,
    autoprefixer: {
        options: {
            browsers: AUTOPREFIXER_BROWSERS
        }
    },
    postcss: [
        require('postcss-sorting')(sortOrder),
        require('postcss-pxtorem')({
            rootValue: 16,
            unitPrecision: 7,
            propWhiteList: [
                'font',
                'font-size',
                'margin',
                'margin-left',
                'margin-right',
                'margin-top',
                'margin-bottom',
                'padding',
                'padding-left',
                'padding-right',
                'padding-top',
                'padding-bottom'],
            selectorBlackList: [],
            replace: true,
            mediaQuery: false,
            minPixelValue: 0
        }),
        require('stylefmt')({syntax: scss})
    ]
});

we are getting a result of the sass compilation however it does not appear to be performing any of our postcss plugins for some reason.

0 likes
1 reply
phlag's avatar

postCss: [

You need an upper C in postCss

Cheers

Please or to participate in this conversation.