Extend css task, add css-lint task

[aegyed91]

I was thinking about implementing the following css and css-lint tasks, at least for myself. I know the project is very barebones so i ask before i even consider open a PR if any of these are welcome in the code / wiki page.

For minifyComponentCss and processExternalCss tasks:

/**
 * how it works:
 * 1, get all external css file from `APP_ASSETS`
 * 2, minify them
 * 3, concatenate them to app.css
 * 4, split it out to `${DIST_DIR}/${ENV}/css`
 *
 * In this case it handles only /src/assets/main.css.
 *
 * TODO:
 * 1, use cssnano as a PostCSS plugin
 * 2, add autoprefixer
 * 3, add postcss-assets
 * 4, optimize for incremental build ( gulp-cached )
 *
 * optional TODO (for wiki page, because it should be major** preprocessor agnostic):
 * 1, use sass
 * 2, add sourcemaps
 * 3, optimize for incremental build ( gulp-progeny )
 *
 */

Add a new css-lint task which is going to do the following:

/**
 *
 * A global css linter
 *
 * 1, use stylelint, doiuse, colorguard
 * 2, optimize for incremental build ( gulp-cached )
 * 3, filter out vendor css with postcss-filter-stream**
 *
 */

1**, Under major preprocessors i mean sass, less, stylus and precss. You can add any of these to the postcss stack without breaking it.

2**, For this filter the IDependency interface needs to be extended with vendor property. Because we don't want to see lint errors from third party libraries.

So again, i will implement these anyways for personal use. I just want to contribute if this is needed in any form (in the wiki, in the code).

[the-ult]

Sounds interesting. Like the idea of splitting the build and linting in 2 tasks.
We are trying/playing with postcss as well. And are removing sass completely from our build.

Still trying to get the css working per component.
This is what we have so far (WIP):

import {join} from 'path';
import {APP_SRC, CSS_DEST} from '../config';
// import {cssnext} from 'cssnext';


export = function buildPostcssDev(gulp, plugins, option) {
  return function() {
    let atImport = require('postcss-import');
    let cssnext = require('postcss-cssnext');
    let lost = require('lost');
    // let autoprefixer = require('autoprefixer');
    // let doiuse = require('doiuse');

    const processors = [
      atImport(),
      // add your 'plugins' here
      cssnext({autoprefixer: { browsers: ['last 1 version'] }}),
      lost()
      // doiuse({
        // browsers: ['ie >= 11', 'last 1 version'], // an autoprefixer-like array of browsers.
        // ignore: ['rem'], // an optional array of features to ignore
        // ignoreFiles: ['**/normalize.css'] // an optional array of file globs to match against original source file path, to ignore
        // a callback for usages of features not supported by the selected browsers
        // onFeatureUsage: function(usageInfo) { console.log(usageInfo.message);}
      // }),
      // and if you want to compress for production
      // require('cssnano')(),
      // require('postcss-browser-reporter')(),
      // require('postcss-reporter')()
    ];
    // TODO use @use for import settings in each css file, so we can use *.css
    return gulp.src(join(APP_SRC, '**', 'stylesheets/styles.css'))
      .pipe(plugins.sourcemaps.init())
      // .pipe(plugins.if(!production, sourcemaps.init()))
      .pipe(plugins.postcss(processors))
      .pipe(plugins.sourcemaps.write('.'))
      .pipe(gulp.dest(CSS_DEST));
    // .pipe(plugins.if(!production, plugins.sourcemaps.write()))
    // .pipe(gulp.dest(file => {
    //   return file.base;
    // }));
  };
}

[mgechev]

@tsm91 looks good to me.

• 1, use cssnano as a PostCSS plugin
• 2, add autoprefixer
• 3, add postcss-assets
• 4, optimize for incremental build ( gulp-cached )

This looks like a great fit, I think it makes sense to include it into the project.

If these tasks are synchronous we can apply them over the components' templates as well.

[the-ult]

So what seems to be needed for the (post)css task:

1. Use/concatenate globale styles (e.g. base.form.css, layout.grid.css, layout.container.css, object.button.css, object.card.css, settings.colors.css, settings.global.css, etc)
2. component styles ( home.component.css, sd-list.component.css, etc)
   • component styles should be able to use (global postcss) variables -> settings.color.css, settings.global.css
3. copy component [APP_SRC/**/*.css dist/[ENV]/**/* .css

is that correct?

[aegyed91]

@mgechev of course the same set of tasks would apply to component templates.

@the-ult yeah pretty much it. If you are interested, there is an existing integration. Check out css-lint.js and css.js. What i especially like in that project is its project structure agnostic.

So today i will make a PR.

[the-ult]

Nice, looking forward to your PR

[NN77]

Hi Guys, in future-proof CSS thinking I suggest to use PostCss packs like cssnext, rucksack and PreCSS. For example cssnext includes autoprefixer, nesting, custom media, can compress output file and many more. Comparision: https://github.com/timaschew/postcss-compare-packs. For lint of course stylelint is a good idea.

Quick task build.styles.dev.ts proposition :) ?

/// <reference path="../manual_typings/gulp-postcss.d.ts" />
/// <reference path="../manual_typings/precss.d.ts" />
/// <reference path="../manual_typings/postcss-cssnext.d.ts" />
import {join} from 'path';
import {ASSETS_SRC, ASSETS_DEST} from '../config';
import * as postcss from 'gulp-postcss';
import * as precss from 'precss';
import * as cssnext from 'postcss-cssnext';

const PROCESSORS = [
  //TODO postcss-assets?
  precss(),
  cssnext({
    browsers: ['last 2 version', 'safari 5', 'ie > 9', 'opera 12.1', 'ios 6', 'android 2.3'],
    compress: false
  })
];

export = function buildStylesDev(gulp, plugins) {
  return function () {
    let src = [
      join(ASSETS_SRC, '**/styles.css')
    ];

    return gulp.src(src)
      .pipe(postcss(PROCESSORS))
      .pipe(gulp.dest(`${ASSETS_DEST}`));
  };
}

Assumption for it is one css output file serving from assets dest directory

[aegyed91]

@NN77 yes it is a good idea, but the project should stay agnostic. I think an ideal place for this would be a wiki page that walks through the implementation process. So anybody who would like to use a stack like this could implement it without problem.

Here is the PR of the implementation #562, feel free to check it out. If you check the conversation even the inclusion of postcss-assets is under discussion right now.

It is not very hard to add additional postcss plugins once this one gets merged. I think the best idea would be to write down the implementation steps in the wiki page. It won't even be very long since most of the time we will just add postcss-plugins to the processors stack.

[mgechev]

Closing this issue since it is WIP here #562