Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Imports component #9

Merged
merged 5 commits into from

2 participants

@kewah

Hi,
I added the ability to import another components stylus file. For instance https://github.com/kewah/component-stylus-plugin/blob/imports-component/test/fixtures/with-import/index.styl

I also added tests.

Let me know if I broke something from your previous version. Without tests it's a bit complicated ;)

One downside with this implementation is, we must be careful to not import files containing CSS properties, otherwise they will be duplicated in the output.

Related to #6

kewah added some commits
@kewah kewah Forgotten var
e9aa079
@kewah kewah `file` var isn't used
058119f
@kewah kewah Ability to import another component's stylus file
Add the component's dependencies (local and online) to `options.paths`.
We are now able to import another stylus file directly inside the component.

```
{
  ...
  "local": [
    "base-styles"
  ],
}
```

```
@import "base-styles/animation-mixin";
```

However, we must be careful not to import files containing CSS properties, otherwise they will be duplicated in the output.

Related to #6
36e11fe
@kewah kewah Dependencies are already imported
910612d
@kewah kewah Add tests
699e278
@rschmukler
Owner

Wow, this is really cool. Thanks for all of your hard work, fantastic pull request.

@rschmukler rschmukler merged commit 98c0c01 into from
@rschmukler
Owner

@kewah could you also add a little bit to the readme describing how to use this, just so people assessing the plugin see it as a feature.

@kewah
@rschmukler
Owner

Great, thanks so much. Cheers! :beers:

@kewah kewah deleted the branch
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Feb 25, 2014
  1. @kewah

    Forgotten var

    kewah authored
  2. @kewah

    `file` var isn't used

    kewah authored
  3. @kewah

    Ability to import another component's stylus file

    kewah authored
    Add the component's dependencies (local and online) to `options.paths`.
    We are now able to import another stylus file directly inside the component.
    
    ```
    {
      ...
      "local": [
        "base-styles"
      ],
    }
    ```
    
    ```
    @import "base-styles/animation-mixin";
    ```
    
    However, we must be careful not to import files containing CSS properties, otherwise they will be duplicated in the output.
    
    Related to #6
  4. @kewah
  5. @kewah

    Add tests

    kewah authored
