Add a .import.styl handler to prevent Meteor processing a stylus file Fix #462

docs/client/packages/stylus.html

@@ -14,6 +14,11 @@ The `stylus` package also includes `nib` support. Add `@import 'nib'` to
 your `.styl` files to enable cross-browser mixins such as
 `linear-gradient` and `border-radius`.
 
+{{#note}}
+If you want to `@import` a file, give it the extension `.import.styl`
+to prevent Meteor from processing it independently.
+{{/note}}
+
 See <http://visionmedia.github.com/nib> for documentation of the nib extensions of Stylus.
 
 {{/better_markdown}}

packages/less/plugin/compile-less.js

@@ -62,11 +62,11 @@ Plugin.registerSourceHandler("less", function (compileStep) {
   });
 });;
 
-// Register lessimport files with the dependency watcher, without actually
-// processing them.
+// Register import.less files with the dependency watcher, without actually
+// processing them. There is a similar rule in the stylus package.
 Plugin.registerSourceHandler("import.less", function () {
   // Do nothing
 });
 
-// Backward compatibility
+// Backward compatibility with Meteor 0.7
 Plugin.registerSourceHandler("lessimport", function () {});

packages/stylus/package.js

@@ -14,5 +14,9 @@ Package._transitional_registerBuildPlugin({
 Package.on_test(function (api) {
   api.use(['tinytest', 'stylus', 'test-helpers']);
   api.use('spark');
-  api.add_files(['stylus_tests.styl', 'stylus_tests.js'], 'client');
+  api.add_files([
+    'stylus_tests.styl',
+    'stylus_tests.import.styl',
+    'stylus_tests.js'
+  ],'client');
 });

packages/stylus/plugin/compile-stylus.js

@@ -1,6 +1,7 @@
 var fs = Npm.require('fs');
 var stylus = Npm.require('stylus');
 var nib = Npm.require('nib');
+var path = Npm.require('path');
 var Future = Npm.require('fibers/future');
 
 Plugin.registerSourceHandler("styl", function (compileStep) {
@@ -17,6 +18,8 @@ Plugin.registerSourceHandler("styl", function (compileStep) {
   stylus(compileStep.read().toString('utf8'))
     .use(nib())
     .set('filename', compileStep.inputPath)
+    // Include needed to allow relative @imports in stylus files
+    .include(path.dirname(compileStep._fullInputPath))
     .render(f.resolver());
 
   try {
@@ -32,3 +35,10 @@ Plugin.registerSourceHandler("styl", function (compileStep) {
     data: css
   });
 });
+
+// Register import.styl files with the dependency watcher, without actually
+// processing them. There is a similar rule in the less package.
+Plugin.registerSourceHandler("import.styl", function () {
+  // Do nothing
+});
+

packages/stylus/stylus_tests.import.styl

@@ -0,0 +1,5 @@
+// Variable used in stylus_test.styl
+importDashy = dashed
+
+.stylus-overwrite-color
+  font-size: 20px !important

packages/stylus/stylus_tests.js

@@ -1,6 +1,5 @@
 
 Tinytest.add("stylus - presence", function(test) {
-
   var d = OnscreenDiv(Meteor.render(function() {
     return '<p class="stylus-dashy-left-border"></p>'; }));
   d.node().style.display = 'block';
@@ -10,5 +9,17 @@ Tinytest.add("stylus - presence", function(test) {
   test.equal(leftBorder, "dashed");
 
   d.kill();
-
+});
+
+Tinytest.add("stylus - @import", function(test) {
+  var d = OnscreenDiv(Meteor.render(function() {
+    return '<p class="stylus-import-dashy-border stylus-overwrite-color"></p>';
+  }));
+  d.node().style.display = 'block';
+
+  var p = d.node().firstChild;
+  test.equal(getStyleProperty(p, 'font-size'), "20px");
+  test.equal(getStyleProperty(p, 'border-left-style'), "dashed");
+
+  d.kill();
 });

packages/stylus/stylus_tests.styl

@@ -1,3 +1,4 @@
+@import "stylus_tests.import.styl"
 
 #stylus-tests
   zoom: 1
@@ -7,3 +8,9 @@ dashy = dashed
 .stylus-dashy-left-border
   border-left: 1px dashy black
 
+.stylus-overwrite-size
+  // This property is overwritten in stylus_test.import.styl
+  font-size: 10px
+
+.stylus-import-dashy-border
+  border-left: 1px importDashy black

tools/packages.js

@@ -291,8 +291,7 @@ _.extend(Slice.prototype, {
       // - appendDocument({ section: "head", data: "my markup" })
       //   Browser targets only. Add markup to the "head" or "body"
       //   section of the document.
-      // - addStylesheet({ path: "my/stylesheet.css",
-      //                   data: "my css", sourceMap: "{version:3, ...}"})
+      // - addStylesheet({ path: "my/stylesheet.css", data: "my css" })
       //   Browser targets only. Add a stylesheet to the
       //   document. 'path' is a requested URL for the stylesheet that
       //   may or may not ultimately be honored. (Meteor will add
@@ -406,13 +405,10 @@ _.extend(Slice.prototype, {
                             "browser targets");
           if (typeof options.data !== "string")
             throw new Error("'data' option to addStylesheet must be a string");
-          if (typeof options.sourceMap !== "string" && options.sourceMap !== undefined)
-            throw new Error("'sourceMap' option to addStylesheet must be a string");
           resources.push({
             type: "css",
             data: new Buffer(options.data, 'utf8'),
-            servePath: path.join(self.pkg.serveRoot, options.path),
-            sourceMap: options.sourceMap
+            servePath: path.join(self.pkg.serveRoot, options.path)
           });
         },
         addJavaScript: function (options) {