feat(css): add feature based CSS files

Add feature based CSS files to the build for better performance.

Author: Portugal, Marcelo

grunt/aliases.js

@@ -5,12 +5,17 @@ module.exports = function (grunt, options) {
 
     // register before and after test tasks so we don't have to change cli
     // options on the CI server
-    'before-test': ['clean', 'newer:jshint', 'newer:jscs', 'ngtemplates', 'less', 'copy:font_dist', 'copy:js_dist'], // Have to run less so CSS files are present
+    'before-test': [
+      'clean', 'newer:jshint', 'newer:jscs', 'ngtemplates', 'less', 'copy:font_dist','copy:packages_dist'
+    ], // Have to run less so CSS files are present
     'after-test': ['build'],
     'default': ['before-test', 'test:single', 'after-test'],
 
     // Build with no testing
-    'build': ['ngtemplates', 'concat', 'uglify', 'less', 'uidocs-generator', 'copy:font_dist', 'copy:js_dist', 'copy:site', 'copy:less_customizer',],
+    'build': [
+      'ngtemplates', 'concat', 'uglify', 'less', 'uidocs-generator', 'copy:font_dist', 'copy:packages_dist',
+      'copy:site', 'copy:less_customizer',
+    ],
     'build:less_dist': ['copy:less_dist', 'replace:less_dist'],
 
     // Auto-test tasks for development

grunt/clean.js

@@ -2,5 +2,5 @@ module.exports =
   // Clean the temp directory
   ['.tmp', '<%= dist %>', 'docs', 'coverage',
   'packages/*/.npmignore', 'packages/*/LICENSE.md',
-  'packages/*/*.css', 'packages/*/*.js']
+  'packages/*/css', 'packages/*/*.js']
 ;

grunt/copy.js

@@ -44,6 +44,16 @@ module.exports = function ( grunt ) {
         }
       ]
     },
+    css_cut_release: {
+      files: [
+        {
+          expand: true,
+          cwd: '<%= dist %>/release/css',
+          src: '**/*',
+          dest: `<%= dist %>/release/${currentTag}/css`
+        }
+      ]
+    },
     font_dist: {
       files: [
         {
@@ -82,28 +92,6 @@ module.exports = function ( grunt ) {
         }
       ]
     },
-    js_dist: {
-      files: [
-        {
-          expand: true,
-          flatten: true,
-          cwd: 'packages',
-          src: '*/*.js',
-          dest: '<%= dist %>/release',
-          filter: function(filepath) {
-            return !filepath.includes('packages/i18n')
-          }
-        },
-        {
-          expand: true,
-          flatten: true,
-          cwd: 'packages',
-          src: '*/*.js',
-          dest: '<%= dist %>/release/i18n',
-          filter: 'isFile'
-        }
-      ]
-    },
     i18n_cut_release: {
       files: [
         {
@@ -170,6 +158,36 @@ module.exports = function ( grunt ) {
         }
       ]
     },
+    packages_dist: {
+      files: [
+        {
+          expand: true,
+          flatten: true,
+          cwd: 'packages',
+          src: '*/*.js',
+          dest: '<%= dist %>/release',
+          filter: function(filepath) {
+            return !filepath.includes('packages/i18n')
+          }
+        },
+        {
+          expand: true,
+          flatten: true,
+          cwd: 'packages',
+          src: '*/*.js',
+          dest: '<%= dist %>/release/i18n',
+          filter: 'isFile'
+        },
+        {
+          expand: true,
+          flatten: true,
+          cwd: 'packages',
+          src: '*/css/*.css',
+          dest: '<%= dist %>/release/css',
+          filter: 'isFile'
+        }
+      ]
+    },
     packages_publish: {
       files: getPackagesFiles()
     }

grunt/cut-release.js

@@ -3,6 +3,7 @@ module.exports = {
     cleanup: true,
     keepUnstable: false,
     stableTasks: [
+      'copy:css_cut_release',
       'copy:fonts_cut_release',
       'copy:i18n_cut_release',
       'copy:less_cut_release'

grunt/less.js

@@ -20,17 +20,44 @@ function getFiles(compress) {
 	const packages = getDirectories('packages/');
 
 	packages.forEach((feat) => {
-    files.push({
-      src: `packages/${feat}/less/*.less`,
-      dest: `packages/${feat}/<%= pkg.name %>.${feat}.${suffix}`,
-      filter: filterCoreLessFiles
-    });
+    if (feat !== 'core') {
+      files.push({
+        src: `packages/${feat}/less/*.less`,
+        dest: `packages/${feat}/css/<%= pkg.name %>.${feat}.${suffix}`,
+        filter: filterCoreLessFiles
+      });
+    }
   });
 
 	return files;
 }
 
 module.exports = {
+  core: {
+    options: {
+      banner: '<%= banner %>',
+      modifyVars: {
+        'font-path': '../fonts/' 
+      }
+    },
+    files: [{
+      src: 'packages/core/less/main.less',
+      dest: 'packages/core/css/<%= pkg.name %>.core.css'
+    }]
+  },
+  core_min: {
+    options: {
+      banner: '<%= banner %>',
+      modifyVars: {
+        'font-path': '../fonts/' 
+      },
+      compress: true
+    },
+    files: [{
+      src: 'packages/core/less/main.less',
+      dest: 'packages/core/css/<%= pkg.name %>.core.min.css'
+    }]
+  },
   dist: {
     options: {
       banner: '<%= banner %>'

packages/core/less/core.less

@@ -1,4 +1,4 @@
-@import 'elements';
+@import (reference) 'elements';
 @import 'grid';
 @import 'header';
 @import 'body';

packages/core/less/main.less

@@ -1,2 +1,2 @@
-@import 'variables';
+@import (reference) 'variables';
 @import 'core';