This page is out of date. Refresh to see the latest.
View
17 lib/stylusPlugin.js
@@ -15,15 +15,15 @@ var stylusPlugin = module.exports = function stylusPlugin(builder) {
if(!stylusFiles.length) return next();
- batch = new Batch();
+ var batch = new Batch();
stylusFiles.forEach(function(styl) {
debug("Compiling File: " + styl);
batch.push(function(done) {
// Load info about the file
var filePath = pkg.path(styl),
- contents = read(filePath, 'utf-8');
- file = path.basename(styl, '.styl') + '.css';
+ contents = read(filePath, 'utf-8'),
+ paths = (pkg.config.paths || []).map(pkg.path, pkg).concat(pkg.globalLookupPaths);
// Set some options
var options = {
@@ -31,18 +31,9 @@ var stylusPlugin = module.exports = function stylusPlugin(builder) {
compress: stylusPlugin.compress,
firebug: stylusPlugin.firebug,
linenos: stylusPlugin.linenos,
- paths: [process.cwd()].concat(stylusPlugin.paths)
+ paths: paths.concat(stylusPlugin.paths)
};
- Object.keys(pkg.config.dependencies).forEach(function (name) {
- var flatname = name.replace('/', '-')
- pkg.globalLookupPaths.forEach(function (gpath) {
- var dir = path.join(gpath, flatname)
- if (!fs.existsSync(dir)) return
- options.paths.push(path.join(pkg.globalLookupPaths[0], flatname));
- })
- });
-
var renderer = stylus(contents, options);
if(stylusPlugin.includeCSS) renderer.set('include css', true);
View
6 package.json
@@ -4,7 +4,7 @@
"description": "Highly customizable Stylus compiler plugin for Component",
"main": "index.js",
"scripts": {
- "test": "mocha"
+ "test": "./node_modules/.bin/mocha --reporter spec"
},
"repository": {
"type": "git",
@@ -20,5 +20,9 @@
"batch": "~0.5.0",
"stylus": "0.x.x",
"debug": "~0.7.2"
+ },
+ "devDependencies": {
+ "mocha": "^1.17.1",
+ "component-builder": "^0.10.0"
}
}
View
50 test/component-stylus.js
@@ -0,0 +1,50 @@
+var assert = require('assert');
+var Builder = require('component-builder');
+var stylus = require('../');
+stylus.linenos = false;
+
+describe('component-stylus', function() {
+ it('should pass-though if there are no Stylus files', function(done) {
+ var builder = new Builder('test/fixtures/no-styl');
+ builder.use(stylus);
+
+ builder.build(function(err, res) {
+ if (err) return done(err);
+ assert.equal(res.css.trim(), 'body {\n color: red;\n}');
+ done();
+ });
+ });
+
+ it('should build Stylus files to css', function(done) {
+ var builder = new Builder('test/fixtures/simple');
+ builder.use(stylus);
+
+ builder.build(function(err, res) {
+ if (err) return done(err);
+ assert.equal(res.css.trim(), 'body {\n color: #f00;\n}\nbody div {\n display: block;\n}');
+ done();
+ });
+ });
+
+ it('should build with imported files', function(done) {
+ var builder = new Builder('test/fixtures/multiple');
+ builder.use(stylus);
+
+ builder.build(function(err, res) {
+ if (err) return done(err);
+ assert.equal(res.css.trim(), '.bar {\n color: #000;\n}\nbody {\n content: "foo";\n color: #f00;\n}\nbody div {\n display: block;\n}');
+ done();
+ });
+ });
+
+ it('should build with imported component files', function(done) {
+ var builder = new Builder('test/fixtures/with-import');
+ builder.use(stylus);
+
+ builder.build(function(err, res) {
+ if (err) return done(err);
+ assert.equal(res.css.trim(), 'body {\n content: "test";\n color: #f00;\n}\nbody div {\n display: block;\n}');
+ done();
+ });
+ });
+});
View
7 test/fixtures/multiple/_imported.styl
@@ -0,0 +1,7 @@
+foo() {
+ content: "foo";
+}
+
+.bar {
+ color: black;
+}
View
6 test/fixtures/multiple/component.json
@@ -0,0 +1,6 @@
+{
+ "name": "multiple",
+ "styles": [
+ "index.styl"
+ ]
+}
View
10 test/fixtures/multiple/index.styl
@@ -0,0 +1,10 @@
+@import "./_imported";
+
+body {
+ foo();
+ color: red;
+
+ div {
+ display: block;
+ }
+}
View
6 test/fixtures/no-styl/component.json
@@ -0,0 +1,6 @@
+{
+ "name": "no-styl",
+ "styles": [
+ "index.css"
+ ]
+}
View
3  test/fixtures/no-styl/index.css
@@ -0,0 +1,3 @@
+body {
+ color: red;
+}
View
6 test/fixtures/simple/component.json
@@ -0,0 +1,6 @@
+{
+ "name": "simple",
+ "styles": [
+ "index.styl"
+ ]
+}
View
7 test/fixtures/simple/index.styl
@@ -0,0 +1,7 @@
+body {
+ color: red;
+
+ div {
+ display: block;
+ }
+}
View
6 test/fixtures/utils/component.json
@@ -0,0 +1,6 @@
+{
+ "name": "utils",
+ "styles": [
+ "index.styl"
+ ]
+}
View
3  test/fixtures/utils/index.styl
@@ -0,0 +1,3 @@
+test() {
+ content: "test";
+}
View
12 test/fixtures/with-import/component.json
@@ -0,0 +1,12 @@
+{
+ "name": "with-import",
+ "paths": [
+ "../"
+ ],
+ "local": [
+ "utils"
+ ],
+ "styles": [
+ "index.styl"
+ ]
+}
View
10 test/fixtures/with-import/index.styl
@@ -0,0 +1,10 @@
+@import "utils/index";
+
+body {
+ test();
+ color: red;
+
+ div {
+ display: block;
+ }
+}
Something went wrong with that request. Please try again.