Merge pull request #3 from alphagov/node-sass-for-heroku

Revert ruby sass to libsass as it breaks deployment to heroku

Gruntfile.js

@@ -4,7 +4,7 @@ module.exports = function(grunt){
 
     // Builds Sass
     sass: {
-      ruby: {
+      dev: {
         files: {
           'public/stylesheets/main.css': 'public/sass/main.scss',
           'public/stylesheets/main-ie6.css': 'public/sass/main-ie6.scss',
@@ -16,9 +16,8 @@ module.exports = function(grunt){
           'public/stylesheets/elements-page-ie8.css': 'public/sass/elements-page-ie8.scss'
         },
         options: {
-          loadPath: ['govuk/public/sass'],
-          style: 'expanded',
-          lineNumbers: true
+          includePaths: ['govuk/public/sass'],
+          outputStyle: 'expanded'
         } 
       }
     },
@@ -54,6 +53,18 @@ module.exports = function(grunt){
 
     },
 
+    // workaround for libsass
+    replace: {
+      fixSass: {
+        src: ['govuk/public/sass/**/*.scss'],
+        overwrite: true,
+        replacements: [{ 
+          from: /filter:chroma(.*);/g,
+          to: 'filter:unquote("chroma$1");'
+        }]
+      }
+    },
+
     // Watches styles and specs for changes
     watch: {
       css: {
@@ -86,7 +97,7 @@ module.exports = function(grunt){
   [
     'grunt-contrib-copy',
     'grunt-contrib-watch',
-    'grunt-contrib-sass',
+    'grunt-sass',
     'grunt-nodemon',
     'grunt-text-replace',
     'grunt-concurrent'
@@ -110,8 +121,11 @@ module.exports = function(grunt){
     'copy:govuk_assets',
     'convert_template',
     'copy:govuk_frontend_toolkit',
-    'sass:ruby',
+    'replace',
+    'sass',
     'concurrent:target'
   ]);
 
+
+
 };

govuk/public/sass/design-patterns/_buttons.scss

@@ -131,7 +131,7 @@
     &[type="submit"],
     &[type="reset"],
     &[type="button"] {
-      filter:chroma(color=#000000);
+      filter:unquote("chroma(color=#000000)");
     }
 
     &[type=submit].button {

package.json

@@ -17,7 +17,6 @@
     "grunt-contrib-clean": "0.5.0",
     "grunt-contrib-copy": "0.5.0",
     "grunt-contrib-watch": "0.5.3",
-    "grunt-contrib-sass": "0.7.1",
     "grunt-nodemon": "0.x"
   },
   "devDependencies": {

public/sass/base/_grid-wrapper.scss

@@ -1,6 +1,6 @@
 // Wrap grid layout
 .grid-wrapper {
-  @extend %contain-floats;
+  @include contain-floats;
   padding: 0 $gutter-half;
   @include media(tablet) {
     padding: 0 $gutter-half;

public/sass/elements-page.scss

@@ -80,7 +80,7 @@ code {
 // Example box
 .example {
 
-  @extend %contain-floats;
+  @include contain-floats;
   position: relative;
   overflow: hidden;
   border: 1px solid $grey-2;

public/sass/helpers/_helpers.scss

@@ -3,9 +3,14 @@
 // Import GOV.UK frontend toolkit shims
 @import "_shims";
 
-// Extend the %contain-floats placeholder
-// Apply the contain floats mixin to a .cf 'contain-floats' or 'clearfix' class
-
-.cf {
-  @extend %contain-floats;
+// Use contain floats mixin as placeholders are not supported
+@mixin contain-floats {
+  &:after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+  @include ie-lte(7) {
+    zoom: 1;
+  }
 }

public/sass/modules/_form-validation.scss

@@ -33,7 +33,7 @@
 
 // Validation message box
 .validation {
-  @extend %contain-floats;
+  @include contain-floats;
   border-left: 3px solid $mellow-red;
   background: #fef7f7; // NOT IN THE PALETTE !!
   padding-top: $gutter-half;

public/sass/modules/_forms.scss

@@ -210,7 +210,7 @@ textarea {
 // Block form layout (tablet and up)
 
 .form-group-block {
-  @extend %contain-floats;
+  @include contain-floats;
 }
 .form-group-block .form-checkbox,
 .form-group-block .form-radio {

public/sass/template/_main-wrapper.scss

@@ -2,7 +2,7 @@
   max-width: 1020px;
   width: auto;
   margin: 0 auto 90px;
-  @extend %contain-floats;
+  @include contain-floats;
 
   @include ie-lte(6)  {
     width: 990px;