{"_id":"@drftgyhuji7npm/accusamus-hic-quasi","name":"@drftgyhuji7npm/accusamus-hic-quasi","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@drftgyhuji7npm/accusamus-hic-quasi","version":"1.0.0","description":"
\"PostCSS \"PostCSS \n \"PostCSS\n \n \n \n
\n \n \"Sponsored\n \n
\n
\n\n[![npm][npm]][npm-url]\n[![node][node]][node-url]\n[![tests][tests]][tests-url]\n[![coverage][cover]][cover-url]\n[![size][size]][size-url]\n\nWebpack discussion: [![discussion][discussion]][discussion-url]\n\nPostCSS chat: [![chat-postcss][chat-postcss]][chat-postcss-url]\n\n# @drftgyhuji7npm/accusamus-hic-quasi\n\nLoader to process CSS with [`PostCSS`](https://github.com/postcss/postcss).\n\n## Getting Started\n\nYou need webpack v5 to use the latest version. For Webpack v4, you have to install @drftgyhuji7npm/accusamus-hic-quasi v4.\n\nTo begin, you'll need to install `@drftgyhuji7npm/accusamus-hic-quasi` and `postcss`:\n\n```console\nnpm install --save-dev @drftgyhuji7npm/accusamus-hic-quasi postcss\n```\n\nor\n\n```console\nyarn add -D @drftgyhuji7npm/accusamus-hic-quasi postcss\n```\n\nor\n\n```console\npnpm add -D @drftgyhuji7npm/accusamus-hic-quasi postcss\n```\n\nThen add the plugin to your `webpack` config. For example:\n\n> In the following configuration the plugin [`postcss-preset-env`](https://github.com/csstools/postcss-preset-env) is used, which is not installed by default.\n\n**file.js**\n\n```js\nimport css from \"file.css\";\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n \"style-loader\",\n \"css-loader\",\n {\n loader: \"@drftgyhuji7npm/accusamus-hic-quasi\",\n options: {\n postcssOptions: {\n plugins: [\n [\n \"postcss-preset-env\",\n {\n // Options\n },\n ],\n ],\n },\n },\n },\n ],\n },\n ],\n },\n};\n```\n\nAlternative use with [config files](#config):\n\n**postcss.config.js**\n\n```js\nmodule.exports = {\n plugins: [\n [\n \"postcss-preset-env\",\n {\n // Options\n },\n ],\n ],\n};\n```\n\nThe loader **automatically** searches for configuration files.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\"style-loader\", \"css-loader\", \"@drftgyhuji7npm/accusamus-hic-quasi\"],\n },\n ],\n },\n};\n```\n\nAnd run `webpack` via your preferred method.\n\n## Options\n\n- [`execute`](#execute)\n- [`postcssOptions`](#postcssOptions)\n- [`sourceMap`](#sourcemap)\n- [`implementation`](#implementation)\n\n### `execute`\n\nType:\n\n```ts\ntype execute = boolean;\n```\n\nDefault: `undefined`\n\nEnable PostCSS Parser support in `CSS-in-JS`.\nIf you use JS styles the [`postcss-js`](https://github.com/postcss/postcss-js) parser, add the `execute` option.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.style.js$/,\n use: [\n \"style-loader\",\n {\n loader: \"css-loader\",\n },\n {\n loader: \"@drftgyhuji7npm/accusamus-hic-quasi\",\n options: {\n postcssOptions: {\n parser: \"postcss-js\",\n },\n execute: true,\n },\n },\n ],\n },\n ],\n },\n};\n```\n\n### `postcssOptions`\n\nSee the file [`./src/config.d.ts`](./src/config.d.ts).\n\nType:\n\n```ts\nimport type { Config as PostCSSConfig } from \"postcss-load-config\";\nimport type { LoaderContext } from \"webpack\";\n\ntype PostCSSLoaderContext = LoaderContext;\n\ninterface PostCSSLoaderAPI {\n mode: PostCSSLoaderContext[\"mode\"];\n file: PostCSSLoaderContext[\"resourcePath\"];\n webpackLoaderContext: PostCSSLoaderContext;\n env: PostCSSLoaderContext[\"mode\"];\n options: PostCSSConfig;\n}\n\nexport type PostCSSLoaderOptions =\n | PostCSSConfig\n | ((api: PostCSSLoaderAPI) => PostCSSConfig);\n```\n\nDefault: `undefined`\n\nAllows to set [`PostCSS options`](https://postcss.org/api/#processoptions) and plugins.\n\nAll `PostCSS` options are supported.\nThere is the special `config` option for config files. How it works and how it can be configured is described below.\n\nWe recommend do not specify `from`, `to` and `map` options, because this can lead to wrong path in source maps.\nIf you need source maps please use the [`sourcemap`](#sourcemap) option.\n\nFor large projects, to optimize performance of the loader, it is better to provide `postcssOptions` in loader\nconfig and specify `config: false`. This approach removes the need to lookup and load external config files multiple\ntimes during compilation.\n\n#### `object`\n\nSetup `plugins`:\n\n**webpack.config.js** (**recommended**)\n\n```js\nconst myOtherPostcssPlugin = require(\"postcss-my-plugin\");\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.sss$/i,\n loader: \"@drftgyhuji7npm/accusamus-hic-quasi\",\n options: {\n postcssOptions: {\n plugins: [\n \"postcss-import\",\n [\"postcss-short\", { prefix: \"x\" }],\n require.resolve(\"my-postcss-plugin\"),\n myOtherPostcssPlugin({ myOption: true }),\n // Deprecated and will be removed in the next major release\n { \"postcss-nested\": { preserveEmpty: true } },\n ],\n },\n },\n },\n ],\n },\n};\n```\n\n**webpack.config.js** (**deprecated**, will be removed in the next major release)\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.sss$/i,\n loader: \"@drftgyhuji7npm/accusamus-hic-quasi\",\n options: {\n postcssOptions: {\n plugins: {\n \"postcss-import\": {},\n \"postcss-short\": { prefix: \"x\" },\n },\n },\n },\n },\n ],\n },\n};\n```\n\nSetup `syntax`:\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.sss$/i,\n loader: \"@drftgyhuji7npm/accusamus-hic-quasi\",\n options: {\n postcssOptions: {\n // Can be `string`\n syntax: \"sugarss\",\n // Can be `object`\n syntax: require(\"sugarss\"),\n },\n },\n },\n ],\n },\n};\n```\n\nSetup `parser`:\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.sss$/i,\n loader: \"@drftgyhuji7npm/accusamus-hic-quasi\",\n options: {\n postcssOptions: {\n // Can be `string`\n parser: \"sugarss\",\n // Can be `object`\n parser: require(\"sugarss\"),\n // Can be `function`\n parser: require(\"sugarss\").parse,\n },\n },\n },\n ],\n },\n};\n```\n\nSetup `stringifier`:\n\n**webpack.config.js**\n\n```js\nconst Midas = require(\"midas\");\nconst midas = new Midas();\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.sss$/i,\n loader: \"@drftgyhuji7npm/accusamus-hic-quasi\",\n options: {\n postcssOptions: {\n // Can be `string`\n stringifier: \"sugarss\",\n // Can be `object`\n stringifier: require(\"sugarss\"),\n // Can be `function`\n stringifier: midas.stringifier,\n },\n },\n },\n ],\n },\n};\n```\n\n#### `function`\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.(css|sss)$/i,\n loader: \"@drftgyhuji7npm/accusamus-hic-quasi\",\n options: {\n postcssOptions: (loaderContext) => {\n if (/\\.sss$/.test(loaderContext.resourcePath)) {\n return {\n parser: \"sugarss\",\n plugins: [\n [\"postcss-short\", { prefix: \"x\" }],\n \"postcss-preset-env\",\n ],\n };\n }\n\n return {\n plugins: [\n [\"postcss-short\", { prefix: \"x\" }],\n \"postcss-preset-env\",\n ],\n };\n },\n },\n },\n ],\n },\n};\n```\n\n#### `config`\n\nType:\n\n```ts\ntype config = boolean | string;\n```\n\nDefault: `true`\n\nAllows to set options using config files.\nOptions specified in the config file are combined with options passed to the loader, the loader options overwrite options from config.\n\n##### Config Files\n\nThe loader will search up the directory tree for configuration in the following places:\n\n- a `postcss` property in `package.json`\n- a `.postcssrc` file in JSON or YAML format\n- a `.postcssrc.json`, `.postcssrc.yaml`, `.postcssrc.yml`, `.postcssrc.js`, or `.postcssrc.cjs` file\n- a `postcss.config.js` or `postcss.config.cjs` CommonJS module exporting an object (**recommended**)\n\n##### Examples of Config Files\n\nUsing `object` notation:\n\n**postcss.config.js** (**recommend**)\n\n```js\nmodule.exports = {\n // You can specify any options from https://postcss.org/api/#processoptions here\n // parser: 'sugarss',\n plugins: [\n // Plugins for PostCSS\n [\"postcss-short\", { prefix: \"x\" }],\n \"postcss-preset-env\",\n ],\n};\n```\n\nUsing `function` notation:\n\n**postcss.config.js** (**recommend**)\n\n```js\nmodule.exports = (api) => {\n // `api.file` - path to the file\n // `api.mode` - `mode` value of webpack, please read https://webpack.js.org/configuration/mode/\n // `api.webpackLoaderContext` - loader context for complex use cases\n // `api.env` - alias `api.mode` for compatibility with `postcss-cli`\n // `api.options` - the `postcssOptions` options\n\n if (/\\.sss$/.test(api.file)) {\n return {\n // You can specify any options from https://postcss.org/api/#processoptions here\n parser: \"sugarss\",\n plugins: [\n // Plugins for PostCSS\n [\"postcss-short\", { prefix: \"x\" }],\n \"postcss-preset-env\",\n ],\n };\n }\n\n return {\n // You can specify any options from https://postcss.org/api/#processoptions here\n plugins: [\n // Plugins for PostCSS\n [\"postcss-short\", { prefix: \"x\" }],\n \"postcss-preset-env\",\n ],\n };\n};\n```\n\n**postcss.config.js** (**deprecated**, will be removed in the next major release)\n\n```js\nmodule.exports = {\n // You can specify any options from https://postcss.org/api/#processoptions here\n // parser: 'sugarss',\n plugins: {\n // Plugins for PostCSS\n \"postcss-short\": { prefix: \"x\" },\n \"postcss-preset-env\": {},\n },\n};\n```\n\n##### Config Cascade\n\nYou can use different `postcss.config.js` files in different directories.\nConfig lookup starts from `path.dirname(file)` and walks the file tree upwards until a config file is found.\n\n```\n|– components\n| |– component\n| | |– index.js\n| | |– index.png\n| | |– style.css (1)\n| | |– postcss.config.js (1)\n| |– component\n| | |– index.js\n| | |– image.png\n| | |– style.css (2)\n|\n|– postcss.config.js (1 && 2 (recommended))\n|– webpack.config.js\n|\n|– package.json\n```\n\nAfter setting up your `postcss.config.js`, add `@drftgyhuji7npm/accusamus-hic-quasi` to your `webpack.config.js`.\nYou can use it standalone or in conjunction with `css-loader` (recommended).\n\nUse it **before** `css-loader` and `style-loader`, but **after** other preprocessor loaders like e.g `sass|less|stylus-loader`, if you use any (since [webpack loaders evaluate right to left/bottom to top](https://webpack.js.org/concepts/loaders/#configuration)).\n\n**webpack.config.js** (**recommended**)\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/,\n use: [\n \"style-loader\",\n {\n loader: \"css-loader\",\n options: {\n importLoaders: 1,\n },\n },\n \"@drftgyhuji7npm/accusamus-hic-quasi\",\n ],\n },\n ],\n },\n};\n```\n\n#### `boolean`\n\nEnables/Disables autoloading config.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n loader: \"@drftgyhuji7npm/accusamus-hic-quasi\",\n options: {\n postcssOptions: {\n config: false,\n },\n },\n },\n ],\n },\n};\n```\n\n#### String\n\nAllows to specify the path to the config file.\n\n**webpack.config.js**\n\n```js\nconst path = require(\"path\");\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n loader: \"@drftgyhuji7npm/accusamus-hic-quasi\",\n options: {\n postcssOptions: {\n config: path.resolve(__dirname, \"custom.config.js\"),\n },\n },\n },\n ],\n },\n};\n```\n\n### `sourceMap`\n\nType:\n\n```ts\ntype sourceMap = boolean;\n```\n\nDefault: depends on the `compiler.devtool` value\n\nBy default generation of source maps depends on the [`devtool`](https://webpack.js.org/configuration/devtool/) option.\nAll values enable source map generation except `eval` and `false` value.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n { loader: \"style-loader\" },\n { loader: \"css-loader\", options: { sourceMap: true } },\n { loader: \"@drftgyhuji7npm/accusamus-hic-quasi\", options: { sourceMap: true } },\n { loader: \"sass-loader\", options: { sourceMap: true } },\n ],\n },\n ],\n },\n};\n```\n\nAlternative setup:\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n devtool: \"source-map\",\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n { loader: \"style-loader\" },\n { loader: \"css-loader\" },\n { loader: \"@drftgyhuji7npm/accusamus-hic-quasi\" },\n { loader: \"sass-loader\" },\n ],\n },\n ],\n },\n};\n```\n\n### `implementation`\n\nType:\n\n```ts\ntype implementation = object;\n```\n\ntype of `implementation` should be the same as [postcss.d.ts](https://github.com/postcss/postcss/blob/main/lib/postcss.d.ts)\n\nDefault: `postcss`\n\nThe special `implementation` option determines which implementation of PostCSS to use. Overrides the locally installed `peerDependency` version of `postcss`.\n\n**This option is only really useful for downstream tooling authors to ease the PostCSS 7-to-8 transition.**\n\n#### `function`\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n { loader: \"style-loader\" },\n { loader: \"css-loader\" },\n {\n loader: \"@drftgyhuji7npm/accusamus-hic-quasi\",\n options: { implementation: require(\"postcss\") },\n },\n { loader: \"sass-loader\" },\n ],\n },\n ],\n },\n};\n```\n\n#### String\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n { loader: \"style-loader\" },\n { loader: \"css-loader\" },\n {\n loader: \"@drftgyhuji7npm/accusamus-hic-quasi\",\n options: { implementation: require.resolve(\"postcss\") },\n },\n { loader: \"sass-loader\" },\n ],\n },\n ],\n },\n};\n```\n\n## Examples\n\n### SugarSS\n\nYou'll need to install `sugarss`:\n\n```console\nnpm install --save-dev sugarss\n```\n\nUsing [`SugarSS`](https://github.com/postcss/sugarss) syntax.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.sss$/i,\n use: [\n \"style-loader\",\n {\n loader: \"css-loader\",\n options: { importLoaders: 1 },\n },\n {\n loader: \"@drftgyhuji7npm/accusamus-hic-quasi\",\n options: {\n postcssOptions: {\n parser: \"sugarss\",\n },\n },\n },\n ],\n },\n ],\n },\n};\n```\n\n### Autoprefixer\n\nYou'll need to install `autoprefixer`:\n\n```console\nnpm install --save-dev autoprefixer\n```\n\nAdd vendor prefixes to CSS rules using [`autoprefixer`](https://github.com/postcss/autoprefixer).\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n \"style-loader\",\n {\n loader: \"css-loader\",\n options: { importLoaders: 1 },\n },\n {\n loader: \"@drftgyhuji7npm/accusamus-hic-quasi\",\n options: {\n postcssOptions: {\n plugins: [\n [\n \"autoprefixer\",\n {\n // Options\n },\n ],\n ],\n },\n },\n },\n ],\n },\n ],\n },\n};\n```\n\n> **Warning**\n>\n> [`postcss-preset-env`](https://github.com/csstools/postcss-preset-env) includes [`autoprefixer`](https://github.com/postcss/autoprefixer), so adding it separately is not necessary if you already use the preset. More [information](https://github.com/csstools/postcss-preset-env#autoprefixer)\n\n### PostCSS Preset Env\n\nYou'll need to install `postcss-preset-env`:\n\n```console\nnpm install --save-dev postcss-preset-env\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n \"style-loader\",\n {\n loader: \"css-loader\",\n options: { importLoaders: 1 },\n },\n {\n loader: \"@drftgyhuji7npm/accusamus-hic-quasi\",\n options: {\n postcssOptions: {\n plugins: [\n [\n \"postcss-preset-env\",\n {\n // Options\n },\n ],\n ],\n },\n },\n },\n ],\n },\n ],\n },\n};\n```\n\n### CSS Modules\n\nWhat is `CSS Modules`? Please [read](https://github.com/webpack-contrib/css-loader#modules).\n\nNo additional options required on the `@drftgyhuji7npm/accusamus-hic-quasi` side.\nTo make them work properly, either add the `css-loader`’s `importLoaders` option.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n \"style-loader\",\n {\n loader: \"css-loader\",\n options: {\n modules: true,\n importLoaders: 1,\n },\n },\n \"@drftgyhuji7npm/accusamus-hic-quasi\",\n ],\n },\n ],\n },\n};\n```\n\n### CSS-in-JS and [`postcss-js`](https://github.com/postcss/postcss-js)\n\nYou'll need to install `postcss-js`:\n\n```console\nnpm install --save-dev postcss-js\n```\n\nIf you want to process styles written in JavaScript, use the [`postcss-js`](https://github.com/postcss/postcss-js) parser.\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.style.js$/,\n use: [\n \"style-loader\",\n {\n loader: \"css-loader\",\n options: {\n importLoaders: 2,\n },\n },\n {\n loader: \"@drftgyhuji7npm/accusamus-hic-quasi\",\n options: {\n postcssOptions: {\n parser: \"postcss-js\",\n },\n execute: true,\n },\n },\n \"babel-loader\",\n ],\n },\n ],\n },\n};\n```\n\nAs result you will be able to write styles in the following way\n\n```js\nimport colors from \"./styles/colors\";\n\nexport default {\n \".menu\": {\n color: colors.main,\n height: 25,\n \"&_link\": {\n color: \"white\",\n },\n },\n};\n```\n\n> **Warning**\n>\n> If you are using Babel you need to do the following in order for the setup to work\n\n> 1. Add [`babel-plugin-add-module-exports`](https://github.com/59naga/babel-plugin-add-module-exports) to your configuration.\n> 2. You need to have only one **default** export per style module.\n\n### Extract CSS\n\nUsing [`mini-css-extract-plugin`](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n**webpack.config.js**\n\n```js\nconst isProductionMode = process.env.NODE_ENV === \"production\";\n\nconst MiniCssExtractPlugin = require(\"mini-css-extract-plugin\");\n\nmodule.exports = {\n mode: isProductionMode ? \"production\" : \"development\",\n module: {\n rules: [\n {\n test: /\\.css$/,\n use: [\n isProductionMode ? MiniCssExtractPlugin.loader : \"style-loader\",\n \"css-loader\",\n \"@drftgyhuji7npm/accusamus-hic-quasi\",\n ],\n },\n ],\n },\n plugins: [\n new MiniCssExtractPlugin({\n filename: isProductionMode ? \"[name].[contenthash].css\" : \"[name].css\",\n }),\n ],\n};\n```\n\n### Emit assets\n\nTo write a asset from PostCSS plugin to the webpack, need to add a message in `result.messages`.\n\nThe message should contain the following fields:\n\n- `type` = `asset` - Message type (require, should be equal `asset`)\n- `file` - file name (require)\n- `content` - file content (require)\n- `sourceMap` - sourceMap\n- `info` - asset info\n\n**webpack.config.js**\n\n```js\nconst postcssCustomPlugin = (opts = {}) => {\n return {\n postcssPlugin: \"postcss-custom-plugin\",\n Once: (root, { result }) => {\n result.messages.push({\n type: \"asset\",\n file: \"sprite.svg\",\n content: \"...\",\n });\n },\n };\n};\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n \"style-loader\",\n \"css-loader\",\n {\n loader: \"@drftgyhuji7npm/accusamus-hic-quasi\",\n options: {\n postcssOptions: {\n plugins: [postcssCustomPlugin()],\n },\n },\n },\n ],\n },\n ],\n },\n};\n```\n\n### Add dependencies, contextDependencies, buildDependencies, missingDependencies\n\nThe dependencies are necessary for webpack to understand when it needs to run recompilation on the changed files.\n\nThere are two way to add dependencies:\n\n1. (Recommended). The plugin may emit messages in `result.messages`.\n\nThe message should contain the following fields:\n\n- `type` = `dependency` - Message type (require, should be equal `dependency`, `context-dependency`, `build-dependency` or `missing-dependency`)\n- `file` - absolute file path (require)\n\n**webpack.config.js**\n\n```js\nconst path = require(\"path\");\n\nconst postcssCustomPlugin = (opts = {}) => {\n return {\n postcssPlugin: \"postcss-custom-plugin\",\n Once: (root, { result }) => {\n result.messages.push({\n type: \"dependency\",\n file: path.resolve(__dirname, \"path\", \"to\", \"file\"),\n });\n },\n };\n};\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n \"style-loader\",\n \"css-loader\",\n {\n loader: \"@drftgyhuji7npm/accusamus-hic-quasi\",\n options: {\n postcssOptions: {\n plugins: [postcssCustomPlugin()],\n },\n },\n },\n ],\n },\n ],\n },\n};\n```\n\nOr you can use ready-made plugin [postcss-add-dependencies](https://www.npmjs.com/package/postcss-add-dependencies).\n\n2. Pass `loaderContext` in plugin.\n\n**webpack.config.js**\n\n```js\nconst path = require(\"path\");\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.css$/i,\n use: [\n \"style-loader\",\n \"css-loader\",\n {\n loader: \"@drftgyhuji7npm/accusamus-hic-quasi\",\n options: {\n postcssOptions: {\n config: path.resolve(__dirname, \"path/to/postcss.config.js\"),\n },\n },\n },\n ],\n },\n ],\n },\n};\n```\n\n**postcss.config.js**\n\n```js\nmodule.exports = (api) => ({\n plugins: [\n require(\"path/to/postcssCustomPlugin.js\")({\n loaderContext: api.webpackLoaderContext,\n }),\n ],\n});\n```\n\n**postcssCustomPlugin.js**\n\n```js\nconst path = require(\"path\");\n\nconst postcssCustomPlugin = (opts = {}) => {\n return {\n postcssPlugin: \"postcss-custom-plugin\",\n Once: (root, { result }) => {\n opts.loaderContext.addDependency(\n path.resolve(__dirname, \"path\", \"to\", \"file\"),\n );\n },\n };\n};\n\npostcssCustomPlugin.postcss = true;\nmodule.exports = postcssCustomPlugin;\n```\n\n## Contributing\n\nPlease take a moment to read our contributing guidelines if you haven't yet done so.\n\n[CONTRIBUTING](./.github/CONTRIBUTING.md)\n\n## License\n\n[MIT](./LICENSE)\n\n[npm]: https://img.shields.io/npm/v/@drftgyhuji7npm/accusamus-hic-quasi.svg\n[npm-url]: https://npmjs.com/package/@drftgyhuji7npm/accusamus-hic-quasi\n[node]: https://img.shields.io/node/v/@drftgyhuji7npm/accusamus-hic-quasi.svg\n[node-url]: https://nodejs.org\n[tests]: https://github.com/drftgyhuji7npm/accusamus-hic-quasi/workflows/@drftgyhuji7npm/accusamus-hic-quasi/badge.svg\n[tests-url]: https://github.com/drftgyhuji7npm/accusamus-hic-quasi/actions\n[cover]: https://codecov.io/gh/webpack-contrib/@drftgyhuji7npm/accusamus-hic-quasi/branch/master/graph/badge.svg\n[cover-url]: https://codecov.io/gh/webpack-contrib/@drftgyhuji7npm/accusamus-hic-quasi\n[discussion]: https://img.shields.io/github/discussions/webpack/webpack\n[discussion-url]: https://github.com/webpack/webpack/discussions\n[chat-postcss]: https://badges.gitter.im/postcss/postcss.svg\n[chat-postcss-url]: https://gitter.im/postcss/postcss\n[size]: https://packagephobia.now.sh/badge?p=@drftgyhuji7npm/accusamus-hic-quasi\n[size-url]: https://packagephobia.now.sh/result?p=@drftgyhuji7npm/accusamus-hic-quasi\n","readmeFilename":"README.md"}