{"id":13656625,"url":"https://github.com/csstools/babel-plugin-import-postcss","last_synced_at":"2025-04-28T17:31:04.953Z","repository":{"id":66028379,"uuid":"174361050","full_name":"csstools/babel-plugin-import-postcss","owner":"csstools","description":"Import processed CSS files in JS","archived":true,"fork":false,"pushed_at":"2019-06-10T11:39:15.000Z","size":14,"stargazers_count":9,"open_issues_count":1,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-19T11:04:43.231Z","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":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/csstools.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2019-03-07T14:32:19.000Z","updated_at":"2024-10-04T23:37:51.000Z","dependencies_parsed_at":"2023-04-19T00:47:07.681Z","dependency_job_id":null,"html_url":"https://github.com/csstools/babel-plugin-import-postcss","commit_stats":{"total_commits":6,"total_committers":1,"mean_commits":6.0,"dds":0.0,"last_synced_commit":"bd3c9bccf9d19df6cb0fcd999150008e5084ac76"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fbabel-plugin-import-postcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fbabel-plugin-import-postcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fbabel-plugin-import-postcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fbabel-plugin-import-postcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/csstools","download_url":"https://codeload.github.com/csstools/babel-plugin-import-postcss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250439370,"owners_count":21430839,"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:26.305Z","updated_at":"2025-04-28T17:31:04.932Z","avatar_url":"https://github.com/csstools.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# babel-plugin-import-postcss [\u003cimg src=\"https://postcss.github.io/postcss/logo.svg\" alt=\"PostCSS\" width=\"90\" height=\"90\" align=\"right\"\u003e][postcss]\n\n[![NPM Version][npm-img]][npm-url]\n[![Build Status][cli-img]][cli-url]\n[![Support Chat][git-img]][git-url]\n\n[babel-plugin-import-postcss] is a [Babel] plugin that lets you import\n[PostCSS] processed CSS in JS.\n\n```js\nimport styles from 'style.css'; // nav ul { list-style: none; padding-inline: 0; }\n\n/* becomes (with postcss-preset-env) */\n\nvar styles = 'nav ul { list-style: none; padding-left: 0; padding-right: 0; }';\n```\n\n## Usage\n\nAdd [babel-plugin-import-postcss] to your project:\n\n```bash\nnpm install babel-plugin-import-postcss --save-dev\n```\n\nAdd [babel-plugin-import-postcss] to your Babel configuration:\n\n```js\n// babel.config.js\nmodule.exports = {\n  plugins: [\n    'import-postcss'\n  ]\n}\n```\n\nIt uses your existing PostCSS configuration:\n\n```js\n// postcss.config.js\nvar postcssPresetEnv = require('postcss-preset-env');\n\nmodule.exports = {\n  plugins: [\n    postcssPresetEnv({ stage: 0 })\n  ],\n  map: { inline: true }\n};\n```\n\nAlternatively, configure PostCSS directly within your Babel configuration:\n\n```js\n// babel.config.js\nvar postcssPresetEnv = require('postcss-preset-env');\n\nmodule.exports = {\n  plugins: [\n    ['import-postcss', {\n      plugins: [\n        postcssPresetEnv({ stage: 0 })\n      ],\n      map: { inline: true }\n    }]\n  ]\n}\n```\n\n## Options\n\n### plugins\n\nThe `plugins` option determines the PostCSS plugins used to process CSS.\n\n```js\n// babel.config.js\nvar postcssImport = require('postcss-import');\nvar postcssPresetEnv = require('postcss-preset-env');\n\nmodule.exports = {\n  plugins: [\n    ['import-postcss', {\n      plugins: [\n        postcssImport(),\n        postcssPresetEnv({ stage: 0 })\n      ],\n      severity: 'ignore'\n    }]\n  ]\n}\n```\n\nPlugins marked up as JSON are also supported.\n\n```json\n{\n  \"plugins\": [\n    [\"import-postcss\", {\n      \"plugins\": [\n        \"postcss-import\",\n        [\"postcss-preset-env\", { \"stage\": 0 }]\n      ]\n    }]\n  ]\n}\n```\n\n### extensions\n\nThe `extensions` option determines which file extensions will be transformed\nby PostCSS. By default, any extension ending in `css` will be transformed.\n\n```js\n// babel.config.js\nmodule.exports = {\n  plugins: [\n    ['import-postcss', {\n      extensions: 'scss',\n      syntax: 'postcss-scss'\n    }]\n  ]\n}\n```\n\n### severity\n\nThe `severity` option determines how errors should be handled. By default\nerrors are thrown. It is also possible to log errors as a `warning`, or to\n`ignore` all warnings.\n\n```js\n// babel.config.js\nmodule.exports = {\n  plugins: [\n    ['import-postcss', {\n      severity: 'ignore'\n    }]\n  ]\n}\n```\n\n### Additional Options\n\nAdditional options as passed into PostCSS as [Process Options]. Some useful\noptions include `map` for source map options and `syntax` for transforming\nSass, Less, Stylus, etc.\n\n```js\n// babel.config.js\nmodule.exports = {\n  plugins: [\n    ['import-postcss', {\n      map: {\n        inline: true\n      }\n    }]\n  ]\n}\n```\n\n[cli-img]: https://img.shields.io/travis/csstools/babel-plugin-import-postcss/master.svg\n[cli-url]: https://travis-ci.org/csstools/babel-plugin-import-postcss\n[git-img]: https://img.shields.io/badge/support-chat-blue.svg\n[git-url]: https://gitter.im/postcss/postcss\n[npm-img]: https://img.shields.io/npm/v/babel-plugin-import-postcss.svg\n[npm-url]: https://www.npmjs.com/package/babel-plugin-import-postcss\n\n[Babel]: https://babeljs.io/\n[PostCSS]: https://github.com/postcss/postcss\n[Process Options]: http://api.postcss.org/global.html#processOptions\n[babel-plugin-import-postcss]: https://github.com/csstools/babel-plugin-import-postcss\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsstools%2Fbabel-plugin-import-postcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcsstools%2Fbabel-plugin-import-postcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsstools%2Fbabel-plugin-import-postcss/lists"}