PostCSS support

[hudochenkov]

PostCSS now is a big player at CSS processors market. More and more peoples start using it, and, I sure, many of them wants to use CSScomb with it. In many cases CSScomb in SCSS mode can process CSS with PostCSS plugins syntax, but sometimes it's fails and can't parse file.

PostCSS and CSScomb both going to their big releases. PostCSS 5.0 will support custom parsers. CSScomb 4.0, as I know, is heavy refactored. Maybe it's time to drop Gonzales PE and use PostCSS parsers for CSScomb?

PostCSS syntax can be very different because of used plugins and developers wants to have their source files organized.

This is example of PostCSS code, that current CSScomb (in Sublime Text) fails to process:

.button {
    height: 40px;
    border: solid transparent;
    border-width: 2px;
    border-radius: calc(@height / 2);
    line-height: calc(@height - @border-width * 2);
}

Fails because of @ in calc(). Used PostCSS plugins: postcss-property-lookup and postcss-calc.

More PostCSS-plugins syntaxes. Mixins are different from SCSS, for example, and there in no way to sort them now like we did it recently in this PR:

@define-mixin icon $name {
    padding-left: 16px;
    &::after {
        content: "";
        background-url: url(/icons/$(name).png);
    }
}

.search {
    @mixin icon search;
}

Following code taken from cssnext:

/* custom properties & var() */

:root {
    --fontSize: 1rem;
}
h1 {
    font-size: calc(var(--fontSize) * 2);
}

/* custom media queries */

@custom-media --small-viewport (max-width: 30em);

@media (--small-viewport) {
    /* styles for small viewport */
}

/* media queries ranges */

Allows to replace min-/max- with <= & >= (syntax easier to read)

@media (width >= 500px) and (width <= 1200px) {
    /* your styles */
}

/* or coupled with custom media queries */

@custom-media --only-medium-screen (width >= 500px) and (width <= 1200px);

@media (--only-medium-screen) {
    /* your styles */
}

What you think about it, @tonyganch and @ai?

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[ai]

We just dicussed it yesterday.

the current problem: PostCSS 5.0 has only CSS and SCSS parsers. In next month I have no plan to start Sass, Less and Stylus parsers.

ut I will write good docs about writing a parsers ;).

[isqua]

I’m interesting in CSScomb ❤️ PostCSS. The file I have (I use postcss-nested):

.header
{
    color: #fff;
    background-color: $darkGray;

    .wrapper {
        display: flex;
        flex-direction: column;

        @media (--tablet)
        {
            flex-direction: row;
        }
    }
}

and the error I get at csscombing:

Please check the validity of the block starting from line #6

4 |     background-color: $darkGray;
6*|     .wrapper {
7 |         display: flex;
8 |         flex-direction: column;

[hudochenkov]

@isqua if you use CSSComb in text editor, you can set syntax to SCSS and CSSComb will work with code you provide.

[isqua]

@hudochenkov, I use it from console, and I want to lint files too. I can rename all *.css files to *.scss, but I don’t think it’s a good idea. I’ve created an issue csscomb/core#6 for defining syntax by extension in config.

[hudochenkov]

To use CSSComb right now in Sublime Text we need to use scss scope in editor to make CSSComb work in limited mode (not all syntax changes CSSComb can parse). It's better than nothing :) Recently I've made PostCSS syntax highlighting for Sublime Text and forced to use source.scss in order to use CSSComb on files highlighted with this syntax. This also have downside as interference with SCSS syntax highlighting, because of using the same scope. While plans for PostCSS support in CSSComb is not known yet, can we add source.postcss scope as kinda alias for source.scss to CSSComb 3? It will provide same limited functionality as now, but it will add more independence to PostCSS syntax highlighting. What is the right way to do it?

[tonyganch]

@hudochenkov, I believe this is actually what @isqua has implemented: map one syntax to another.
Unfortunately, I'm away from my computer and will be back only in a week or so, I'll roll a release once I'm able to.

[hudochenkov]

@tonyganch As I know @isqua added this for CSSComb 4. If you will be able to add this in current version of Sublime Text plugin it would be great :) Thank you for quick reply :)

[senechaux]

Hi, do you know when will be released CSSComb 4?

[tonyganch]

@hudochenkov, I can't, I've created a total dependency mess there ¯_(ツ)_/¯
I'm going to release csscomb@4.0 with linters api and then add linters themselves in options as a major release. It does not make any sense to postpone features that are ready now any further.

// cc @senechaux

[tonyganch]

@hudochenkov, btw I'm looking for any help with this project or maybe even a new maintainer. If it sounds kinda interesting to you or you know a guy who knows a guy who is a good match, let me know :)

[hudochenkov]

@tonyganch that's great! Can't wait :)

Sadly I don't know JS enough to support this huge project. We can ask in community accounts @jsunderhood and @cssunderhood at Twitter.

[tonyganch]

@hudochenkov, I'm trying to search among familiar faces first :)

[danielbayley]

@ai Doesn't postcss-sorting effectively replace CSScomb?

[ai]

@danielbayley I think it could replace CSScomb. But CSScomb team don’t want to merge.

[hudochenkov]

@danielbayley postcss-sorting effectively replace only CSSComb's sort-order option. And only for CSS, SCSS, Less and other syntaxes PostCSS can parse. It can't parse Sass (indent based syntax).

[Guria]

I have used postcss-sorting as visual studio code plugin with postcss-nested syntax successfuly

[danielbayley]

It can't parse Sass (indent based syntax)

It doesn't seem far off http://postcss.parts/?searchTerm=sass. Besides, SugarSS basically replaces that anyway.

I suppose the equivalent of CSScomb's functionality would be a series of PostCSS plugins, with sorting being just one…

[ai]

@danielbayley yeap, code style features already can be implemented by stylelint and stylefmt.