Instead of being backwards compatible we want to be forward compatible.
But what do I mean with “forward compatible”?
Well that’s when we write our code against the next standard spec, but compile down to older specs to be backwards compatible, so for example:
TypeScript
We use TypeScript to write modern ES6, ES7, ES8 code, but we compile down to ES5 to be backwards compatible with older browsers.
CSSNext
The only reason we used SASS in the current project, was to re-use color variables in css.
Now the css next spec includes custom properties (variables), so to be forward compatible we decided to port our SASS to CSSNext.
CSSNext with PostCSS
PostCSS is a node package that can be installed by using NPM, it can be used to pre-process CSS by using JavaScript / TypeScript.
One of the many plugins of PostCSS is een CSSNext plugin, in the following example I will be using this plugin to convert CSSNext code into normal CSS3 code.
In this example I will be using Visual Studio 2015 update 3.
Create a new MVC web project
File > New > Project…
Installed > Templates > Visual C# > Web > ASP.NET Web Application (.NET Framework) > MVC
Add a package.json file to the root of the web application
{
“dependencies”: {
“angular”: “1.2.29”,
“es5-shim”: “>=4.5.9”,
“es6-shim”: “>=0.35.1”,
“spin.js”: “>=2.3.2”
},
“devDependencies”: {
“del”: “>=2.2.1”,
“gulp”: “>=3.9.1”,
“gulp-debug”: “>=2.1.2”,
“gulp-postcss”: “>=6.1.1”,
“gulp-rename”: “>=1.2.2”,
“gulp-util”: “>=3.0.7”,
“postcss-import”: “>=8.1.2”,
“postcss-cssnext”: “>=2.7.0”
},
“name”: “WebApplication1”,
“private”: true,
“scripts”: {
“gulp”: “gulp”
},
“version”: “1.0.1”
}
Add a gulpfile.js to the root of the web application
/**
* The version of gulp and all it’s dependencies are managed in the package.json file.
*/
‘use strict’;
// Dependencies
const gulp = require(‘gulp’);
const postcss = require(‘gulp-postcss’);
const postcssImport = require(‘postcss-import’);
const postcssNext = require(‘postcss-cssnext’);
const rename = require(‘gulp-rename’);
const defaultTheme = ‘Stigas’;
/**
* The default task.
*/
gulp.task(‘default’, function () {
});
gulp.task(‘apply-theming’, function () {
var plugins = [
postcssImport,
postcssNext
];
return gulp.src(‘./Content/Site.cssnext’)
.pipe(postcss(plugins))
.pipe(rename({
extname: “.css”
}))
.pipe(gulp.dest(‘./Content’));
});
Add a “Content/variables.cssnext” file
:root {
–mainColor: rgb(255, 0, 0);
}
Rename the existing Site.css to Site.cssnext
At the following text at the top of the Site.cssnext file: @import
“./variables.cssnext”;
And at the following css rule at the end of this script:
p {
color: var(–mainColor);
}
Now run the gulp task “apply-theming” by using the Task Runner Explorer or on the command line: npm run gulp — apply-theming
Now when you run the web application you should see the text in red:
