build: Updating build steps (CSS) (#67)

- Removing 'css/vendor folder in favor of adding npm modules and
having them import automatically via postcss-import plugin.
- Adding newer version of WikimediaUI Base & normalize.css via npm.
- Fixing 'grunt watch' task to ignore files in the 'css/build' folder
- Adding npm tasks to call Grunt, for those who don't install Grunt globally.
- Downgrading normalize.css to v7 & fixing typo
- Fixing relative paths in CSS URLs & switching minifier to cssnano
- Removing the need for `grunt-contrib-cssmin` since PostCSS can
integrate a minifier.
This means we don't have to output an uncompressed css file in the
`build` folder. Instead we can generate the minified file in one pass,
which also gets rid of the cssmin grunt tasks.
- Also outputting a source map for the minified CSS file.
- Adding seperate grunt tasks for compiling minified and unminifed CSS
  Minified CSS gets compiles with source maps, unminified does not.

CONTRIBUTING.md

@@ -16,10 +16,15 @@ Setup your system. Change to the cloned folder and type:
 $ npm install
 ```
 
-Make your change. Make sure the tests pass and the CSS for production is built:
+Make your changes. To automatically watch for changes, run:
+```console
+$ npm run dev
+```
+
+Make sure the tests pass and the CSS for production is built:
 
 ```console
-$ grunt
+$ npm run build
 ```
 
 Please add specific topics into a single commit and also take into account the [Wikimedia commit message guidelines](https://www.mediawiki.org/wiki/Gerrit/Commit_message_guidelines).

Gruntfile.js

@@ -3,13 +3,36 @@
  */
 
 module.exports = function ( grunt ) {
-	grunt.loadNpmTasks( 'grunt-contrib-cssmin' );
 	grunt.loadNpmTasks( 'grunt-contrib-watch' );
 	grunt.loadNpmTasks( 'grunt-postcss' );
 	grunt.loadNpmTasks( 'grunt-sketch' );
 	grunt.loadNpmTasks( 'grunt-stylelint' );
 	grunt.loadNpmTasks( 'grunt-svgmin' );
 
+	// PostCSS processors without minifier
+	var postCssProcessorsDev = [
+		require( 'postcss-import' )( {
+			from: "css/wmui-style-guide.dev.css"
+		} ),
+		require( 'postcss-custom-properties' ),
+		require( 'autoprefixer' )( {
+			browsers: [
+				"Android >= 2.3",
+				"Chrome >= 10",
+				"Edge >= 12",
+				"Firefox >= 3.6",
+				"IE >= 8",
+				"IE_mob 11",
+				"iOS >= 5.1",
+				"Opera >= 12.5",
+				"Safari >= 5.1"
+			]
+		} )
+	];
+
+	// PostCSS processors with minifier
+	var postCssProcessorsMin = postCssProcessorsDev.concat( [ require( 'cssnano' )() ] );
+
 	grunt.initConfig( {
 		// Lint – Styles
 		stylelint: {
@@ -22,44 +45,25 @@ module.exports = function ( grunt ) {
 
 		// Postprocessing Styles
 		postcss: {
-			options: {
-				processors: [
-					require( 'postcss-import' )( {
-						from: "css/wmui-style-guide.dev.css"
-					} ),
-					// require( 'postcss-cssnext' )(),
-					require( 'postcss-custom-properties' ),
-					require( 'autoprefixer' )( {
-						browsers: [
-							"Android >= 2.3",
-							"Chrome >= 10",
-							"Edge >= 12",
-							"Firefox >= 3.6",
-							"IE >= 8",
-							"IE_mob 11",
-							"iOS >= 5.1",
-							"Opera >= 12.5",
-							"Safari >= 5.1"
-						]
-					} )
-				]
-			},
-			dist: {
-				files: {
-					'css/build/wmui-style-guide.css': 'css/wmui-style-guide.dev.css'
-				}
-			}
-		},
-
-		cssmin: {
-			options: {
-				shorthandCompacting: true,
-				roundingPrecision: -1
+			// Output unminified compiled CSS file into `build` dir
+			dev: {
+				options: {
+					processors: postCssProcessorsDev
+				},
+				src: 'css/wmui-style-guide.dev.css', 
+				dest: 'css/build/wmui-style-guide.css'
 			},
-			target: {
-				files: {
-				  'css/build/wmui-style-guide.min.css': 'css/build/wmui-style-guide.css'
-				}
+			// Output minified compiled CSS file +  src maps into `build` dir
+			min: {
+				options: {
+					map: {
+						inline: false, // save all sourcemaps as separate files...
+						annotation: 'css/build/' // ...to the specified directory
+					},
+					processors: postCssProcessorsMin
+				},
+				src: 'css/wmui-style-guide.dev.css', 
+				dest: 'css/build/wmui-style-guide.min.css'
 			}
 		},
 
@@ -266,7 +270,8 @@ module.exports = function ( grunt ) {
 		// Development
 		watch: {
 			files: [
-				'**/*.css',
+				'css/**/*.css',
+				'!css/build/**/*.css',
 				'.{stylelintrc}'
 			],
 			tasks: 'default'
@@ -275,5 +280,5 @@ module.exports = function ( grunt ) {
 
 	grunt.registerTask( 'lint', [ 'stylelint' ] );
 	grunt.registerTask( 'imagery', [ 'sketch_export', 'svgmin' ] );
-	grunt.registerTask( 'default', [ 'lint', 'postcss', 'cssmin' ] );
+	grunt.registerTask( 'default', [ 'lint', 'postcss:dev', 'postcss:min' ] );
 };