Add includePaths support for easier Sass usage

[pdehaan]

We're trying to use this module w/ Sass and it'd be nice if there was includePaths support.

See node-normalize-scss, node-bourbon, and node-neat.

This way we could do something like @import "css/tabzilla"; instead of @import "../../../node_modules/mozilla-tabzilla/css/tabzilla";.

Although we'd still need to do some build step trickery to convert "css/tabzilla.css" to "css/_tabzilla.scss" to make it easier to use w/ Sass.

---

For reference, here's my current _vendor.scss file:

@import 'normalize';
@import '../../../../node_modules/mozilla-tabzilla/css/tabzilla';

... where I need to have a build script to rename /css/tabzilla.css to /css/_tabzilla.scss.

gulp.task('tabzilla-sass', function () {
  gulp.src('../../../../node_modules/mozilla-tabzilla/css/tabzilla.css')
    .pipe(rename('_tabzilla.scss'))
    .pipe(gulp.dest('../../../../node_modules/mozilla-tabzilla/css/'));
});

[pdehaan]

In fact, not sure if it'd be beneficial to convert the CSS to Sass and then compile to CSS during an npm pre-publish script (since we're already using Gulp).

[pdehaan]

I have a crude port of a Sass version of Tabzilla at https://github.com/pdehaan/tabzilla/tree/sass if anybody is interested.

---

package.json:

{
  "name": "tabzilla-sass",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
  },
  "devDependencies": {
    "gulp": "3.9.0",
    "gulp-sass": "2.0.4",
    "mozilla-tabzilla": "pdehaan/tabzilla#sass"
  }
}

gulpfile.js:

var gulp = require('gulp');
var sass = require('gulp-sass');
var tabzilla = require('mozilla-tabzilla');

gulp.task('sass', function () {
  gulp.src('*.scss')
    .pipe(sass({
      includePaths: [tabzilla.includePaths]
    }))
    .pipe(gulp.dest('css'));
});

main.scss:

@import "tabzilla";

---

css/main.css (generated via $ gulp sass):

#tabzilla {
  float: right;
  position: relative; }

#tabzilla a {
  background-image: url("../media/img/tabzilla-static.png");
  background-repeat: no-repeat;
  display: block;
  height: 37px;
  overflow: hidden;
  position: relative;
  text-indent: 120%;
  white-space: nowrap;
  width: 147px;
  z-index: 2; }

@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
    only screen and (min--moz-device-pixel-ratio: 1.3),
    only screen and (-o-min-device-pixel-ratio: 1.3/1),
    only screen and (min-resolution: 125dpi),
    only screen and (min-resolution: 1.3dppx) {
  #tabzilla a {
    background-image: url("../media/img/tabzilla-static-high-res.png");
    background-size: 147px 37px; } }

#tabzilla:before {
  background-color: transparent;
  content: '';
  display: block;
  height: 26px;
  left: 28px;
  position: absolute;
  top: 0;
  width: 88px;
  z-index: 1; }

html[dir="rtl"] #tabzilla {
  float: left; }

[schalkneethling]

@pdehaan I reckon we can merge this with the main repo. From what I can see, we need to add the sass folder with it's contents, then we need to alter the build step so that it builds tabzilla.css from less and then also builds _tabzilla.scss from sass

In the end the distributions will simply now also include the .scss version that users can use, or ignore. Is there anything else that would need to be done? I would be more than happy to accept a PR :) Thanks!

[pdehaan]

@schalkneethling We could even generate the .css from Sass and get rid of LESS completely (since having 2 CSS preprocessors may be 1 too many).

Another option may be to use something like gulp-base64 to inline the 2 images into the final CSS/Sass files to remove the need to manage the /media assets.

[alexgibson]

Tabzilla is deprecated, closing this as wontfix.