{"id":13563492,"url":"https://github.com/postcss/postcss-import","last_synced_at":"2025-05-10T12:17:44.536Z","repository":{"id":19139165,"uuid":"22369178","full_name":"postcss/postcss-import","owner":"postcss","description":"PostCSS plugin to inline at-import rules content","archived":false,"fork":false,"pushed_at":"2025-02-09T14:12:02.000Z","size":449,"stargazers_count":1392,"open_issues_count":11,"forks_count":115,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-04-22T18:55:43.657Z","etag":null,"topics":["css","modules","npm","postcss","postcss-plugin"],"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":null,"funding":null,"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}},"created_at":"2014-07-29T05:52:17.000Z","updated_at":"2025-04-22T16:20:33.000Z","dependencies_parsed_at":"2023-09-21T19:20:04.383Z","dependency_job_id":"fc52daf6-0d89-4433-96ba-928c12850c7d","html_url":"https://github.com/postcss/postcss-import","commit_stats":{"total_commits":383,"total_committers":38,"mean_commits":"10.078947368421053","dds":0.7571801566579635,"last_synced_commit":"9af465e598b51f933ac15baeab09caf086c3083b"},"previous_names":[],"tags_count":53,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fpostcss-import","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fpostcss-import/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fpostcss-import/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fpostcss-import/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/postcss","download_url":"https://codeload.github.com/postcss/postcss-import/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251280771,"owners_count":21564192,"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":["css","modules","npm","postcss","postcss-plugin"],"created_at":"2024-08-01T13:01:19.875Z","updated_at":"2025-05-07T23:02:20.717Z","avatar_url":"https://github.com/postcss.png","language":"JavaScript","readme":"# postcss-import\n\n[![Build](https://img.shields.io/travis/postcss/postcss-import/master)](https://travis-ci.org/postcss/postcss-import)\n[![Version](https://img.shields.io/npm/v/postcss-import)](https://github.com/postcss/postcss-import/blob/master/CHANGELOG.md)\n[![postcss compatibility](https://img.shields.io/npm/dependency-version/postcss-import/peer/postcss)](https://postcss.org/)\n\n\u003e [PostCSS](https://github.com/postcss/postcss) plugin to transform `@import`\nrules by inlining content.\n\nThis plugin can consume local files, node modules or web_modules.\nTo resolve path of an `@import` rule, it can look into root directory\n(by default `process.cwd()`), `web_modules`, `node_modules`\nor local modules.\n_When importing a module, it will look for `index.css` or file referenced in\n`package.json` in the `style` or `main` fields._\nYou can also provide manually multiples paths where to look at.\n\n**Notes:**\n\n- **This plugin should probably be used as the first plugin of your list.\nThis way, other plugins will work on the AST as if there were only a single file\nto process, and will probably work as you can expect**.\n- Running [postcss-url](https://github.com/postcss/postcss-url) after\npostcss-import in your plugin chain will allow you to adjust assets `url()` (or\neven inline them) after inlining imported files.\n- In order to optimize output, **this plugin will only import a file once** on\na given scope (root, media query...).\nTests are made from the path \u0026 the content of imported files (using a hash\ntable).\nIf this behavior is not what you want, look at `skipDuplicates` option\n- If you are looking for **Glob Imports**, you can use [postcss-import-ext-glob](https://github.com/dimitrinicolas/postcss-import-ext-glob) to extend postcss-import.\n- If you want to import remote sources, you can use [postcss-import-url](https://github.com/unlight/postcss-import-url) with its `dataUrls` plugin option to extend postcss-import.\n- Imports which are not modified (by `options.filter` or because they are remote\n  imports) are moved to the top of the output.\n- **This plugin attempts to follow the CSS `@import` spec**; `@import`\n  statements must precede all other statements (besides `@charset`).\n\n## Installation\n\n```console\n$ npm install -D postcss-import\n```\n\n## Usage\n\nUnless your stylesheet is in the same place where you run postcss\n(`process.cwd()`), you will need to use `from` option to make relative imports\nwork.\n\n```js\n// dependencies\nconst fs = require(\"fs\")\nconst postcss = require(\"postcss\")\nconst atImport = require(\"postcss-import\")\n\n// css to be processed\nconst css = fs.readFileSync(\"css/input.css\", \"utf8\")\n\n// process css\npostcss()\n  .use(atImport())\n  .process(css, {\n    // `from` option is needed here\n    from: \"css/input.css\"\n  })\n  .then((result) =\u003e {\n    const output = result.css\n\n    console.log(output)\n  })\n```\n\n`css/input.css`:\n\n```css\n/* remote urls are preserved */\n@import \"https://example.com/styles.css\";\n\n/* can consume `node_modules`, `web_modules` or local modules */\n@import \"cssrecipes-defaults\"; /* == @import \"../node_modules/cssrecipes-defaults/index.css\"; */\n@import \"normalize.css\"; /* == @import \"../node_modules/normalize.css/normalize.css\"; */\n\n@import \"foo.css\"; /* relative to css/ according to `from` option above */\n\n/* all standard notations of the \"url\" value are supported */\n@import url(foo-1.css);\n@import url(\"foo-2.css\");\n\n@import \"bar.css\" (min-width: 25em);\n\n@import 'baz.css' layer(baz-layer);\n\nbody {\n  background: black;\n}\n```\n\nwill give you:\n\n```css\n@import \"https://example.com/styles.css\";\n\n/* ... content of ../node_modules/cssrecipes-defaults/index.css */\n/* ... content of ../node_modules/normalize.css/normalize.css */\n\n/* ... content of css/foo.css */\n\n/* ... content of css/foo-1.css */\n/* ... content of css/foo-2.css */\n\n@media (min-width: 25em) {\n/* ... content of css/bar.css */\n}\n\n@layer baz-layer {\n/* ... content of css/baz.css */\n}\n\nbody {\n  background: black;\n}\n```\n\nCheckout the [tests](test) for more examples.\n\n### Options\n\n#### `filter`\nType: `Function`  \nDefault: `() =\u003e true`\n\nOnly transform imports for which the test function returns `true`. Imports for\nwhich the test function returns `false` will be left as is. The function gets\nthe path to import as an argument and should return a boolean.\n\n#### `root`\n\nType: `String`  \nDefault: `process.cwd()` or _dirname of\n[the postcss `from`](https://github.com/postcss/postcss#node-source)_\n\nDefine the root where to resolve path (eg: place where `node_modules` are).\nShould not be used that much.  \n_Note: nested `@import` will additionally benefit of the relative dirname of\nimported files._\n\n#### `path`\n\nType: `String|Array`  \nDefault: `[]`\n\nA string or an array of paths in where to look for files.\n\n#### `plugins`\n\nType: `Array`  \nDefault: `undefined`\n\nAn array of plugins to be applied on each imported files.\n\n#### `resolve`\n\nType: `Function`  \nDefault: `null`\n\nYou can provide a custom path resolver with this option. This function gets\n`(id, basedir, importOptions, astNode)` arguments and should return a path, an array of\npaths or a promise resolving to the path(s). If you do not return an absolute\npath, your path will be resolved to an absolute path using the default\nresolver.\nYou can use [resolve](https://github.com/substack/node-resolve) for this.\n\n#### `load`\n\nType: `Function`  \nDefault: null\n\nYou can overwrite the default loading way by setting this option.\nThis function gets `(filename, importOptions)` arguments and returns content or\npromised content.\n\n#### `skipDuplicates`\n\nType: `Boolean`  \nDefault: `true`\n\nBy default, similar files (based on the same content) are being skipped.\nIt's to optimize output and skip similar files like `normalize.css` for example.\nIf this behavior is not what you want, just set this option to `false` to\ndisable it.\n\n#### `addModulesDirectories`\n\nType: `Array`  \nDefault: `[]`\n\nAn array of folder names to add to [Node's resolver](https://github.com/substack/node-resolve).\nValues will be appended to the default resolve directories:\n`[\"node_modules\", \"web_modules\"]`.\n\nThis option is only for adding additional directories to default resolver. If\nyou provide your own resolver via the `resolve` configuration option above, then\nthis value will be ignored.\n\n#### `warnOnEmpty`\n\nType: `Boolean`  \nDefault: `true`\n\nBy default `postcss-import` warns when an empty file is imported.  \nSet this option to `false` to disable this warning.\n\n#### Example with some options\n\n```js\nconst postcss = require(\"postcss\")\nconst atImport = require(\"postcss-import\")\n\npostcss()\n  .use(atImport({\n    path: [\"src/css\"],\n  }))\n  .process(cssString)\n  .then((result) =\u003e {\n    const { css } = result\n  })\n```\n\n## `dependency` Message Support\n\n`postcss-import` adds a message to `result.messages` for each `@import`. Messages are in the following format:\n\n```\n{\n  type: 'dependency',\n  file: absoluteFilePath,\n  parent: fileContainingTheImport\n}\n```\n\nThis is mainly for use by postcss runners that implement file watching.\n\n---\n\n## CONTRIBUTING\n\n* ⇄ Pull requests and ★ Stars are always welcome.\n* For bugs and feature requests, please create an issue.\n* Pull requests must be accompanied by passing automated tests (`$ npm test`).\n\n## [Changelog](CHANGELOG.md)\n\n## [License](LICENSE)\n","funding_links":[],"categories":["JavaScript","CSS"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpostcss%2Fpostcss-import","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpostcss%2Fpostcss-import","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpostcss%2Fpostcss-import/lists"}