Skip to content

Commit

Permalink
fix: document postcss-import usage
Browse files Browse the repository at this point in the history
  • Loading branch information
stipsan committed Nov 19, 2020
1 parent fdbc18f commit 8fe2451
Showing 1 changed file with 37 additions and 19 deletions.
56 changes: 37 additions & 19 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ PostCSS [Eik](https://eik.dev/) plugin to support the use of import maps to map

**Notes:**

- **This plugin should probably be used as the first plugin of your list.
Especially before the [postcss-import](https://github.com/postcss/postcss-import) plugin**.
- **This plugin should probably be used as the first plugin of your list.**
- **If you use `postcss-import` please [read this.](#postcss-import-usage)**

## Installation

Expand All @@ -26,22 +26,23 @@ var css = fs.readFileSync('css/input.css', 'utf8');

// process css
postcss()
.use(
eikImportMapPlugin({
imports: {
'normalize.css': 'https://unpkg.com/normalize.css@8/normalize.css',
},
.use(
eikImportMapPlugin({
imports: {
'normalize.css':
'https://unpkg.com/normalize.css@8/normalize.css',
},
})
)
.process(css, {
// `from` option is needed here
from: 'css/input.css',
})
)
.process(css, {
// `from` option is needed here
from: 'css/input.css',
})
.then(function (result) {
var output = result.css;

console.log(output);
});
.then(function (result) {
var output = result.css;

console.log(output);
});
```

`css/input.css`:
Expand All @@ -50,7 +51,7 @@ postcss()
@import 'normalize.css';

body {
background: black;
background: black;
}
```

Expand All @@ -60,10 +61,27 @@ will give you:
@import 'https://unpkg.com/normalize.css@8/normalize.css';

body {
background: black;
background: black;
}
```

## PostCSS Import Usage

If you're using [postcss-import](https://github.com/postcss/postcss-import) make sure you update the `plugins` option.
`postcss.config.js`

```js
module.exports = (ctx) => ({
plugins: [
require('@eik/postcss-import-map')(),
require('postcss-import')({
// It needs to be added here as well to ensure everything is mapped
plugins: [require('@eik/postcss-import-map')],
}),
],
});
```

## Options

This plugin takes an [import map](https://github.com/WICG/import-maps) as options:
Expand Down

0 comments on commit 8fe2451

Please sign in to comment.