Skip to content

Commit

Permalink
Improve & correct Usage notes
Browse files Browse the repository at this point in the history
  • Loading branch information
RyanZim committed Jun 10, 2017
1 parent c36b66e commit 99fd0f8
Showing 1 changed file with 13 additions and 13 deletions.
26 changes: 13 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,9 @@ $ npm install postcss-import

## Usage

If your stylesheets are not in the same place where you run postcss
Unless your stylesheet is in the same place where you run postcss
(`process.cwd()`), you will need to use `from` option to make relative imports
work from input dirname.
work.

```js
// dependencies
Expand All @@ -61,7 +61,7 @@ var css = fs.readFileSync("css/input.css", "utf8")
postcss()
.use(atImport())
.process(css, {
// `from` option is required so relative import can work from input dirname
// `from` option is needed here
from: "css/input.css"
})
.then(function (result) {
Expand All @@ -71,16 +71,16 @@ postcss()
})
```

Using this `input.css`:
`css/input.css`:

```css
/* can consume `node_modules`, `web_modules` or local modules */
@import "cssrecipes-defaults"; /* == @import "./node_modules/cssrecipes-defaults/index.css"; */
@import "normalize.css"; /* == @import "./node_modules/normalize.css/normalize.css"; */
@import "cssrecipes-defaults"; /* == @import "../node_modules/cssrecipes-defaults/index.css"; */
@import "normalize.css"; /* == @import "../node_modules/normalize.css/normalize.css"; */

@import "css/foo.css"; /* relative to stylesheets/ according to `from` option above */
@import "foo.css"; /* relative to css/ according to `from` option above */

@import "css/bar.css" (min-width: 25em);
@import "bar.css" (min-width: 25em);

body {
background: black;
Expand All @@ -90,21 +90,21 @@ body {
will give you:

```css
/* ... content of ./node_modules/cssrecipes-defaults/index.css */
/* ... content of ./node_modules/normalize.css/normalize.css */
/* ... content of ../node_modules/cssrecipes-defaults/index.css */
/* ... content of ../node_modules/normalize.css/normalize.css */

/* ... content of foo.css */
/* ... content of css/foo.css */

@media (min-width: 25em) {
/* ... content of bar.css */
/* ... content of css/bar.css */
}

body {
background: black;
}
```

Checkout [tests](test) for more examples.
Checkout the [tests](test) for more examples.

### Options

Expand Down

0 comments on commit 99fd0f8

Please sign in to comment.