Ability to pass dependency when styles are being processed

[gavinmcfarland]

Proposal

Allow dependencies to be set, so the styles being processed have access to things like global variables, class names, mixins etc.

Use Case

I’m using VuePress with PostCSS which uses postcss-loader. I want to avoid having to @import the same file in each of my components when using libraries like TailwindCSS. I've had the same use case with other frameworks. I can't find the documentation but I've heard this being known as a dependency inside a webpack loader.

Implementation

• I'm open to work on this
• I need help/mentorship
• I'm unable to work on this

[alexander-akait]

@limitlessloop can you provide minimum reproducible test repo to ensure all logic will implement?

[gavinmcfarland]

Yeah I'll try my best. I'll put one together now.

[gavinmcfarland]

@evilebottnawi I've uploaded an example the best I can at https://github.com/limitlessloop/vuepress-postcss-example

VuePress has a config file /site/.vuepress/config.js where you can specify information for different loaders. I believe there are two ways to specify preprocessors, I've tried to show any documentation I know of that describes this in the readme of the repo. I'm using just the simpler method currently.

// config.js
module.exports = {
	postcss: {
		plugins: [
			require('postcss-import'),
			require('postcss-extend-rule')
		]
	}
}

[alexander-akait]

There are two way to add dependencies:

1. postcss plugin should emit message https://github.com/webpack-contrib/postcss-loader/blob/master/src/index.js#L193:

result.messages.push({ type: 'dependency', file: '/path/to/file.ext' })

2. use this.webpack inside config (it is loader context) and pass this.webpack.addDependency as function to plugin

require('postcss-plugin')({ addDependecy: this.webpack.addDependency });

In both cases you need to do some work on a plugin side

[alexander-akait]

We should document it