diff --git a/docs/client/packages/stylus.html b/docs/client/packages/stylus.html
index 7d3a217028..2752de11a9 100644
--- a/docs/client/packages/stylus.html
+++ b/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 for documentation of the nib extensions of Stylus.
{{/better_markdown}}
diff --git a/packages/less/plugin/compile-less.js b/packages/less/plugin/compile-less.js
index efae3df8b9..81cf3e907d 100644
--- a/packages/less/plugin/compile-less.js
+++ b/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 () {});
diff --git a/packages/stylus/package.js b/packages/stylus/package.js
index 544946825b..85f04f6552 100644
--- a/packages/stylus/package.js
+++ b/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');
});
diff --git a/packages/stylus/plugin/compile-stylus.js b/packages/stylus/plugin/compile-stylus.js
index 7ddc33dcf5..7e3c7372e5 100644
--- a/packages/stylus/plugin/compile-stylus.js
+++ b/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
+});
+
diff --git a/packages/stylus/stylus_tests.import.styl b/packages/stylus/stylus_tests.import.styl
new file mode 100644
index 0000000000..d5e4779860
--- /dev/null
+++ b/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
diff --git a/packages/stylus/stylus_tests.js b/packages/stylus/stylus_tests.js
index 0fddbd3420..af8d924a04 100644
--- a/packages/stylus/stylus_tests.js
+++ b/packages/stylus/stylus_tests.js
@@ -1,6 +1,5 @@
Tinytest.add("stylus - presence", function(test) {
-
var d = OnscreenDiv(Meteor.render(function() {
return ''; }));
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 '';
+ }));
+ 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();
});
diff --git a/packages/stylus/stylus_tests.styl b/packages/stylus/stylus_tests.styl
index feedadbdf2..46687d5ae2 100644
--- a/packages/stylus/stylus_tests.styl
+++ b/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
diff --git a/tools/packages.js b/tools/packages.js
index 808ac86141..e6d9ce239d 100644
--- a/tools/packages.js
+++ b/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) {