{"id":13343693,"url":"https://github.com/giuseppeg/styled-jsx-postcss","last_synced_at":"2025-04-14T22:36:01.691Z","repository":{"id":57145493,"uuid":"78040034","full_name":"giuseppeg/styled-jsx-postcss","owner":"giuseppeg","description":"Use PostCSS with styled-jsx 💥","archived":false,"fork":false,"pushed_at":"2019-10-08T20:42:09.000Z","size":17,"stargazers_count":64,"open_issues_count":12,"forks_count":11,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-02T00:07:14.206Z","etag":null,"topics":["css","css-in-js","postcss","reactjs","styled-jsx","zeit"],"latest_commit_sha":null,"homepage":null,"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/giuseppeg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"giuseppeg"}},"created_at":"2017-01-04T18:05:45.000Z","updated_at":"2022-08-03T03:48:58.000Z","dependencies_parsed_at":"2022-09-05T22:30:56.635Z","dependency_job_id":null,"html_url":"https://github.com/giuseppeg/styled-jsx-postcss","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giuseppeg%2Fstyled-jsx-postcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giuseppeg%2Fstyled-jsx-postcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giuseppeg%2Fstyled-jsx-postcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giuseppeg%2Fstyled-jsx-postcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/giuseppeg","download_url":"https://codeload.github.com/giuseppeg/styled-jsx-postcss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248621628,"owners_count":21134893,"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","css-in-js","postcss","reactjs","styled-jsx","zeit"],"created_at":"2024-07-29T19:31:57.064Z","updated_at":"2025-04-14T22:36:01.671Z","avatar_url":"https://github.com/giuseppeg.png","language":"JavaScript","funding_links":["https://github.com/sponsors/giuseppeg"],"categories":["JavaScript"],"sub_categories":[],"readme":"# styled-jsx-postcss\n\n[![Build Status](https://travis-ci.org/giuseppeg/styled-jsx-postcss.svg?branch=master)](https://travis-ci.org/giuseppeg/styled-jsx-postcss)\n[![npm](https://img.shields.io/npm/v/styled-jsx-postcss.svg)](https://www.npmjs.com/package/styled-jsx-postcss)\n\nUse [PostCSS](https://github.com/postcss/postcss) with [styled-jsx](https://github.com/zeit/styled-jsx) 💥\n\n### 🎉 styled-jsx now supports plugins 🎉\nIf you are using styled-jsx 2+, please direct your attention to https://github.com/giuseppeg/styled-jsx-plugin-postcss\n\n### ⚠️ Development is frozen ⚠️\nDue to the lack of time I am not able to maintain this project anymore therefore this project would likely lock you to `styled-jsx ^0.5.7`. As always contributions are more than welcome and I can provide support! FWIW I submitted a proposal to make styled-jsx itself pluggable see ~~zeit/styled-jsx/pull/190~~ https://github.com/zeit/styled-jsx/pull/291\n\n## Usage\n\nInstall the package first.\n\n```bash\nnpm install --save styled-jsx-postcss\n```\n\nNext, add `styled-jsx-postcss/babel` to `plugins` in your babel configuration:\n\n```json\n{\n  \"plugins\": [\n    \"styled-jsx-postcss/babel\"\n  ]\n}\n```\n\n#### Notes\n\n`styled-jsx-postcss` extends `styled-jsx` therefore you don't need to include both – just add `styled-jsx-postcss` and you're ready to rock!\n\nAlso keep in mind that the PostCSS transformations run on `styled-jsx` transformed code.\n\nIf you're already using `styled-jsx` and don't want to rename all the `import` and/or `require` you can define an alias with webpack (and other module bundlers I believe) like so:\n\n```js\nmodule.exports = {\n  resolve: {\n    alias: {\n      'styled-jsx': 'styled-jsx-postcss'\n    }\n  },\n  // ...\n}\n```\n\n## Plugins\n\n`styled-jsx-postcss` uses [`postcss-load-plugins`](https://www.npmjs.com/package/postcss-load-plugins) therefore you may want to refer to their docs to learn more about [adding plugins](https://www.npmjs.com/package/postcss-load-plugins#packagejson)\n\n## styled-jsx api\n\n`styled-jsx-postcss` exports all of the modules from `styled-jsx`.\n\nThis mean that you can include `styled-jsx-postcss/server` or `styled-jsx-postcss/style` like you would do with Zeit's `styled-jsx`!\n\nRead [the styled-jsx docs](https://github.com/zeit/styled-jsx#readme).\n\n## Credits\n\n\u003c3 goes to\n\n* the [Zeit](https://zeit.co) team and the [authors of `styled-jsx`](https://github.com/zeit/styled-jsx/#authors).\n* the [PostCSS](https://github.com/postcss/postcss) authors, org and community\n* [Michael Ciniawsky](https://github.com/michael-ciniawsky) for making postcss-load-plugins\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgiuseppeg%2Fstyled-jsx-postcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgiuseppeg%2Fstyled-jsx-postcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgiuseppeg%2Fstyled-jsx-postcss/lists"}