Add out-of-the-box support for PostCSS

[jbalsas]

From use autoprefixer for css and sass by @marcelmokos and Apply postcss during build of a Liferay 7 theme by @caneta

References on current approach:

• marcoscv-work/styled-svg-sprite-theme
• marcoscv-work/styled-postcss-theme
• smclab/liferay-theme-hooks

[yuchi]

By the way you can already add Autoprefixer support with an hook we made at @smclab.

[jbalsas]

Thanks for the reference, @yuchi! Added this to the list on top! 👏

[sbaechler]

@yuchi You should remove the existing prefixes first with unprefix.

[sbaechler]

#83 is preventing PostCSS from generating Sourcemaps.

[yuchi]

@sbaechler That’s a very nice suggestion. I created an issue to track it down.

PS: If you could use those hooks we would be very happy to have some feedback.

PPS: You gained a follower given your last weeks of issue contributing here :) Will you be at DEVCON this year?

[sbaechler]

@yuchi I created my own hooks before I saw yours.

Those are mine:

const postcssPlugins = [
    unprefix(),
    flexbugFixes(),
    autoprefixer({
        flexbox: 'no-2009',
    }),
];

// This is called from within hookFn
function themeTasks({gulp, pathSrc, pathBuild}) { 
    gulp.task('build:postcss', function(done) {
        const base = path.join(pathBuild, '_css');
        gulp
           .src(path.join(base, '*.css'), {
               base,
           })
           .pipe(sourcemaps.init({ loadMaps: false, largeFile: true }))
           .pipe(postcss(postcssPlugins))
           .pipe(sourcemaps.write('.'))
           .pipe(gulp.dest(path.join(pathBuild, '_postcss')))
           .on('end', done);
    });

    gulp.task('build:move-compiled-css', function() {
        return gulp
            .src(pathBuild + '/_postcss/**/*')
            .pipe(gulp.dest(pathBuild + '/css'));
    });

    gulp.task('build:remove-old-css-dir', function(cb) {
        del([pathBuild + '/_css']);
        del([pathBuild + '/_postcss'], cb);
    });
}

I am using another temporary build folder since I had problems using the same folder as source and dest.

I think it would be quite easy to add PostCSS to the liferay-theme-tasks. This would also allow the developers to customise browserslist per their requirements.

Of course unprefix is only used to remove the Liferay and Clay CSS prefixes. If Liferay added PostCSS, they could just run this over their codebase once.

PPS: Sorry, currently I cannot attend any conferences.

[protoEvangelion]

@jbalsas How do we pass options to autoprefixer?

It doesn't seem like the code allows for this because the postcss option is expecting an array of strings.

autoprefixer({
  browsers: ['last 2 versions'],
  cascade: false
})

[sbaechler]

@protoEvangelion
True, it is not possible to configure autoprefixer this way.
But autoprefixer should take the browsers defined in browserslist in the package.json of your app.

[protoEvangelion]

@sbaechler will it do that automatically now?

[jbalsas]

Hey @protoEvangelion, as @sbaechler mentions, the recommended way to configure browsers is through the browserslist key in your package.json.

I just created a new theme using the rc.1 version of the generator-liferay-theme and added this to my package.json:

{
    "browserslist": ["last 4 version"],
    ...      
    "liferayTheme": {
        "baseTheme": "styled",
        "postcss": [
            "autoprefixer"
        ],
        "screenshot": "",
        "rubySass": false,
        "templateLanguage": "ftl",
        "version": "7.1"
    },
    ...
}

I can assert that this successfully gets processed by autoprefixer:

/* _custom.scss */
.example {
    display: grid;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}

/* main.css */
.example {
  display: grid;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
  background: -webkit-linear-gradient(top, white, black);
  background: -o-linear-gradient(top, white, black);
  background: linear-gradient(to bottom, white, black); }

As for other options, the current logic only accepts a list of plugin names.

I've created #126 to make this possible. Would you mind chiming in there to see if that would address your issue?

Thanks!

[yuchi]

@jbalsas Could you also check if .browserslistrc is supported too? Should be since it catches the package.json location.

[jbalsas]

I can confirm .browserslistrc is supported too.