From cf11139f6cb80ee5b60de45e7f1d29ebae651ebc Mon Sep 17 00:00:00 2001 From: Maxime Quandalle Date: Sat, 1 Feb 2014 02:32:48 +0100 Subject: [PATCH] Add a `.import.styl` handler to prevent Meteor processing a stylus file Fix #462 --- docs/client/packages/stylus.html | 5 +++++ packages/less/plugin/compile-less.js | 6 +++--- packages/stylus/package.js | 6 +++++- packages/stylus/plugin/compile-stylus.js | 10 ++++++++++ packages/stylus/stylus_tests.import.styl | 5 +++++ packages/stylus/stylus_tests.js | 15 +++++++++++++-- packages/stylus/stylus_tests.styl | 7 +++++++ tools/packages.js | 8 ++------ 8 files changed, 50 insertions(+), 12 deletions(-) create mode 100644 packages/stylus/stylus_tests.import.styl 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) {