Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Update `@import` doc #10

Merged
merged 2 commits into from

2 participants

@kewah

No description provided.

kewah added some commits
@kewah kewah Update `@import` doc 8593207
@kewah kewah Improve test for imported component
Test mixin, placeholder selector, variable, function
5c9ed39
@rschmukler rschmukler merged commit 4ec0e2b into rschmukler:master
@rschmukler
Owner

Thanks!

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

    Update `@import` doc

    kewah authored
  2. @kewah

    Improve test for imported component

    kewah authored
    Test mixin, placeholder selector, variable, function
This page is out of date. Refresh to see the latest.
View
26 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.
View
2  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();
});
});
View
5 test/fixtures/utils/component.json
@@ -1,6 +1,9 @@
{
"name": "utils",
"styles": [
- "index.styl"
+ "mixin.styl",
+ "variable.styl",
+ "placeholder.styl",
+ "function.styl"
]
}
View
3  test/fixtures/utils/function.styl
@@ -0,0 +1,3 @@
+add(a, b) {
+ a + b;
+}
View
3  test/fixtures/utils/index.styl
@@ -1,3 +0,0 @@
-test() {
- content: "test";
-}
View
3  test/fixtures/utils/mixin.styl
@@ -0,0 +1,3 @@
+mixin() {
+ content: "mixin";
+}
View
3  test/fixtures/utils/placeholder.styl
@@ -0,0 +1,3 @@
+$foo {
+ content: "foo";
+}
View
1  test/fixtures/utils/variable.styl
@@ -0,0 +1 @@
+font-size = 14px;
View
18 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;
}
Something went wrong with that request. Please try again.