Merge pull request #322 from algolia/sass-theme

chore(theme): SASS-based themes

example/default.css

@@ -1 +1 @@
-../themes/default.css
+../dist/themes/default.css

package.json

@@ -6,7 +6,7 @@
   "author": "Algolia <support@algolia.com>",
   "scripts": {
     "build": "./scripts/build.sh",
-    "dev": "npm install && webpack-dev-server --config webpack.example.config.js --hot --inline --no-info",
+    "dev": "./scripts/dev.sh",
     "doctoc": "doctoc --maxlevel 3 README.md",
     "gh-pages": "./scripts/gh-pages.sh",
     "lint": "eslint . --quiet --no-color && stylelint './themes/**/*.css'",
@@ -47,6 +47,7 @@
     "mocha-jsdom": "^1.0.0",
     "mversion": "^1.10.1",
     "nd": "^1.2.0",
+    "node-sass": "^3.3.3",
     "npm-shrinkwrap": "^5.4.1",
     "pretty-bytes": "^2.0.1",
     "raw-loader": "^0.5.1",

scripts/build.sh

@@ -2,16 +2,23 @@
 
 set -ev # exit when error
 
+ROOT=`dirname "$0"`/..
+
 mkdir -p dist/themes
 
-license="/*! instantsearch.js ${VERSION:-UNRELEASED} | © Algolia SAS | github.com/algolia/instantsearch.js */"
+license="/*! instantsearch.js ${VERSION:-UNRELEASED} | © Algolia Inc. and other contributors; Licensed MIT | github.com/algolia/instantsearch.js */"
 
 bundle='instantsearch'
 
 webpack
 
-cp themes/default.css dist/themes/default.css
-cleancss dist/themes/default.css > dist/themes/default.min.css
+for source in "$ROOT"/themes/[^_]*.sass; do
+  base=`basename "$source" .sass`
+  echo "$license" > dist/themes/$base.css
+  echo >> dist/themes/$base.css
+  node-sass "$source" >> dist/themes/$base.css
+  cleancss dist/themes/$base.css > dist/themes/$base.min.css
+done
 
 printf "$license" | cat - dist/${bundle}.js > /tmp/out && mv /tmp/out dist/${bundle}.js
 cd dist

scripts/dev.sh

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+
+set -ev # exit when error
+
+npm install
+node-sass -o ./dist/themes/ --watch ./themes &
+webpack-dev-server --config webpack.example.config.js --hot --inline --no-info &
+wait

themes/_base.sass

@@ -0,0 +1,20 @@
+@mixin component($component)
+  .ais-#{$component}
+    @content
+
+@mixin modifier($modifier)
+  &--#{$modifier}
+    @content
+
+@mixin element($element)
+  &__#{$element}
+    @content
+
+@mixin bem($component, $modifier, $element: '')
+  +component($component)
+    +modifier($modifier)
+      @if $element != ''
+        +element($element)
+          @content
+      @else
+        @content

themes/default.sass

@@ -0,0 +1,13 @@
+@import "base"
+
+@import "default/search-box"
+@import "default/stats"
+@import "default/index-selector"
+@import "default/hits"
+@import "default/pagination"
+@import "default/refinement-list"
+@import "default/menu"
+@import "default/toggle"
+@import "default/hierarchical-menu"
+@import "default/range-slider"
+@import "default/price-ranges"

themes/default/_hierarchical-menu.sass

@@ -0,0 +1,14 @@
+@import '../base'
+@import 'variables'
+
++component(hierarchical-menu)
+  +modifier(header)
+  +modifier(body)
+  +modifier(list)
+    +element(lvl0)
+    +element(lvl1)
+  +modifier(item)
+    +element(active)
+  +modifier(link)
+  +modifier(count)
+  +modifier(footer)

themes/default/_hits.sass

@@ -0,0 +1,6 @@
+@import '../base'
+@import 'variables'
+
++component(hits)
+  +element(empty)
+  +modifier(item)

themes/default/_index-selector.sass

@@ -0,0 +1,5 @@
+@import '../base'
+@import 'variables'
+
++component(index-selector)
+  +modifier(item)

themes/default/_menu.sass

@@ -0,0 +1,12 @@
+@import '../base'
+@import 'variables'
+
++component(menu)
+  +modifier(header)
+  +modifier(body)
+  +modifier(list)
+  +modifier(item)
+    +element(active)
+  +modifier(link)
+  +modifier(count)
+  +modifier(footer)