gulp & atom-plugin compatibility

[hanakin]

I am currently using https://github.com/lysyi3m/atom-postcss-sorting plugin in atom which requires the use of .postcss-sorting.json in my project root. I am also using gulp to render all my scss and performing the following on the rendered css.

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

gulp.task('sort', function () {
    return gulp.src('./css/src/*.css').pipe(
        postcss([
            sorting({ sortOrder })
        ])
    ).pipe(
        gulp.dest('./css/src')
    );
});

but it does not seem to be working...

[hudochenkov]

Could you share your .postcss-sorting.json?

[hudochenkov]

Oh, you use following ES6 syntax sorting({ sortOrder }) which is equivalent to ES5 sorting({ sortOrder: sortOrder }). Try to remove curly brackets: sorting(sortOrder).

[hanakin]

i tried it with no luck

here is my sorting file contents

{
    "order": [
        "custom-properties",
        "dollar-variables",
        "at-rules",
        "declarations",
        {
            "type": "at-rule",
            "name": "media"
        },
        "rules"
    ],
    "properties-order": [
        {
            "emptyLineBefore": false,
            "properties": [
                "-moz-osx-font-smoothing",
                "-webkit-font-smoothing",
                "font",
                "font-family",
                "font-size",
                "font-weight",
                "font-style",
                "font-variant",
                "font-size-adjust",
                "font-stretch",
                "font-effect",
                "font-emphasize",
                "font-emphasize-position",
                "font-emphasize-style",
                "font-smooth",
                "line-height",
                "text-align",
                "text-align-last",
                "vertical-align",
                "white-space",
                "text-decoration",
                "text-emphasis",
                "text-emphasis-color",
                "text-emphasis-style",
                "text-emphasis-position",
                "text-indent",
                "text-justify",
                "letter-spacing",
                "word-spacing",
                "writing-mode",
                "text-outline",
                "text-transform",
                "text-wrap",
                "text-overflow",
                "text-overflow-ellipsis",
                "text-overflow-mode",
                "word-wrap",
                "word-break",
                "tab-size",
                "hyphens"
            ]
        },
        {
            "emptyLineBefore": false,
            "properties": [
                "background",
                "background-color",
                "background-image",
                "background-repeat",
                "background-attachment",
                "background-position",
                "background-position-x",
                "background-position-y",
                "background-clip",
                "background-origin",
                "background-size",
                "interpolation-mode",
                "filter"
            ]
        },
        {
            "emptyLineBefore": false,
            "properties": [
                "border",
                "border-width",
                "border-style",
                "border-color",
                "border-top",
                "border-top-width",
                "border-top-style",
                "border-top-color",
                "border-right",
                "border-right-width",
                "border-right-style",
                "border-right-color",
                "border-bottom",
                "border-bottom-width",
                "border-bottom-style",
                "border-bottom-color",
                "border-left",
                "border-left-width",
                "border-left-style",
                "border-left-color",
                "border-radius",
                "border-top-left-radius",
                "border-top-right-radius",
                "border-bottom-right-radius",
                "border-bottom-left-radius",
                "border-image",
                "border-image-source",
                "border-image-slice",
                "border-image-width",
                "border-image-outset",
                "border-image-repeat",
                "outline",
                "outline-width",
                "outline-style",
                "outline-color",
                "outline-offset"
            ]
        },
        {
            "emptyLineBefore": false,
            "properties": [
                "box-decoration-break",
                "box-shadow",
                "text-shadow"
            ]
        },
        {
            "emptyLineBefore": false,
            "properties": [
                "color",
                "opacity"
            ]
        },
        {
            "emptyLineBefore": false,
            "properties": [
                "position",
                "z-index",
                "top",
                "right",
                "bottom",
                "left"
            ]
        },
        {
            "emptyLineBefore": false,
            "properties": [
                "display",
                "visibility",
                "float",
                "clear",
                "overflow",
                "overflow-x",
                "overflow-y",
                "clip",
                "zoom",
                "flex",
                "flex-direction",
                "flex-order",
                "flex-pack",
                "flex-align",
                "flex-basis",
                "flex-grow",
                "flex-shrink",
                "flex-wrap",
                "justify-content",
                "align-items",
                "align-self"
            ]
        },
        {
            "emptyLineBefore": false,
            "properties": [
                "box-sizing",
                "width",
                "min-width",
                "max-width",
                "height",
                "min-height",
                "max-height",
                "margin",
                "margin-top",
                "margin-right",
                "margin-bottom",
                "margin-left",
                "padding",
                "padding-top",
                "padding-right",
                "padding-bottom",
                "padding-left"
            ]
        },
        {
            "emptyLineBefore": false,
            "properties": [
                "table-layout",
                "empty-cells",
                "caption-side",
                "border-spacing",
                "border-collapse",
                "list-style",
                "list-style-position",
                "list-style-type",
                "list-style-image"
            ]
        },
        {
            "emptyLineBefore": false,
            "properties": [
                "content",
                "quotes",
                "counter-reset",
                "counter-increment",
                "resize",
                "cursor",
                "user-select",
                "nav-index",
                "nav-up",
                "nav-right",
                "nav-down",
                "nav-left",
                "transition",
                "transition-delay",
                "transition-timing-function",
                "transition-duration",
                "transition-property",
                "transform",
                "transform-origin",
                "animation",
                "animation-name",
                "animation-duration",
                "animation-play-state",
                "animation-timing-function",
                "animation-delay",
                "animation-iteration-count",
                "animation-direction",
                "pointer-events"
            ]
        }
    ],
    "unspecified-properties-position": "bottomAlphabetical"
}

[hudochenkov]

This should work theoretically, if sortOrder is an object with every option for postcss-sorting:

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

gulp.task('sort', function () {
    return gulp.src('./css/src/*.css').pipe(
        postcss([
            sorting(sortOrder)
        ])
    ).pipe(
        gulp.dest('./css/src')
    );
});

If it's not working, are you sure your CSS hasn't sorted yet? :)

If you still can't found a problem, please create a repository with reproducible problem.

[hanakin]

hmm seems this may be an issue with stylefmt https://github.com/morishitter/stylefmt/

postcss-sorting sorts everything correctly, but then stylefmt is run which unsorts everything somehow even though the order is the same in my stylelintrc.json file and in my postcss-sorting.json file

here is my full task

gulp.task('css', function () {
    var css = gulp
    .src(build.scss + '*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({
        indentType: 'tab',
        indentWidth: 1,
        outputStyle: 'expanded',
        precision: 10,
        onError: console.error.bind(console, 'Sass error:')
    }))
    .pipe(autoprefixer(AUTOPREFIXER_BROWSERS))
    .pipe(
        postcss([
            sorting(sortOrder),
            torem({
                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
            })
        ])
    )
    .pipe(stylefmt())
    .pipe(rename({
        suffix: '.' + pkg.version,
        extname: '.css'
    }))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(build.css));

    return css;
});

[hudochenkov]

stylefmt has opinionated sorting order. It may sort differently, because it has hardcoded order.