Merge pull request #10 from kewah/doc

Update `@import` doc

README.md

@@ -47,6 +47,32 @@ variable definitions. You must provide a full path to the files.
     stylusPlugin.imports = [__dirname + '/../globals/variableDefinitions.styl',
                             __dirname + '/../globals/customMixins.styl']
 
+If you don't want to have to define imported files in the `stylusPlugin.imports` option, it is possible to import stylus file from a component using `@import "componentName/fileName"`
+
+For instance:
+```
+{
+  ...
+  "local": [
+    "base-styles"
+  ],
+}
+```
+
+```
+@import "base-styles/animation-mixin";
+
+.foo {
+  animation();
+  position: relative;
+}
+```
+
+There is an example in the [tests](https://github.com/rschmukler/component-stylus-plugin/tree/master/test/fixtures/with-import).
+
+**However, you must be careful to not import files containing CSS properties, otherwise they will be duplicated in the output.**
+Only import files containing variables, placeholder selectors, functions or mixins.
+
 ### Include CSS (default false)
 
 Allow `@import` statements to load up regular CSS.

test/component-stylus.js

@@ -43,7 +43,7 @@ describe('component-stylus', function() {
 
     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}');
+      assert.equal(res.css.trim(), '.bar,\n#barz {\n  content: "foo";\n}\n.bar {\n  content: "mixin";\n  font-size: 24px;\n}');
       done();
     });
   });

test/fixtures/utils/component.json

@@ -1,6 +1,9 @@
 {
   "name": "utils",
   "styles": [
-    "index.styl"
+    "mixin.styl",
+    "variable.styl",
+    "placeholder.styl",
+    "function.styl"
   ]
 }

test/fixtures/utils/function.styl

@@ -0,0 +1,3 @@
+add(a, b) {
+  a + b;
+}

test/fixtures/utils/mixin.styl

@@ -0,0 +1,3 @@
+mixin() {
+  content: "mixin";
+}

test/fixtures/utils/placeholder.styl

@@ -0,0 +1,3 @@
+$foo {
+  content: "foo";
+}

test/fixtures/utils/variable.styl

@@ -0,0 +1 @@
+font-size = 14px;

test/fixtures/with-import/index.styl

@@ -1,10 +1,14 @@
-@import "utils/index";
+@import "utils/mixin";
+@import "utils/placeholder";
+@import "utils/function";
+@import "utils/variable";
 
-body {
-  test();
-  color: red;
+.bar {
+  @extend $foo;
+  mixin();
+  font-size: add(font-size, 10);
+}
 
-  div {
-    display: block;
-  }
+#barz {
+  @extend $foo;
 }