Skip to content

Commit

Permalink
docs: addDependency (#448)
Browse files Browse the repository at this point in the history
  • Loading branch information
cap-Bernardito committed Aug 17, 2020
1 parent 68699f6 commit 60e4f12
Show file tree
Hide file tree
Showing 4 changed files with 102 additions and 8 deletions.
94 changes: 94 additions & 0 deletions README.md
Expand Up @@ -861,6 +861,100 @@ module.exports = {
};
```

### `Add dependencies`

There are two way to add dependencies:

1. (Recommended). Postcss plugin should emit message in `result.messages`.

The message should contain the following fields:

- `type` = `dependency` - Message type (require, should be equal `dependency`)
- `file` - absolute file path (require)

**`webpack.config.js`**

```js
const path = require('path');

const customPlugin = () => (css, result) => {
result.messages.push({
type: 'dependency',
file: path.resolve(__dirname, 'path', 'to', 'file'),
});
};

const postcssPlugin = postcss.plugin('postcss-assets', customPlugin);

module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [postcssPlugin()],
},
},
],
},
],
},
};
```

2. Pass `loaderContext` in plugin.

**`webpack.config.js`**

```js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
config: 'path/to/postcss.config.js',
},
},
],
},
],
},
};
```

**`postcss.config.js`**

```js
module.exports = (loaderContext) => ({
plugins: [require('path/to/customPlugin')(loaderContext)],
});
```

**`customPlugin.js`**

```js
const path = require('path');

const customPlugin = (loaderContext) => (css, result) => {
loaderContext.webpack.addDependency(
path.resolve(__dirname, 'path', 'to', 'file')
);
};

module.exports = postcss.plugin('postcss-assets', customPlugin);
```

<h2 align="center">Maintainers</h2>

<table>
Expand Down
11 changes: 5 additions & 6 deletions test/fixtures/config/context/plugin.js
@@ -1,9 +1,6 @@
'use strict'
const postcss = require('postcss');

const postcss = require('postcss')

// This plugin creates asset file in webpack compilation
module.exports = postcss.plugin('plugin', (ctx) => {
const customPlugin = (ctx) => (css, result) => {
ctx.webpack._compilation.assets['asset.txt'] = {
source () {
return '123'
Expand All @@ -12,4 +9,6 @@ module.exports = postcss.plugin('plugin', (ctx) => {
return 0
}
}
})
};

module.exports = postcss.plugin('plugin', customPlugin);
2 changes: 2 additions & 0 deletions test/options/__snapshots__/config.test.js.snap
Expand Up @@ -99,6 +99,8 @@ exports[`Config Options should work Config - true: errors 1`] = `Array []`;

exports[`Config Options should work Config - true: warnings 1`] = `Array []`;

exports[`Config Options should work Config – Context – Loader {Object}: errors 1`] = `Array []`;

exports[`Config Options should work Config – Context – Loader {Object}: warnings 1`] = `Array []`;

exports[`Config Options should work package.json - {Object} - Process CSS: css 1`] = `
Expand Down
3 changes: 1 addition & 2 deletions test/options/config.test.js
Expand Up @@ -145,8 +145,7 @@ describe('Config Options', () => {

expect(asset in assets).toBeTruthy();
expect(getWarnings(stats)).toMatchSnapshot('warnings');
// Todo fixed error in testplugin
// expect(getErrors(stats)).toMatchSnapshot('errors');
expect(getErrors(stats)).toMatchSnapshot('errors');
});

it('should work postcss.config.js - {Object} - Process CSS', async () => {
Expand Down

0 comments on commit 60e4f12

Please sign in to comment.