Extending PostCSS

Adding sass-like styles using PostCSS (

If you want to skip the walkthrough e0d47df048

1. Install the new npm dependencies.

npm i --save-dev postcss-cssnext precss stylelint-statement-max-nesting-depth

2. Open package.json and remove autoprefixer this package is included in cssnext.

3. Create /tools/manual_typings/project/postcss-cssnext.d.ts

declaremodule'postcss-cssnext'{interfaceIOptions{}interfaceIPostcssCssnext{(opts?: IOptions): NodeJS.ReadWriteStream;}constpostcssCssnext: IPostcssCssnext;export=postcssCssnext;}

4. Create /tools/manual_typings/project/postcss-precss.d.ts

declaremodule'precss'{interfaceIOptions{}interfaceIPreCss{(opts?: IOptions): NodeJS.ReadWriteStream;}constpreCss: IPreCss;export=preCss;}

5. Create /tools/tasks/project/build.html_css.ts

import*asgulpfrom'gulp';import*asgulpLoadPluginsfrom'gulp-load-plugins';import*asmergefrom'merge-stream';import*asprecssfrom'precss';import*ascssnanofrom'cssnano';import*ascssnextfrom'postcss-cssnext';import*asreporterfrom'postcss-reporter';import{join}from'path';import{APP_SRC,TMP_DIR,CSS_PROD_BUNDLE,CSS_DEST,APP_DEST,BROWSER_LIST,ENV,DEPENDENCIES}from'../../config';constplugins=<any>gulpLoadPlugins();
const processors = [
precss(),
cssnext({autoprefixer: {browsers: BROWSER_LIST}}),
reporter({clearMessages: true})
];
const isProd = ENV === 'prod';
if (isProd) {processors.push(cssnano({discardComments: {removeAll: true}}));}
function prepareTemplates() {returngulp.src(join(APP_SRC,'**','*.html')).pipe(gulp.dest(TMP_DIR));}
function processComponentCss() {returngulp.src([join(APP_SRC,'**','*.css'),'!'+join(APP_SRC,'assets','**','*.css')]).pipe(isProd ? plugins.cached('process-component-css') : plugins.util.noop()).pipe(plugins.postcss(processors)).pipe(gulp.dest(isProd ? TMP_DIR: APP_DEST));}
function processExternalCss() {returngulp.src(getExternalCss().map(r=>r.src)).pipe(isProd ? plugins.cached('process-external-css') : plugins.util.noop()).pipe(plugins.postcss(processors)).pipe(isProd ? plugins.concat(CSS_PROD_BUNDLE) : plugins.util.noop()).pipe(gulp.dest(CSS_DEST));}
function getExternalCss() {returnDEPENDENCIES.filter(d=>/\.css$/.test(d.src));}
export = () =>merge(processComponentCss(),prepareTemplates(),processExternalCss());

6. Create /tools/tasks/project/build.js.test.ts

import*asgulpfrom'gulp';import*asgulpLoadPluginsfrom'gulp-load-plugins';import*ascssnextfrom'postcss-cssnext';import*asprecssfrom'precss';import*asreporterfrom'postcss-reporter';import{join}from'path';import{BOOTSTRAP_MODULE,APP_SRC,APP_DEST,BROWSER_LIST,TOOLS_DIR}from'../../config';import{makeTsProject}from'../../utils';constplugins=<any>gulpLoadPlugins();
const processors = [
precss(),
cssnext({autoprefixer: {browsers: BROWSER_LIST}}),
reporter({clearMessages: true})
];
export = () =>{lettsProject=makeTsProject();letsrc=['typings/browser.d.ts',TOOLS_DIR+'/manual_typings/**/*.d.ts',join(APP_SRC,'**/*.ts'),'!'+join(APP_SRC,'**/*.e2e.ts'),'!'+join(APP_SRC,`${BOOTSTRAP_MODULE}.ts`)];letresult=gulp.src(src).pipe(plugins.plumber()).pipe(plugins.sourcemaps.init()).pipe(plugins.inlineNg2Template({base: APP_SRC,useRelativePaths: false,styleProcessor: functionprocessor(ext:string,file: string){returnfile=plugins.postcss(processors);}})).pipe(plugins.typescript(tsProject));returnresult.js.pipe(plugins.sourcemaps.write()).pipe(gulp.dest(APP_DEST));}

7. Extend the .stylelintrc adding "sass-like" rules ( You can choose whatever you like here )

{
"plugins": [
"stylelint-statement-max-nesting-depth"
],
"rules": {
"block-no-empty": true,
"color-no-invalid-hex": true,
"declaration-colon-space-after": "always",
"declaration-colon-space-before": "never",
"function-comma-space-after": "always",
"function-url-quotes": "single",
"media-feature-colon-space-after": "always",
"media-feature-colon-space-before": "never",
"media-feature-name-no-vendor-prefix": true,
"max-empty-lines": 2,
"number-leading-zero": "always",
"number-no-trailing-zeros": true,
"property-no-vendor-prefix": true,
"declaration-block-no-duplicate-properties": true,
"block-no-single-line": true,
"declaration-block-trailing-semicolon": "always",
"selector-list-comma-newline-after": "always-multi-line",
"selector-no-id": true,
"string-quotes": "single",
"value-no-vendor-prefix": true,
"function-linear-gradient-no-nonstandard-direction": true,
"declaration-block-no-shorthand-property-overrides": true,
"indentation": 2,
"statement-max-nesting-depth": [3, { countAtRules: false }],
}
}