SASS support

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 temp/
+.DS_Store

app/index.js

@@ -2,6 +2,7 @@
 var yeoman = require('yeoman-generator');
 var path = require('path');
 var yosay = require('yosay');
+var chalk = require('chalk');
 
 module.exports = yeoman.generators.Base.extend({
   init: function () {
@@ -22,22 +23,41 @@ module.exports = yeoman.generators.Base.extend({
     this.log(yosay('Out of the box I include HTML5 Boilerplate and Polymer'));
 
     var defaultName = path.basename(process.cwd());
-    var prompts = [
-      {
+    var prompts = [{
         name: 'includeCore',
         message: 'Would you like to include core-elements?',
         type: 'confirm'
-      },
-      {
+      }, {
         name: 'includePaper',
         message: 'Would you like to include paper-elements?',
         type: 'confirm'
-      }
-    ];
+      }, {
+        name: 'includeSass',
+        message: 'Would you like to use SASS/SCSS for element styles?',
+        type: 'confirm'
+      }, {
+        when: function (answers) {
+          return answers.includeSass;
+        },
+        type: 'confirm',
+        name: 'includeLibSass',
+        message: 'Would you like to use libsass? Read up more at \n' +
+          chalk.green('https://github.com/andrew/node-sass#node-sass'),
+        default: false
+      }];
+
+    this.prompt(prompts, function (answers) {
+      this.includeCore = answers.includeCore;
+      this.includePaper = answers.includePaper;
+      this.includeSass = answers.includeSass;
+      this.includeLibSass = answers.includeLibSass;
+      this.includeRubySass = !answers.includeLibSass;
 
-    this.prompt(prompts, function (props) {
-      this.includeCore = props.includeCore;
-      this.includePaper = props.includePaper;
+      // Save user configuration options to .yo-rc.json file
+      this.config.set({
+        includeSass: this.includeSass
+      });
+      this.config.save();
 
       done();
     }.bind(this));
@@ -59,12 +79,20 @@ module.exports = yeoman.generators.Base.extend({
     this.template('app/404.html');
     this.template('app/favicon.ico');
     this.template('app/robots.txt');
-    this.copy('app/main.css', 'app/styles/main.css');
+    this.copy('app/main.css',
+      this.includeSass ? 'app/styles/main.scss':
+                         'app/styles/main.css');
     this.copy('app/app.js', 'app/scripts/app.js');
     this.copy('app/htaccess', 'app/.htaccess');
     this.copy('app/elements.html', 'app/elements/elements.html');
-    this.copy('app/yo-list.html', 'app/elements/yo-list.html');
-    this.copy('app/yo-greeting.html', 'app/elements/yo-greeting.html');
+    this.copy('app/yo-list.html', 'app/elements/yo-list/yo-list.html');
+    this.copy('app/yo-list.css',
+      this.includeSass ? 'app/elements/yo-list/yo-list.scss':
+                         'app/elements/yo-list/yo-list.css');
+    this.copy('app/yo-greeting.html', 'app/elements/yo-greeting/yo-greeting.html');
+    this.copy('app/yo-greeting.css',
+      this.includeSass ? 'app/elements/yo-greeting/yo-greeting.scss':
+                         'app/elements/yo-greeting/yo-greeting.css');
     this.copy('app/index.html', 'app/index.html');
   }
 });

app/templates/Gruntfile.js

@@ -28,25 +28,73 @@ module.exports = function (grunt) {
     watch: {
       options: {
         nospawn: true,
-        livereload: true
+        livereload: { liveCSS: false }
       },
       livereload: {
         options: {
-          livereload: LIVERELOAD_PORT
+          livereload: true
         },
         files: [
           '<%%= yeoman.app %>/*.html',
-          '<%%= yeoman.app %>/elements/**/*.html',
+          '<%%= yeoman.app %>/elements/{,*/}*.html',
+          '{.tmp,<%%= yeoman.app %>}/elements/{,*/}*.css',
           '{.tmp,<%%= yeoman.app %>}/styles/{,*/}*.css',
           '{.tmp,<%%= yeoman.app %>}/scripts/{,*/}*.js',
           '<%%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp}'
         ]
+      },
+      js: {
+        files: ['<%%= yeoman.app %>/scripts/{,*/}*.js'],
+        tasks: ['jshint']
+      },
+      styles: {
+        files: [
+          '<%%= yeoman.app %>/styles/{,*/}*.css',
+          '<%%= yeoman.app %>/elements/{,*/}*.css'
+        ],
+        tasks: ['copy:styles']
       }<% if (testFramework === 'jasmine') { %>,
       test: {
         files: ['<%%= yeoman.app %>/scripts/{,*/}*.js', 'test/spec/**/*.js'],
         tasks: ['test']
+      }<% } %><% if (includeSass) { %>,
+      sass: {
+        files: [
+          '<%%= yeoman.app %>/styles/{,*/}*.{scss,sass}',
+          '<%%= yeoman.app %>/elements/{,*/}*.{scss,sass}'
+        ],
+        tasks: ['sass:server']
       }<% } %>
-    },
+    },<% if (includeSass) { %>
+
+    // Compiles Sass to CSS and generates necessary files if requested
+    sass: {
+      options: {<% if (includeLibSass) { %>
+        sourceMap: true,
+        includePaths: ['bower_components']
+        <% } else { %>
+        sourcemap: true,
+        loadPath: 'bower_components'
+      <% } %>},
+      dist: {
+        files: [{
+          expand: true,
+          cwd: '<%%= yeoman.app %>',
+          src: ['styles/{,*/}*.{scss,sass}', 'elements/{,*/}*.{scss,sass}'],
+          dest: '<%%= yeoman.dist %>',
+          ext: '.css'
+        }]
+      },
+      server: {
+        files: [{
+          expand: true,
+          cwd: '<%%= yeoman.app %>',
+          src: ['styles/{,*/}*.{scss,sass}', 'elements/{,*/}*.{scss,sass}'],
+          dest: '.tmp',
+          ext: '.css'
+        }]
+      }
+    },<% } %>
     connect: {
       options: {
         port: 9000,
@@ -92,8 +140,7 @@ module.exports = function (grunt) {
     },
     clean: {
       dist: ['.tmp', '<%%= yeoman.dist %>/*'],
-      server: '.tmp',
-      tmp: '.tmp'
+      server: '.tmp'
     },
     jshint: {
       options: {
@@ -164,6 +211,14 @@ module.exports = function (grunt) {
             '<%%= yeoman.app %>/styles/{,*/}*.css'
           ]
         }
+      },
+      elements: {
+        files: [{
+          expand: true,
+          cwd: '<%%= yeoman.app %>/elements',
+          src: '{,*/}*.css',
+          dest: '<%%= yeoman.dist %>'
+        }]
       }
     },
     htmlmin: {
@@ -205,11 +260,20 @@ module.exports = function (grunt) {
           src: [
             '*.{ico,txt}',
             '.htaccess',
-            'elements/**',
+            'elements/**',<% if (includeSass) { %>
+            '!elements/**/*.scss',<% } %>
             'images/{,*/}*.{webp,gif}',
             'bower_components/**'
           ]
         }]
+      },
+      styles: {
+        files: [{
+          expand: true,
+          cwd: '<%%= yeoman.app %>',
+          dest: '.tmp',
+          src: ['{styles,elements}/{,*/}*.css']
+        }]
       }
     }
   });
@@ -225,9 +289,10 @@ module.exports = function (grunt) {
     }
 
     grunt.task.run([
-      'clean:server',
+      'clean:server',<% if (includeSass) { %>
+      'sass:server',<% } %>
+      'copy:styles',
       'connect:livereload',
-      'copy',
       'open',
       'watch'
     ]);
@@ -242,17 +307,17 @@ module.exports = function (grunt) {
   ]);
 
   grunt.registerTask('build', [
-    'clean:dist',
+    'clean:dist',<% if (includeSass) { %>
+    'sass',<% } %>
     'copy',
-    'vulcanize',
     'useminPrepare',
+    'vulcanize',
     'imagemin',
     'concat',
     'cssmin',
     'uglify',
     'htmlmin',
-    'usemin',
-    'clean:tmp'
+    'usemin'
   ]);
 
   grunt.registerTask('default', [

app/templates/_package.json

@@ -3,7 +3,9 @@
   "version": "0.0.0",
   "dependencies": {},
   "devDependencies": {
-    "grunt": "~0.4.1",
+    "grunt": "~0.4.1",<% if (includeSass) { %><% if (includeLibSass) { %>
+    "grunt-sass": "~0.14.0",<% } if (includeRubySass) { %>
+    "grunt-contrib-sass": "~0.7.3",<% } %><% } %>
     "grunt-contrib-copy": "~0.5.0",
     "grunt-contrib-concat": "~0.5.0",
     "grunt-contrib-uglify": "~0.5.0",
@@ -14,7 +16,7 @@
     "grunt-contrib-htmlmin": "0.3.0",
     "grunt-contrib-imagemin": "0.7.1",
     "grunt-contrib-watch": "~0.6.1",<% if (testFramework === 'jasmine') { %>
-    "grunt-contrib-jasmine": "~0.5.1",<% }else{ %>
+    "grunt-contrib-jasmine": "~0.5.1",<% } else { %>
     "grunt-mocha": "~0.4.7",<% } %>
     "grunt-usemin": "~2.3.0",
     "grunt-rev": "~0.1.0",

app/templates/app/elements.html

@@ -1,2 +1,2 @@
-<link rel="import" href="yo-list.html">
-<link rel="import" href="yo-greeting.html">
+<link rel="import" href="yo-list/yo-list.html">
+<link rel="import" href="yo-greeting/yo-greeting.html">

app/templates/app/yo-greeting.css

@@ -0,0 +1,7 @@
+/* Shadow DOM CSS Cheat Sheet */
+/* http://robdodson.me/blog/2014/04/10/shadow-dom-css-cheat-sheet */
+
+/* styles for the custom element itself - lowest specificity */
+:host {
+  display: block;
+}

app/templates/app/yo-greeting.html

@@ -1,15 +1,8 @@
-<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/polymer/polymer.html">
 
 <polymer-element name="yo-greeting"  attributes="">
   <template>
-    <style>
-      /* styles for the custom element itself - lowest specificity */
-      :host { display: block; }
-      /*
-      style if an ancestor has the different class
-      :host-context(.different) { }
-      */
-    </style>
+    <link rel="stylesheet" href="yo-greeting.css">
     <h1>{{ greeting }}, {{ greeting }}!</h1>
     <span>Update text to change the greeting.</span>
     <input type="text" value="{{ greeting }}">

app/templates/app/yo-list.css

@@ -0,0 +1,7 @@
+/* Shadow DOM CSS Cheat Sheet */
+/* http://robdodson.me/blog/2014/04/10/shadow-dom-css-cheat-sheet */
+
+/* styles for the custom element itself - lowest specificity */
+:host {
+  display: block;
+}

app/templates/app/yo-list.html

@@ -1,15 +1,8 @@
-<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/polymer/polymer.html">
 
 <polymer-element name="yo-list"  attributes="">
   <template>
-    <style>
-      /* styles for the custom element itself - lowest specificity */
-      :host { display: block; }
-      /*
-      style if an ancestor has the different class
-      :host-context(.different) { }
-      */
-    </style>
+    <link rel="stylesheet" href="yo-list.css">
     <ul>
       <template id="greeting" repeat="{{ item in items }}">
         <li>{{ item }}</li>

el/index.js

@@ -3,12 +3,33 @@ var yeoman = require('yeoman-generator');
 var path = require('path');
 
 module.exports = yeoman.generators.Base.extend({
+  askFor: function () {
+    var done = this.async();
+
+    var includeSass = this.config.get('includeSass');
+    var styleType = includeSass ? 'SCSS' : 'CSS';
+
+    var prompts = [
+      {
+        name: 'externalStyle',
+        message: 'Would you like an external ' + styleType + ' file for this element?',
+        type: 'confirm'
+      }
+    ];
+
+    this.prompt(prompts, function (answers) {
+      this.includeSass = includeSass;
+      this.externalStyle = answers.externalStyle;
+
+      done();
+    }.bind(this));
+  },
   el: function () {
     this.elementName = this.args[0];
     if (!this.elementName) {
       console.error('Element name required');
       console.error('ex: yo polymer:el my-element');
-      return
+      return;
     }
 
     if (this.elementName.indexOf('-') === -1) {
@@ -18,11 +39,21 @@ module.exports = yeoman.generators.Base.extend({
     }
 
     // Create the template element
-    this.template('_element.html', 'app/elements/' + this.elementName + '.html');
+
+    // el = "x-foo/x-foo"
+    var el = path.join(this.elementName, this.elementName);
+    // pathToEl = "app/elements/x-foo/x-foo"
+    var pathToEl = path.join('app/elements', el);
+    this.template('_element.html', pathToEl + '.html');
+    if (this.externalStyle) {
+      this.template('_element.css',
+        this.includeSass ? pathToEl + '.scss':
+                           pathToEl + '.css');
+    }
 
     // Wire up the dependency in elements.html
     var file = this.readFileAsString('app/elements/elements.html');
-    file += '<link rel="import" href="' + this.elementName + '.html">\n';
+    file += '<link rel="import" href="' + el + '.html">\n';
     this.writeFileFromString(file, 'app/elements/elements.html');
   }
 });

el/templates/_element.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}