Merge pull request #596 from eleven-labs/fix-reuse-mixins-styles

Merge styles index and vendor in one file

app/src/ui.js

@@ -2,29 +2,6 @@
 
 module.exports = function(GulpAngularGenerator) {
 
-  /**
-   * There is 2 ways of dealing with vendor styles
-   * - If the vendor styles exist in the css preprocessor chosen,
-   *   the best is to include directly the source files
-   * - If not, the vendor styles are simply added as standard css links
-   *
-   * isVendorStylesPreprocessed defines which solution has to be used
-   * regarding the ui framework and the css preprocessor chosen
-   */
-  GulpAngularGenerator.prototype.vendorStyles = function vendorStyles() {
-    this.isVendorStylesPreprocessed = false;
-
-    if(this.props.cssPreprocessor.extension === 'scss') {
-      if(this.props.ui.key === 'bootstrap' || this.props.ui.key === 'foundation') {
-        this.isVendorStylesPreprocessed = true;
-      }
-    } else if(this.props.cssPreprocessor.extension === 'less') {
-      if(this.props.ui.key === 'bootstrap') {
-        this.isVendorStylesPreprocessed = true;
-      }
-    }
-  };
-
   /**
    * Add files of the navbar and the main view depending on the ui framework
    * and the css preprocessor
@@ -47,7 +24,7 @@ module.exports = function(GulpAngularGenerator) {
     this.files.push({
       src: 'src/app/_' + this.props.ui.key + '/__' + this.props.ui.key + '-index.' + this.props.cssPreprocessor.extension,
       dest: 'src/app/index.' + this.props.cssPreprocessor.extension,
-      template: false
+      template: true
     });
 
     this.files.push({
@@ -61,14 +38,6 @@ module.exports = function(GulpAngularGenerator) {
       dest: 'src/app/components/navbar/navbar.' + this.props.cssPreprocessor.extension,
       template: false
     });
-
-    if(this.props.cssPreprocessor.key !== 'none') {
-      this.files.push({
-        src: 'src/app/_' + this.props.ui.key + '/__' + this.props.ui.key + '-vendor.' + this.props.cssPreprocessor.extension,
-        dest: 'src/app/vendor.' + this.props.cssPreprocessor.extension,
-        template: true
-      });
-    }
   };
 
   /**

app/templates/gulp/_styles.js

@@ -27,8 +27,7 @@ gulp.task('styles', function () {
 
   var injectFiles = gulp.src([
     path.join(conf.paths.src, '/app/**/*.<%- props.cssPreprocessor.extension %>'),
-    path.join('!' + conf.paths.src, '/app/index.<%- props.cssPreprocessor.extension %>'),
-    path.join('!' + conf.paths.src, '/app/vendor.<%- props.cssPreprocessor.extension %>')
+    path.join('!' + conf.paths.src, '/app/index.<%- props.cssPreprocessor.extension %>')
   ], { read: false });
 
   var injectOptions = {
@@ -41,22 +40,15 @@ gulp.task('styles', function () {
     addRootSlash: false
   };
 
-  var indexFilter = $.filter('index.<%- props.cssPreprocessor.extension %>');
-  var vendorFilter = $.filter('vendor.<%- props.cssPreprocessor.extension %>');
 <% if (props.cssPreprocessor.key === 'ruby-sass') { -%>
   var cssFilter = $.filter('**/*.css');
 <% } -%>
 
   return gulp.src([
-    path.join(conf.paths.src, '/app/index.<%- props.cssPreprocessor.extension %>'),
-    path.join(conf.paths.src, '/app/vendor.<%- props.cssPreprocessor.extension %>')
+    path.join(conf.paths.src, '/app/index.<%- props.cssPreprocessor.extension %>')
   ])
-    .pipe(indexFilter)
     .pipe($.inject(injectFiles, injectOptions))
-    .pipe(indexFilter.restore())
-    .pipe(vendorFilter)
     .pipe(wiredep(_.extend({}, conf.wiredep)))
-    .pipe(vendorFilter.restore())
 <% if (props.cssPreprocessor.key === 'ruby-sass') { -%>
     .pipe($.rubySass(sassOptions)).on('error', conf.errorHandler('RubySass'))
     .pipe(cssFilter)

app/templates/src/_index.html

@@ -8,9 +8,6 @@
     <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
 
     <!-- build:css({<%- props.paths.tmp %>/serve,<%- props.paths.src %>}) styles/vendor.css -->
-<% if (props.cssPreprocessor.key !== 'none') { -%>
-    <link rel="stylesheet" href="app/vendor.css">
-<% } -%>
     <!-- bower:css -->
     <!-- run `gulp inject` to automatically populate bower styles dependencies -->
     <!-- endbower -->

app/templates/src/app/_angular-material/__angular-material-index.less

@@ -1,3 +1,10 @@
+/**
+ *  Do not remove this comments bellow. It's the markers used by wiredep to inject
+ *  less dependencies when defined in the bower.json of your dependencies
+ */
+// bower:less
+// endbower
+
 @import url(//fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic);
 
 html {

app/templates/src/app/_angular-material/__angular-material-index.scss

@@ -1,4 +1,11 @@
-@import url(//fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic);
+/**
+ *  Do not remove this comments bellow. It's the markers used by wiredep to inject
+ *  sass dependencies when defined in the bower.json of your dependencies
+ */
+// bower:scss
+// endbower
+
+@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic);
 
 html {
   font-family: 'Roboto Slab', serif;

app/templates/src/app/_angular-material/__angular-material-index.styl

@@ -1,3 +1,10 @@
+/**
+ *  Do not remove this comments bellow. It's the markers used by wiredep to inject
+ *  stylus dependencies when defined in the bower.json of your dependencies
+ */
+// bower:styl
+// endbower
+
 @import url("//fonts.googleapis.com/css?family=Roboto\+Slab:400,700|Roboto:400,700,700italic,400italic")
 
 html

app/templates/src/app/_bootstrap/__bootstrap-index.less

@@ -1,3 +1,17 @@
+/**
+ *  Do not remove this comments bellow. It's the markers used by wiredep to inject
+ *  less dependencies when defined in the bower.json of your dependencies
+ */
+// bower:less
+// endbower
+
+/**
+ *  If you want to override some bootstrap variables, you have to change values here.
+ *  The list of variables are listed here bower_components/bootstrap/less/variables.less
+ */
+@navbar-inverse-link-color: #5AADBB;
+@icon-font-path: '../<%- computedPaths.appToBower %>/bower_components/bootstrap/fonts/';
+
 .browsehappy {
   margin: 0.2em 0;
   background: #ccc;

app/templates/src/app/_bootstrap/__bootstrap-index.scss

@@ -1,3 +1,17 @@
+/**
+ *  If you want to override some bootstrap variables, you have to change values here.
+ *  The list of variables are listed here bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/_variables.scss
+ */
+$navbar-inverse-link-color: #5AADBB;
+$icon-font-path: "../<%- computedPaths.appToBower %>/bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
+
+/**
+ *  Do not remove this comments bellow. It's the markers used by wiredep to inject
+ *  sass dependencies when defined in the bower.json of your dependencies
+ */
+// bower:scss
+// endbower
+
 .browsehappy {
   margin: 0.2em 0;
   background: #ccc;

app/templates/src/app/_bootstrap/__bootstrap-index.styl

@@ -1,3 +1,17 @@
+/**
+ *  If you want to override some bootstrap variables, you have to change values here.
+ *  The list of variables are listed here bower_components/bootstrap-stylus/bootstrap/variables.styl
+ */
+$navbar-inverse-link-color = #5AADBB
+$icon-font-path = "../<%- computedPaths.appToBower %>/bower_components/bootstrap-stylus/fonts/"
+
+/**
+ *  Do not remove this comments bellow. It's the markers used by wiredep to inject
+ *  stylus dependencies when defined in the bower.json of your dependencies
+ */
+// bower:styl
+// endbower
+
 .browsehappy
   margin 0.2em 0
   background #ccc

app/templates/src/app/_foundation/__foundation-index.less

@@ -1,3 +1,10 @@
+/**
+ *  Do not remove this comments bellow. It's the markers used by wiredep to inject
+ *  less dependencies when defined in the bower.json of your dependencies
+ */
+// bower:less
+// endbower
+
 .browsehappy {
   margin: 0.2em 0;
   background: #ccc;

app/templates/src/app/_foundation/__foundation-index.scss

@@ -1,3 +1,22 @@
+/**
+ *  If you want to override some foundation settings, you have to change values here.
+ *  The list of settings values are listed here bower_components/foundation/scss/foundation/_settings.scss
+ */
+$topbar-bg-color: #5AADBB;
+
+/**
+ *  The import of foundation is made manually because there is still no links of the
+ *  sass version in their bower.json...
+ */
+@import '../<%- computedPaths.appToBower %>/bower_components/foundation/scss/foundation';
+
+/**
+ *  Do not remove this comments bellow. It's the markers used by wiredep to inject
+ *  sass dependencies when defined in the bower.json of your dependencies
+ */
+// bower:scss
+// endbower
+
 .browsehappy {
   margin: 0.2em 0;
   background: #ccc;

app/templates/src/app/_foundation/__foundation-index.styl

@@ -1,3 +1,10 @@
+/**
+ *  Do not remove this comments bellow. It's the markers used by wiredep to inject
+ *  stylus dependencies when defined in the bower.json of your dependencies
+ */
+// bower:styl
+// endbower
+
 .browsehappy
   margin 0.2em 0
   background #ccc

app/templates/src/app/_none/__none-index.less

@@ -1,3 +1,8 @@
+/* Do not remove this comments bellow. It's the markers used by wiredep to inject
+   less dependencies when defined in the bower.json of your dependencies */
+// bower:less
+// endbower
+
 .browsehappy {
   margin: 0.2em 0;
   background: #ccc;

app/templates/src/app/_none/__none-index.scss

@@ -1,3 +1,8 @@
+/* Do not remove this comments bellow. It's the markers used by wiredep to inject
+   sass dependencies when defined in the bower.json of your dependencies */
+// bower:scss
+// endbower
+
 .browsehappy {
   margin: 0.2em 0;
   background: #ccc;

app/templates/src/app/_none/__none-index.styl

@@ -1,3 +1,8 @@
+/* Do not remove this comments bellow. It's the markers used by wiredep to inject
+   stylus dependencies when defined in the bower.json of your dependencies */
+// bower:styl
+// endbower
+
 .browsehappy
   margin 0.2em 0
   background #ccc