Remove compass-mixins dependency

The immediate problem this dependency causes is that it it fails to build with the current version of node-sass (see Igosuki/compass-mixins#84) which in turn means that H cannot be built with Node 6.0. Removing this dependency allows the node-sass dependency to be unpinned so that the current version can be used. The primary functionality that compass-mixins was used for was vendor prefixing, which is now taken care of by autoprefixer, plus CSS fixes for browsers which we no longer support (IE < 10). For the remaining handful of mixins for resets and color mixing which we are still using, this commit just extracts the few lines of code for each from the compass documentation and includes it directly in our SCSS files.
hypothesis · May 3, 2016 · 9be804d · 9be804d
1 parent 8a5201b
commit 9be804d
Show file tree

Hide file tree

Showing 16 changed files with 101 additions and 51 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -181,7 +181,6 @@ gulp.task('build-css', function () {
 
   var sassOpts = {
     outputStyle: IS_PRODUCTION_BUILD ? 'compressed' : 'nested',
-    includePaths: ['node_modules/compass-mixins/lib/'],
   };
 
   var cssURLRewriter = postcssURL({

diff --git a/h/static/scripts/annotator/host.coffee b/h/static/scripts/annotator/host.coffee
@@ -18,6 +18,7 @@ module.exports = class Host extends Guest
     .attr('allowfullscreen', '')
     .attr('seamless', '')
     .attr('src', options.app)
+    .addClass('h-sidebar-iframe')
 
     @frame = $('<div></div>')
     .css('display', 'none')

diff --git a/h/static/styles/annotator/adder.scss b/h/static/styles/annotator/adder.scss
@@ -45,7 +45,7 @@
 }
 
 .annotator-adder-actions__button {
-  @include box-shadow(none);
+  box-shadow: none;
   font-family: h;
   font-size: 18px;
   background: transparent !important;

diff --git a/h/static/styles/annotator/inject.scss b/h/static/styles/annotator/inject.scss
@@ -42,8 +42,8 @@ $base-font-size: 14px;
 
   // frame styles
   @import './bucket-bar';
-  @include user-select(none);
   @include noise-background;
+  user-select: none;
   direction: ltr;
   background: none;
   font-size: $base-font-size;
@@ -67,7 +67,8 @@ $base-font-size: 14px;
     width: initial;
   }
 
-  & > iframe {
+  .h-sidebar-iframe {
+    border: none;
     height: 100%;
     width: 100%;
     z-index: 3;
@@ -98,8 +99,8 @@ $base-font-size: 14px;
 
     ul, li {
       box-sizing: border-box;
+      list-style: none;
       @include reset-box-model;
-      @include reset-list-style;
     }
   }
 
@@ -129,7 +130,7 @@ $base-font-size: 14px;
   }
 
   .annotator-frame-button--sidebar_toggle {
-    @include box-shadow(none);
+    box-shadow: none;
     border-radius: 0px;
     border-style: none none solid solid;
     padding-right: 6px;

diff --git a/h/static/styles/app.scss b/h/static/styles/app.scss
@@ -1,5 +1,3 @@
-@import 'compass';
-
 $base-font-size: 12px;
 $base-line-height: 20px;
 

diff --git a/h/static/styles/base.scss b/h/static/styles/base.scss
@@ -1,6 +1,3 @@
-@import 'compass/css3';
-@import 'compass/reset/utilities';
-
 @import "./variables";
 @import "./util";
 

diff --git a/h/static/styles/common.scss b/h/static/styles/common.scss
@@ -1,6 +1,3 @@
-@import 'compass/layout/stretching';
-@import 'compass/typography/text/force-wrap';
-
 @import './base';
 @import './forms';
 @import './grid';
@@ -55,7 +52,7 @@ html {
 
 //Candidate for cleanup
 .btn-link {
-  @include box-shadow(none);
+  box-shadow: none;
   @include reset-box-model;
   background: none;
   background-color: transparent;
@@ -191,7 +188,7 @@ html {
   // These psuedo-elements add the speech bubble tail / triangle.
   &:before, &:after {
     // http://www.red-team-design.com/css-diagonal-borders-still-not-rendering-properly-on-firefox
-    @include scale(.9999);
+    transform: scale(.9999);
     border-color: rgba(0, 0, 0, 0);
 
     border-style: solid;

diff --git a/h/static/styles/forms.scss b/h/static/styles/forms.scss
@@ -1,7 +1,5 @@
 // Common form styles.
 @import "mixins/forms";
-@import "compass/css3/images";
-@import "compass/utilities/general/clearfix";
 
 .form-field {
   @include pie-clearfix;
@@ -13,6 +11,7 @@
   position: relative;
   text-transform: uppercase;
   font-weight: bold;
+  font-size: 1em;
   margin-top: 1.5em;
   margin-bottom: 1.5em;
 
@@ -229,20 +228,20 @@
 }
 
 .btn-danger {
-  @include background(linear-gradient(to bottom, $error-color, shade($error-color, 5%)));
+  background: linear-gradient(to bottom, $error-color, shade($error-color, 5%));
   color: white;
   border-color: shade($error-color, 15%);
   text-shadow: 0 -1px 0 rgba(0, 0, 0, .1);
 
   &:focus, &:hover, &:active, &.js-hover, &.js-focus, &.js-active {
-    @include box-shadow(0 1px 0 rgba(0, 0, 0, .05));
+    box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
     color: white;
     background: tint($error-color, 5%);
     border-color: $error-color;
   }
 
   &:active, &.js-active {
-    @include box-shadow(inset 0 1px 0 rgba(0, 0, 0, .3));
+    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .3);
     color: white;
     background: shade($error-color, 10%);
     border-color: shade($error-color, 30%);
@@ -254,7 +253,7 @@
 
   &, &:focus, &:hover, &:active, &[disabled],
   &.js-hover, &.js-focus, &.js-active, &.js-disabled {
-    @include box-shadow(none);
+    box-shadow: none;
     background: none;
   }
 
@@ -322,7 +321,7 @@
 }
 
 [status-button-state] .btn-message-text {
-  @include transition(opacity .2s .6s ease-in);
+  transition: opacity .2s .6s ease-in;
   opacity: 0;
 }
 
@@ -331,12 +330,12 @@
 }
 
 [status-button-state] .btn-message-success .btn-message-icon {
-  @include transform(scale(0));
+  transform: scale(0);
 }
 
 [status-button-state=success] .btn-message-success .btn-message-icon {
-  @include transition(transform .15s 0 cubic-bezier(0, 1.8, 1, 1.8));
-  @include transform(scale(1));
+  transition: transform .15s 0 cubic-bezier(0, 1.8, 1, 1.8);
+  transform: scale(1);
 }
 
 // TODO: Move into seperate module stylesheet.

diff --git a/h/static/styles/help-page.scss b/h/static/styles/help-page.scss
@@ -1,5 +1,3 @@
-@import 'compass';
-
 $base-font-size: 16px;
 $base-line-height: 22px;
 

diff --git a/h/static/styles/mixins/forms.scss b/h/static/styles/mixins/forms.scss
@@ -1,5 +1,14 @@
 @import "../base";
 
+// See http://compass-style.org/reference/compass/utilities/general/clearfix/#mixin-pie-clearfix
+@mixin pie-clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
 @mixin focus-outline {
   border-color: #51A7E8;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, .075) inset, 0px 0px 5px rgba(81, 167, 232, .5);
@@ -36,7 +45,7 @@
 }
 
 @mixin btn {
-  @include box-shadow(0 1px 0 rgba(0, 0, 0, .15));
+  box-shadow: 0 1px 0 rgba(0, 0, 0, .15);
 
   background: linear-gradient($button-background-gradient);
   display: inline-block;
@@ -49,24 +58,35 @@
 }
 
 @mixin btn-hover {
-  @include box-shadow(0 1px 0 rgba(0, 0, 0, .05));
+  box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
   outline: none;
   color: $button-text-color;
   background: $button-background-start;
   border-color: #bababa;
 }
 
 @mixin btn-active {
-  @include box-shadow(inset 0 1px 0 rgba(0, 0, 0, .1));
+  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1);
   background: $button-background-end;
   color: #424242;
   border-color: #bababa;
 }
 
 @mixin btn-disabled {
-  @include box-shadow(none);
+  box-shadow: none;
   cursor: default;
   background: #F0F0F0;
   border-color: #CECECE;
   color: $gray-light;
 }
+
+// Tint and shade functions from
+// https://css-tricks.com/snippets/sass/tint-shade-functions
+@function tint($color, $percent){
+  @return mix(white, $color, $percent);
+}
+
+@function shade($color, $percent){
+  @return mix(black, $color, $percent);
+}
+
diff --git a/h/static/styles/mixins/grid.scss b/h/static/styles/mixins/grid.scss
@@ -1,5 +1,3 @@
-@import "compass/utilities/general/clearfix";
-
 // Mixins for working with grids. A grid consists of an outer grid container
 // and internal columns. Each column has a gutter defined by $grid-gutter.
 // The implementation is largely based on the grid system created by

diff --git a/h/static/styles/mixins/reset.scss b/h/static/styles/mixins/reset.scss
@@ -0,0 +1,32 @@
+@mixin reset-font {
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+
+@mixin reset-box-model {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+// Adapted from http://compass-style.org/reference/compass/reset/utilities/#mixin-nested-reset
+@mixin nested-reset {
+  div, span, applet, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  a, abbr, acronym, address, big, cite, code,
+  del, dfn, em, img, ins, kbd, q, s, samp,
+  small, strike, strong, sub, sup, tt, var,
+  b, u, i, center,
+  dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td,
+  article, aside, canvas, details, embed,
+  figure, figcaption, footer, header, hgroup,
+  menu, nav, output, ruby, section, summary,
+  time, mark, audio, video {
+    @include reset-box-model;
+    @include reset-font;
+  }
+}
+
diff --git a/h/static/styles/reset.scss b/h/static/styles/reset.scss
@@ -1,4 +1,4 @@
-@import 'compass/reset';
+@import './mixins/reset';
 
 /*
   Consistency fixes
@@ -14,7 +14,11 @@ html {
   text-size-adjust: 100%;
 }
 
-body { min-height: 100%; font-size: 100%; }
+body {
+  min-height: 100%;
+  font-size: 100%;
+  margin: 0;
+}
 
 sub, sup {
   font-size: 75%;
@@ -59,6 +63,16 @@ img::-moz-selection {
   background: transparent;
 }
 
+ul, li {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+blockquote {
+  margin: 0;
+}
+
 // Custom elements
 markdown {
   display: block;

diff --git a/h/static/styles/simple-search.scss b/h/static/styles/simple-search.scss
@@ -10,7 +10,7 @@
 }
 
 .simple-search-icon {
-  @include order(0);
+  order: 0;
 }
 
 :not(:focus) ~ .simple-search-icon {

diff --git a/h/static/styles/spinner.scss b/h/static/styles/spinner.scss
@@ -6,15 +6,13 @@
 //   <!-- Three nested spans -->
 //   <span class="spinner"><span><span></span></span></span>
 
-@import 'compass/css3/_animation';
-
 $container-width: 1em;
 $container-height: $container-width;
 $part-width: .1em;
 $part-height: 3 * $part-width;
 
-@include keyframes(spin) {
-  to { @include transform(rotate(1turn)); }
+@keyframes(spin) {
+  to { transform: rotate(1turn); }
 }
 
 .spinner {
@@ -24,7 +22,7 @@ $part-height: 3 * $part-width;
   height: $container-width;
   text-indent: 999em;
   overflow: hidden;
-  @include animation(spin 1.25s infinite steps(12));
+  animation: spin 1.25s infinite steps(12);
 }
 
 .spinner:before,
@@ -41,35 +39,35 @@ $part-height: 3 * $part-width;
   height: $part-height;
   border-radius: 0.1em;
   background: #eee;
-  @include box-shadow(0 ($container-height - $part-height) rgba(0, 0, 0, 0.15));
-  @include transform-origin(50%, $container-height / 2);
+  box-shadow: 0 ($container-height - $part-height) rgba(0, 0, 0, 0.15);
+  transform-origin: 50% $container-height / 2;
 }
 
 .spinner:before {
   background: rgba(0, 0, 0, 0.65);
 }
 
 .spinner:after {
-  @include transform(rotate(-30deg));
+  transform: rotate(-30deg);
   background: rgba(0, 0, 0, 0.6);
 }
 
 .spinner > span:before {
-  @include transform(rotate(-60deg));
+  transform: rotate(-60deg);
   background: rgba(0, 0, 0, 0.5);
 }
 
 .spinner > span:after {
-  @include transform(rotate(-90deg));
+  transform: rotate(-90deg);
   background: rgba(0, 0, 0, 0.4);
 }
 
 .spinner > span > span:before {
-    @include transform(rotate(-120deg));
+    transform: rotate(-120deg);
     background: rgba(0, 0, 0, 0.3);
 }
 
 .spinner > span > span:after {
-    @include transform(rotate(-150deg));
+    transform: rotate(-150deg);
     background: rgba(0, 0, 0, 0.2);
 }