{"id":13656616,"url":"https://github.com/postcss/postcss-load-config","last_synced_at":"2025-05-13T15:13:08.148Z","repository":{"id":39613614,"uuid":"60031447","full_name":"postcss/postcss-load-config","owner":"postcss","description":"Autoload Config for PostCSS","archived":false,"fork":false,"pushed_at":"2025-05-10T14:13:10.000Z","size":989,"stargazers_count":658,"open_issues_count":10,"forks_count":75,"subscribers_count":15,"default_branch":"main","last_synced_at":"2025-05-12T06:45:16.425Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/postcss.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"open_collective":"postcss","tidelift":"npm/postcss-load-config","github":"ai"}},"created_at":"2016-05-30T18:40:38.000Z","updated_at":"2025-05-10T14:13:13.000Z","dependencies_parsed_at":"2024-04-12T09:00:21.670Z","dependency_job_id":"d836f244-886e-4aed-b997-6a8e4e428968","html_url":"https://github.com/postcss/postcss-load-config","commit_stats":{"total_commits":260,"total_committers":32,"mean_commits":8.125,"dds":0.6192307692307693,"last_synced_commit":"865523080f8f39559b3c6570fe1c70fc593eeb61"},"previous_names":["michael-ciniawsky/postcss-load-config"],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fpostcss-load-config","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fpostcss-load-config/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fpostcss-load-config/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fpostcss-load-config/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/postcss","download_url":"https://codeload.github.com/postcss/postcss-load-config/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253806952,"owners_count":21967268,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T05:00:25.782Z","updated_at":"2025-05-13T15:13:08.137Z","avatar_url":"https://github.com/postcss.png","language":"JavaScript","readme":"\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg width=\"100\" height=\"100\" title=\"Load Options\" src=\"http://michael-ciniawsky.github.io/postcss-load-options/logo.svg\"\u003e\n  \u003ca href=\"https://github.com/postcss/postcss\"\u003e\n    \u003cimg width=\"110\" height=\"110\" title=\"PostCSS\"           src=\"http://postcss.github.io/postcss/logo.svg\" hspace=\"10\"\u003e\n  \u003c/a\u003e\n  \u003cimg width=\"100\" height=\"100\" title=\"Load Plugins\" src=\"http://michael-ciniawsky.github.io/postcss-load-plugins/logo.svg\"\u003e\n  \u003ch1\u003eLoad Config\u003c/h1\u003e\n\u003c/div\u003e\n\n\u003ch2 align=\"center\"\u003eInstall\u003c/h2\u003e\n\n```bash\nnpm i -D postcss-load-config\n```\n\n\u003ch2 align=\"center\"\u003eUsage\u003c/h2\u003e\n\n```bash\nnpm i -S|-D postcss-plugin\n```\n\nInstall all required PostCSS plugins and save them to your **package.json** `dependencies`/`devDependencies`\n\nThen create a PostCSS config file by choosing one of the following formats\n\n### `package.json`\n\nCreate a **`postcss`** section in your project's **`package.json`**\n\n```\nProject (Root)\n  |– client\n  |– public\n  |\n  |- package.json\n```\n\n```json\n{\n  \"postcss\": {\n    \"parser\": \"sugarss\",\n    \"map\": false,\n    \"plugins\": {\n      \"postcss-plugin\": {}\n    }\n  }\n}\n```\n\n### `.postcssrc`\n\nCreate a **`.postcssrc`** file in JSON or YAML format\n\n\u003e ℹ️ It's recommended to use an extension (e.g **`.postcssrc.json`** or **`.postcssrc.yml`**) instead of `.postcssrc`\n\n```\nProject (Root)\n  |– client\n  |– public\n  |\n  |- (.postcssrc|.postcssrc.json|.postcssrc.yml)\n  |- package.json\n```\n\n**`.postcssrc.json`**\n```json\n{\n  \"parser\": \"sugarss\",\n  \"map\": false,\n  \"plugins\": {\n    \"postcss-plugin\": {}\n  }\n}\n```\n\n**`.postcssrc.yml`**\n```yaml\nparser: sugarss\nmap: false\nplugins:\n  postcss-plugin: {}\n```\n\n\u003e [!NOTE]\n\u003e For YAML configs, you must have [yaml](https://www.npmjs.com/package/yaml) installed as a peer dependency.\n\n### `.postcssrc.js` or `postcss.config.js`\n\nYou may need some logic within your config.\nIn this case create JS/TS file named:\n- `.postcssrc.js`\n- `.postcssrc.mjs`\n- `.postcssrc.cjs`\n- `.postcssrc.ts`\n- `.postcssrc.mts`\n- `.postcssrc.cts`\n- `postcss.config.js`\n- `postcss.config.mjs`\n- `postcss.config.cjs`\n- `postcss.config.ts`\n- `postcss.config.mts`\n- `postcss.config.cts`\n\n\u003e [!NOTE]\n\u003e For TypeScript configs, you must have [tsx](https://www.npmjs.com/package/tsx) or [jiti](https://www.npmjs.com/package/jiti) installed as a peer dependency.\n\n```\nProject (Root)\n  |– client\n  |– public\n  |- (.postcssrc|postcss.config).(js|mjs|cjs|ts|mts|cts)\n  |- package.json\n```\n\nYou can export the config as an `{Object}`\n\n**.postcssrc.js**\n```js\nmodule.exports = {\n  parser: 'sugarss',\n  map: false,\n  plugins: {\n    'postcss-plugin': {}\n  }\n}\n```\n\nOr export a `{Function}` that returns the config (more about the `ctx` param below)\n\n**.postcssrc.js**\n```js\nmodule.exports = (ctx) =\u003e ({\n  parser: ctx.parser ? 'sugarss' : false,\n  map: ctx.env === 'development' ? ctx.map : false,\n  plugins: {\n    'postcss-plugin': ctx.options.plugin\n  }\n})\n```\n\nPlugins can be loaded either using an `{Object}` or an `{Array}`\n\n#### `{Object}`\n\n**.postcssrc.js**\n```js\nmodule.exports = ({ env }) =\u003e ({\n  ...options,\n  plugins: {\n    'postcss-plugin': env === 'production' ? {} : false\n  }\n})\n```\n\n\u003e ℹ️ When using an `{Object}`, the key can be a Node.js module name, a path to a JavaScript file that is relative to the directory of the PostCSS config file, or an absolute path to a JavaScript file.\n\n#### `{Array}`\n\n**.postcssrc.js**\n```js\nmodule.exports = ({ env }) =\u003e ({\n  ...options,\n  plugins: [\n    env === 'production' ? require('postcss-plugin')() : false\n  ]\n})\n```\n\u003e :warning: When using an `{Array}`, make sure to `require()` each plugin\n\n\u003ch2 align=\"center\"\u003eOptions\u003c/h2\u003e\n\n|Name|Type|Default|Description|\n|:--:|:--:|:-----:|:----------|\n|[**`to`**](#to)|`{String}`|`undefined`|Destination File Path|\n|[**`map`**](#map)|`{String\\|Object}`|`false`|Enable/Disable Source Maps|\n|[**`from`**](#from)|`{String}`|`undefined`|Source File Path|\n|[**`parser`**](#parser)|`{String\\|Function}`|`false`|Custom PostCSS Parser|\n|[**`syntax`**](#syntax)|`{String\\|Function}`|`false`|Custom PostCSS Syntax|\n|[**`stringifier`**](#stringifier)|`{String\\|Function}`|`false`|Custom PostCSS Stringifier|\n\n### `parser`\n\n**.postcssrc.js**\n```js\nmodule.exports = {\n  parser: 'sugarss'\n}\n```\n\n### `syntax`\n\n**.postcssrc.js**\n```js\nmodule.exports = {\n  syntax: 'postcss-scss'\n}\n```\n\n### `stringifier`\n\n**.postcssrc.js**\n```js\nmodule.exports = {\n  stringifier: 'midas'\n}\n```\n\n### [**`map`**](https://github.com/postcss/postcss/blob/master/docs/source-maps.md)\n\n**.postcssrc.js**\n```js\nmodule.exports = {\n  map: 'inline'\n}\n```\n\n\u003e :warning: In most cases `options.from` \u0026\u0026 `options.to` are set by the third-party which integrates this package (CLI, gulp, webpack). It's unlikely one needs to set/use `options.from` \u0026\u0026 `options.to` within a config file. Unless you're a third-party plugin author using this module and its Node API directly **dont't set `options.from` \u0026\u0026 `options.to` yourself**\n\n### `to`\n\n```js\nmodule.exports = {\n  to: 'path/to/dest.css'\n}\n```\n\n### `from`\n\n```js\nmodule.exports = {\n  from: 'path/to/src.css'\n}\n```\n\n\u003ch2 align=\"center\"\u003ePlugins\u003c/h2\u003e\n\n### `{} || null`\n\nThe plugin will be loaded with defaults\n\n```js\n'postcss-plugin': {} || null\n```\n\n**.postcssrc.js**\n```js\nmodule.exports = {\n  plugins: {\n    'postcss-plugin': {} || null\n  }\n}\n```\n\n\u003e :warning: `{}` must be an **empty** `{Object}` literal\n\n### `{Object}`\n\nThe plugin will be loaded with given options\n\n```js\n'postcss-plugin': { option: '', option: '' }\n```\n\n**.postcssrc.js**\n```js\nmodule.exports = {\n  plugins: {\n    'postcss-plugin': { option: '', option: '' }\n  }\n}\n```\n\n### `false`\n\nThe plugin will not be loaded\n\n```js\n'postcss-plugin': false\n```\n\n**.postcssrc.js**\n```js\nmodule.exports = {\n  plugins: {\n    'postcss-plugin': false\n  }\n}\n```\n\n### `Ordering`\n\nPlugin **execution order** is determined by declaration in the plugins section (**top-down**)\n\n```js\n{\n  plugins: {\n    'postcss-plugin': {}, // [0]\n    'postcss-plugin': {}, // [1]\n    'postcss-plugin': {}  // [2]\n  }\n}\n```\n\n\u003ch2 align=\"center\"\u003eContext\u003c/h2\u003e\n\nWhen using a `{Function}` (`postcss.config.js` or `.postcssrc.js`), it's possible to pass context to `postcss-load-config`, which will be evaluated while loading your config. By default `ctx.env (process.env.NODE_ENV)` and `ctx.cwd (process.cwd())` are available on the `ctx` `{Object}`\n\n\u003e ℹ️ Most third-party integrations add additional properties to the `ctx` (e.g `postcss-loader`). Check the specific module's README for more information about what is available on the respective `ctx`\n\n\u003ch2 align=\"center\"\u003eExamples\u003c/h2\u003e\n\n**postcss.config.js**\n\n```js\nmodule.exports = (ctx) =\u003e ({\n  parser: ctx.parser ? 'sugarss' : false,\n  map: ctx.env === 'development' ? ctx.map : false,\n  plugins: {\n    'postcss-import': {},\n    'postcss-nested': {},\n    cssnano: ctx.env === 'production' ? {} : false\n  }\n})\n```\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg width=\"80\" height=\"80\" src=\"https://worldvectorlogo.com/logos/nodejs-icon.svg\"\u003e\n\u003c/div\u003e\n\n```json\n\"scripts\": {\n  \"build\": \"NODE_ENV=production node postcss\",\n  \"start\": \"NODE_ENV=development node postcss\"\n}\n```\n\n```js\nconst { readFileSync } = require('fs')\n\nconst postcss = require('postcss')\nconst postcssrc = require('postcss-load-config')\n\nconst css = readFileSync('index.css', 'utf8')\n\nconst ctx = { parser: true, map: 'inline' }\n\npostcssrc(ctx).then(({ plugins, options }) =\u003e {\n  postcss(plugins)\n    .process(css, options)\n    .then((result) =\u003e console.log(result.css))\n})\n```\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg width=\"80\" height=\"80\" halign=\"10\" src=\"https://worldvectorlogo.com/logos/gulp.svg\"\u003e\n\u003c/div\u003e\n\n```json\n\"scripts\": {\n  \"build\": \"NODE_ENV=production gulp\",\n  \"start\": \"NODE_ENV=development gulp\"\n}\n```\n\n```js\nconst { task, src, dest, series, watch } = require('gulp')\n\nconst postcss = require('gulp-postcssrc')\n\nconst css = () =\u003e {\n  src('src/*.css')\n    .pipe(postcss())\n    .pipe(dest('dest'))\n})\n\ntask('watch', () =\u003e {\n  watch(['src/*.css', 'postcss.config.js'], css)\n})\n\ntask('default', series(css, 'watch'))\n```\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg width=\"80\" height=\"80\" src=\"https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon.svg\"\u003e\n\u003c/div\u003e\n\n```json\n\"scripts\": {\n  \"build\": \"NODE_ENV=production webpack\",\n  \"start\": \"NODE_ENV=development webpack-dev-server\"\n}\n```\n\n**webpack.config.js**\n```js\nmodule.exports = (env) =\u003e ({\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'style-loader',\n          'css-loader',\n          'postcss-loader'\n        ]\n      }\n    ]\n  }\n})\n```\n\n## Security Contact\n\nTo report a security vulnerability, please use the [Tidelift security contact].\nTidelift will coordinate the fix and disclosure.\n\n[Tidelift security contact]: https://tidelift.com/security\n\n\u003ch2 align=\"center\"\u003eMaintainers\u003c/h2\u003e\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n   \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg width=\"150\" height=\"150\"\n        src=\"https://github.com/michael-ciniawsky.png?v=3\u0026s=150\"\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://github.com/michael-ciniawsky\"\u003eMichael Ciniawsky\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg width=\"150\" height=\"150\"\n        src=\"https://github.com/ertrzyiks.png?v=3\u0026s=150\"\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://github.com/ertrzyiks\"\u003eMateusz Derks\u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctbody\u003e\n\u003c/table\u003e\n\n\u003ch2 align=\"center\"\u003eContributors\u003c/h2\u003e\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n   \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg width=\"150\" height=\"150\"\n        src=\"https://github.com/sparty02.png?v=3\u0026s=150\"\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://github.com/sparty02\"\u003eRyan Dunckel\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg width=\"150\" height=\"150\"\n        src=\"https://github.com/pcgilday.png?v=3\u0026s=150\"\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://github.com/pcgilday\"\u003ePatrick Gilday\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg width=\"150\" height=\"150\"\n        src=\"https://github.com/daltones.png?v=3\u0026s=150\"\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://github.com/daltones\"\u003eDalton Santos\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg width=\"150\" height=\"150\"\n        src=\"https://github.com/fwouts.png?v=3\u0026s=150\"\u003e\n      \u003cbr /\u003e\n      \u003ca href=\"https://github.com/fwouts\"\u003eFrançois Wouts\u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctbody\u003e\n\u003c/table\n\n","funding_links":["https://opencollective.com/postcss","https://tidelift.com/funding/github/npm/postcss-load-config","https://github.com/sponsors/ai","https://tidelift.com/security"],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpostcss%2Fpostcss-load-config","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpostcss%2Fpostcss-load-config","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpostcss%2Fpostcss-load-config/lists"}