Add css compilation to the build process (#168)

* Remove all precompiled .css files.
* Update all import statements in .scss files to use dart style package imports.
* Add dependency on sass_builder package to compile .css files.

Author: nshahan

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.8.0-dev
+
+  * Remove all precompiled .css files.
+  * Update all import statements in .scss files to use dart style package imports.
+  * Add dependency on sass_builder package to compile .css files.
+
 ## 0.7.1
 
  * Add Material Auto Suggest Input component.
@@ -38,8 +44,8 @@
  * Update documentation.
 
 ## 0.7.0
- 
- * Material Button: Add raised mixin so that buttons can be made to be raised 
+
+ * Material Button: Add raised mixin so that buttons can be made to be raised
    without using the attribute.
  * Material Expansionpanel: Add header minimum height mixin.
  * Material Input: Add support for custom number formatters.

README.md

@@ -69,16 +69,37 @@ For icons to appear, add the following icon font download to your page.
 ```
 
 ## Custom component styles
+The styles of these components can be customized via sass mixins.
 
-Get access to the core Material Design SASS files used to style these components
-by copying them and importing
-[lib/src/css/material/_mixins.scss](https://github.com/dart-lang/angular_components/blob/master/lib/src/css/material/_mixins.scss)
-in your SASS files.
+1. Add a dependency on the
+[sass_builder](https://pub.dartlang.org/packages/sass_builder) package and add
+the transformer.
 
+  In your `pubspec.yaml`:
 
-> NOTE: These .scss files are not used during the build step, but we are
-> planning to add this support. See
-> [issue #45](https://github.com/dart-lang/angular_components/issues/45).
+  ```yaml
+  dependencies:
+    sass_builder ^1.0.0 # update for the latest version
+  transformers:
+  - sass_builder
+  - angular
+  ```
+
+  > NOTE: Be sure you add the `sass_builder` transformer before the `angular`
+  > transformer.
+
+2. Now you can import styles and mixins from this package via dart style package
+imports in your sass files.
+
+  In your `.scss` files:
+
+  ```scss
+  @import 'package:angular_components/src/css/material/material';
+
+  .blue {
+    color: $mat-blue;
+  }
+  ```
 
 ## Project Roadmap
 

lib/src/components/app_layout/_material_drawer.scss

@@ -1,17 +1,8 @@
-/*
- * Copyright (c) 2016, the Dart project authors.  Please see the AUTHORS file
- * for details. All rights reserved. Use of this source code is governed by a
- * BSD-style license that can be found in the LICENSE file.
- */
+// Copyright (c) 2016, the Dart project authors.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
 
-/*
- * NOTE: SASS files are not used during the build step of this package and are
- * provided as reference only. These .scss files were used to generate the
- * corresponding .css files in a separate process. We are working on a solution
- * to include CSS generation from SASS files during the build process.
- */
-
-@import 'lib/src/css/material/material';
+@import 'package:angular_components/src/css/material/material';
 
 $mat-drawer-width: $mat-grid * 32;
 

lib/src/components/app_layout/_mixins.scss

@@ -1,15 +1,6 @@
-/*
- * Copyright (c) 2016, the Dart project authors.  Please see the AUTHORS file
- * for details. All rights reserved. Use of this source code is governed by a
- * BSD-style license that can be found in the LICENSE file.
- */
-
-/*
- * NOTE: SASS files are not used during the build step of this package and are
- * provided as reference only. These .scss files were used to generate the
- * corresponding .css files in a separate process. We are working on a solution
- * to include CSS generation from SASS files during the build process.
- */
+// Copyright (c) 2016, the Dart project authors.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
 
 /// Sets width of MaterialTemporaryDrawerComponent.
 ///

lib/src/components/app_layout/layout.scss

@@ -1,23 +1,14 @@
-/*
- * Copyright (c) 2016, the Dart project authors.  Please see the AUTHORS file
- * for details. All rights reserved. Use of this source code is governed by a
- * BSD-style license that can be found in the LICENSE file.
- */
-
-/*
- * NOTE: SASS files are not used during the build step of this package and are
- * provided as reference only. These .scss files were used to generate the
- * corresponding .css files in a separate process. We are working on a solution
- * to include CSS generation from SASS files during the build process.
- */
+// Copyright (c) 2016, the Dart project authors.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
 
 /// Styles provided to more easily layout an application.
 /// This includes:
 ///   material-drawer (persistent and permanent)
 @import 'material_drawer';
-@import 'lib/src/css/material/material';
-@import 'lib/src/css/material/shadow';
-@import 'lib/src/components/material_list/mixins';
+@import 'package:angular_components/src/css/material/material';
+@import 'package:angular_components/src/css/material/shadow';
+@import 'package:angular_components/src/components/material_list/mixins';
 
 $mat-toolbar-mobile-breakpoint: 599px;
 $mat-drawer-border: 1px solid $mat-border-light;

lib/src/components/app_layout/layout.scss.css

@@ -1,19 +1,10 @@
-/*
- * Copyright (c) 2016, the Dart project authors.  Please see the AUTHORS file
- * for details. All rights reserved. Use of this source code is governed by a
- * BSD-style license that can be found in the LICENSE file.
- */
-
-/*
- * NOTE: SASS files are not used during the build step of this package and are
- * provided as reference only. These .scss files were used to generate the
- * corresponding .css files in a separate process. We are working on a solution
- * to include CSS generation from SASS files during the build process.
- */
+// Copyright (c) 2016, the Dart project authors.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
 
 @import 'material_drawer';
-@import 'lib/src/css/material/material';
-@import 'lib/src/css/material/shadow';
+@import 'package:angular_components/src/css/material/material';
+@import 'package:angular_components/src/css/material/shadow';
 
 :host {
   @include fit;

lib/src/components/app_layout/material_temporary_drawer.scss

@@ -1,15 +1,6 @@
-/*
- * Copyright (c) 2016, the Dart project authors.  Please see the AUTHORS file
- * for details. All rights reserved. Use of this source code is governed by a
- * BSD-style license that can be found in the LICENSE file.
- */
-
-/*
- * NOTE: SASS files are not used during the build step of this package and are
- * provided as reference only. These .scss files were used to generate the
- * corresponding .css files in a separate process. We are working on a solution
- * to include CSS generation from SASS files during the build process.
- */
+// Copyright (c) 2016, the Dart project authors.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
 
 @mixin disabled-cursor($cursor-style) {
   ::ng-deep [buttonDecorator].is-disabled {

lib/src/components/app_layout/material_temporary_drawer.scss.css

@@ -1,15 +1,6 @@
-/*
- * Copyright (c) 2016, the Dart project authors.  Please see the AUTHORS file
- * for details. All rights reserved. Use of this source code is governed by a
- * BSD-style license that can be found in the LICENSE file.
- */
-
-/*
- * NOTE: SASS files are not used during the build step of this package and are
- * provided as reference only. These .scss files were used to generate the
- * corresponding .css files in a separate process. We are working on a solution
- * to include CSS generation from SASS files during the build process.
- */
+// Copyright (c) 2016, the Dart project authors.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
 
 /// Consider using button-base or material-button instead from:
 ///     lib/src/components/material_button/_mixins.scss