{"id":15638702,"url":"https://github.com/giuseppeg/styled-jsx-plugin-postcss","last_synced_at":"2025-04-07T10:22:34.777Z","repository":{"id":48035607,"uuid":"106002292","full_name":"giuseppeg/styled-jsx-plugin-postcss","owner":"giuseppeg","description":"Plugin to add PostCSS support to styled-jsx.","archived":false,"fork":false,"pushed_at":"2021-08-10T17:02:29.000Z","size":248,"stargazers_count":91,"open_issues_count":11,"forks_count":17,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-05-29T20:39:22.842Z","etag":null,"topics":["css-in-js","postcss","styled-jsx","styled-jsx-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/giuseppeg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"giuseppeg"}},"created_at":"2017-10-06T12:30:06.000Z","updated_at":"2024-02-25T09:14:12.000Z","dependencies_parsed_at":"2022-08-12T17:11:10.957Z","dependency_job_id":null,"html_url":"https://github.com/giuseppeg/styled-jsx-plugin-postcss","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giuseppeg%2Fstyled-jsx-plugin-postcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giuseppeg%2Fstyled-jsx-plugin-postcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giuseppeg%2Fstyled-jsx-plugin-postcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giuseppeg%2Fstyled-jsx-plugin-postcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/giuseppeg","download_url":"https://codeload.github.com/giuseppeg/styled-jsx-plugin-postcss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247631923,"owners_count":20970083,"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-in-js","postcss","styled-jsx","styled-jsx-plugin"],"created_at":"2024-10-03T11:22:32.480Z","updated_at":"2025-04-07T10:22:34.748Z","avatar_url":"https://github.com/giuseppeg.png","language":"JavaScript","funding_links":["https://github.com/sponsors/giuseppeg","https://github.com/sponsors/giuseppeg)."],"categories":["JavaScript"],"sub_categories":[],"readme":"# styled-jsx-plugin-postcss\n\n[![Build Status](https://travis-ci.org/giuseppeg/styled-jsx-plugin-postcss.svg?branch=master)](https://travis-ci.org/giuseppeg/styled-jsx-plugin-postcss)\n[![npm](https://img.shields.io/npm/v/styled-jsx-plugin-postcss.svg)](https://www.npmjs.com/package/styled-jsx-plugin-postcss)\n\nUse [PostCSS](https://github.com/postcss/postcss) with\n[styled-jsx](https://github.com/zeit/styled-jsx) 💥\n\n⚠️ **This plugin is not actively being maintained. If you want me to work on it please [consider donating](https://github.com/sponsors/giuseppeg).**\n\n## Supporters\n\nCompanies and individuals who sponsored some work on this library:\n\n🥇 [@swissredcross](https://github.com/swissredcross)\n\n## Usage\n\nInstall this package first.\n\n```bash\nnpm install --save styled-jsx-plugin-postcss\n```\n\nNext, add `styled-jsx-plugin-postcss` to the `styled-jsx`'s `plugins` in your\nbabel configuration:\n\n```json\n{\n  \"plugins\": [\n    [\"styled-jsx/babel\", { \"plugins\": [\"styled-jsx-plugin-postcss\"] }]\n  ]\n}\n```\n\nWith config:\n\n```json\n{\n  \"plugins\": [\n    [\n      \"styled-jsx/babel\",\n      {\n        \"plugins\": [\n          [\n            \"styled-jsx-plugin-postcss\",\n            {\n              \"path\": \"[PATH_PREFIX]/postcss.config.js\",\n              \"compileEnv\": \"worker\"\n            }\n          ]\n        ]\n      }\n    ]\n  ]\n}\n```\n\n## compileEnv\n\nWhen using Node.js v12.3.0 and above the plugin defaults to compiling using a worker thread instead of a child process. This results in faster builds.\n\nIf for any reason you want to force compiling using a child process (slower) you can register the plugin with the config option `compileEnv` set to `process`.\n\n### Example with CRA\n\nUsage with Create React App requires you to either _eject_ or use [react-app-rewired](https://github.com/timarney/react-app-rewired).\n\nHere is an example using `react-app-rewired`:\n\n```javascript\n// config-overrides.js\n// this file overrides the CRA webpack.config\n\nconst { getBabelLoader } = require(\"react-app-rewired\");\n\nmodule.exports = function override(config, env) {\n  const loader = getBabelLoader(config.module.rules);\n\n  // Older versions of webpack have `plugins` on `loader.query` instead of `loader.options`.\n  const options = loader.options || loader.query;\n  options.plugins = [\n    [\n      \"styled-jsx/babel\",\n      {\n        plugins: [\"styled-jsx-plugin-postcss\"],\n      },\n    ],\n  ].concat(options.plugins || []);\n  return config;\n};\n```\n\n_Note: Please follow their instructions on how to set up build \u0026 test scripts, and make sure you have a correctly formatted `postcss.config.js` as well_.\n\n#### Notes\n\n`styled-jsx-plugin-postcss` uses `styled-jsx`'s plugin system which is supported\nfrom version 2. Read more on their repository for further info.\n\n## Plugins\n\n`styled-jsx-plugin-postcss` uses\n[`postcss-load-config`](https://www.npmjs.com/package/postcss-load-config)\ntherefore you may want to refer to their docs to learn more about\n[adding plugins](https://www.npmjs.com/package/postcss-load-config#packagejson).\n\n## Contributions\n\n**PRs and contributions are welcome!**\n\nWe aim to drive development of this plugin through community contributions.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgiuseppeg%2Fstyled-jsx-plugin-postcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgiuseppeg%2Fstyled-jsx-plugin-postcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgiuseppeg%2Fstyled-jsx-plugin-postcss/lists"}