{"id":15504276,"url":"https://github.com/kentcdodds/css-in-js-precompiler","last_synced_at":"2025-04-23T00:09:14.675Z","repository":{"id":66052714,"uuid":"89640481","full_name":"kentcdodds/css-in-js-precompiler","owner":"kentcdodds","description":"WORK IN PROGRESS: Precompiles CSS-in-JS objects to CSS strings","archived":false,"fork":false,"pushed_at":"2021-01-25T23:13:06.000Z","size":119,"stargazers_count":69,"open_issues_count":2,"forks_count":2,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-23T00:09:05.994Z","etag":null,"topics":["babel","css-in-js","make-alex-happy"],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/css-in-js-precompiler","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/kentcdodds.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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":"2017-04-27T21:06:31.000Z","updated_at":"2025-01-04T02:33:00.000Z","dependencies_parsed_at":"2023-04-16T21:17:06.414Z","dependency_job_id":null,"html_url":"https://github.com/kentcdodds/css-in-js-precompiler","commit_stats":{"total_commits":19,"total_committers":1,"mean_commits":19.0,"dds":0.0,"last_synced_commit":"03dee9e9880ca80da67a84fea93766d21a406122"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Fcss-in-js-precompiler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Fcss-in-js-precompiler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Fcss-in-js-precompiler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kentcdodds%2Fcss-in-js-precompiler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kentcdodds","download_url":"https://codeload.github.com/kentcdodds/css-in-js-precompiler/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250343947,"owners_count":21415040,"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":["babel","css-in-js","make-alex-happy"],"created_at":"2024-10-02T09:16:58.458Z","updated_at":"2025-04-23T00:09:14.654Z","avatar_url":"https://github.com/kentcdodds.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# css-in-js-precompiler\n\nPrecompiles static CSS-in-JS objects to CSS strings\n\n**CURRENTLY A WORK IN PROGRESS**\n\n\u003c!--\nWHEN IT'S RELEASED WE CAN COMMENT THIS BACK IN :)\n[![Build Status][build-badge]][build]\n[![Code Coverage][coverage-badge]][coverage]\n[![Dependencies][dependencyci-badge]][dependencyci]\n[![version][version-badge]][package]\n[![downloads][downloads-badge]][npm-stat]\n[![MIT License][license-badge]][LICENSE]\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)\n[![PRs Welcome][prs-badge]][prs]\n[![Donate][donate-badge]][donate]\n[![Code of Conduct][coc-badge]][coc]\n[![Roadmap][roadmap-badge]][roadmap]\n[![Examples][examples-badge]][examples]\n\n[![Watch on GitHub][github-watch-badge]][github-watch]\n[![Star on GitHub][github-star-badge]][github-star]\n[![Tweet][twitter-badge]][twitter]\n--\u003e\n\n## The problem\n\nYou love the benefits of CSS-in-JS, but don't love some of the performance\ncharacteristics and trade-offs you have to make with regards to not using actual\nCSS files.\n\n## This solution\n\nThis module takes in your source code and gives you back the source code with\nthe literal CSS-in-JS objects swapped for class names as well as the generated\nCSS. You can then use that to create a css file and deploy that.\n\n**It's still pretty early stages**\n\n## Installation\n\n\u003c!--\nWHEN IT'S RELEASED WE CAN COMMENT THIS BACK IN.\nThis module is distributed via [npm][npm] which is bundled with [node][node] and\nshould be installed as one of your project's `devDependencies`:\n\n```\nnpm install --save-dev css-in-js-precompiler\n```\n--\u003e\n\nThis is not yet published. But you can install it anyway with:\n\n```\nnpm install kentcdodds/css-in-js-precompiler\ncd node_modules/css-in-js-precompiler\nnpm install\nnpm start build\n```\n\nAnd you should be able to use it now :)\n\n## Usage\n\nThis is still under development so the API and assumptions are going to change.\nBut right now, we're naïvely assuming you're using `glamorous`. _But this\nsolution will be modified to work with **any** CSS-in-JS library you're using_.\n\n```javascript\nconst precompileCSSInJS = require('css-in-js-precompiler')\nconst options = {\n  sources: [\n    {\n      code: `import glamorous from 'glamorous';\\nglamorous.div({fontSize: 23})`,\n      filename: '/some/path.js',\n      babelOptions: {/* optional. Shallowly merges with the default babelOptions */}\n    },\n  ],\n}\n\nconst result = precompileCSSInJS(options)\nresult.transformed[0].code === `import glamorous from 'glamorous';\\nglamorous.div(\"css-my79es\");`\nresult.transformed[0].map === '\u003cthe code source map\u003e'\nresult.css === '.css-my79es,[data-css-my79es]{font-size:23px;}'\n```\n\n### options\n\n#### `sources`\n\nThis is an array of `SourceObjects` which will be used to determine what source\nto precompile and how. Here are the available properties on these objects:\n\n#### code\n\nThis is the source code to actually precompile. If this is not provided, then\nthe code will be derived from the `filename`.\n\n##### filename\n\nThis is a string path to the filename. If the `code` is not provided, this will\nbe used to read the file. If this is not provided, then you will be unable to\nhandle importing dynamic values from other files.\n\n#### babelOptions\n\nThis is the same thing you would pass to `babel.transform` if you were calling\nit yourself. Read more [here](http://babeljs.io/docs/core-packages/#options).\nThis will be shallowly merged with the default `babelOptions`. Currently\n(2017-05-03) the default babelOptions are:\n\n```javascript\n{\n  babelrc: false,\n  sourceMaps: true,\n  plugins: [/* our custom plugin to do this extraction */],\n  parserOpts: {plugins: [/* all of them except estree */]},\n}\n```\n\nThis is shallowly merged, with the exception of `plugins`. You can specify any\nplugins you want and we'll make sure we always include our own plugin to do\nthe precompiling. (You're welcome).\n\n## Inspiration\n\nI started thinking about this around [here][inspiration-link].\n\n## Other Solutions\n\nI'm not aware of any, if you are please [make a pull request][prs] and add it\nhere!\n\n## Contributors\n\nThanks goes to these people ([emoji key][emojis]):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n| [\u003cimg src=\"https://avatars.githubusercontent.com/u/1500684?v=3\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003eKent C. Dodds\u003c/sub\u003e](https://kentcdodds.com)\u003cbr /\u003e[💻](https://github.com/kentcdodds/css-in-js-precompiler/commits?author=kentcdodds) [📖](https://github.com/kentcdodds/css-in-js-precompiler/commits?author=kentcdodds) 🚇 [⚠️](https://github.com/kentcdodds/css-in-js-precompiler/commits?author=kentcdodds) |\n| :---: |\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors][all-contributors] specification.\nContributions of any kind welcome!\n\n## LICENSE\n\nMIT\n\n[npm]: https://www.npmjs.com/\n[node]: https://nodejs.org\n[build-badge]: https://img.shields.io/travis/kentcdodds/css-in-js-precompiler.svg?style=flat-square\n[build]: https://travis-ci.org/kentcdodds/css-in-js-precompiler\n[coverage-badge]: https://img.shields.io/codecov/c/github/kentcdodds/css-in-js-precompiler.svg?style=flat-square\n[coverage]: https://codecov.io/github/kentcdodds/css-in-js-precompiler\n[dependencyci-badge]: https://dependencyci.com/github/kentcdodds/css-in-js-precompiler/badge?style=flat-square\n[dependencyci]: https://dependencyci.com/github/kentcdodds/css-in-js-precompiler\n[version-badge]: https://img.shields.io/npm/v/css-in-js-precompiler.svg?style=flat-square\n[package]: https://www.npmjs.com/package/css-in-js-precompiler\n[downloads-badge]: https://img.shields.io/npm/dm/css-in-js-precompiler.svg?style=flat-square\n[npm-stat]: http://npm-stat.com/charts.html?package=css-in-js-precompiler\u0026from=2016-04-01\n[license-badge]: https://img.shields.io/npm/l/css-in-js-precompiler.svg?style=flat-square\n[license]: https://github.com/kentcdodds/css-in-js-precompiler/blob/master/other/LICENSE\n[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prs]: http://makeapullrequest.com\n[donate-badge]: https://img.shields.io/badge/$-support-green.svg?style=flat-square\n[donate]: http://kcd.im/donate\n[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square\n[coc]: https://github.com/kentcdodds/css-in-js-precompiler/blob/master/other/CODE_OF_CONDUCT.md\n[roadmap-badge]: https://img.shields.io/badge/%F0%9F%93%94-roadmap-CD9523.svg?style=flat-square\n[roadmap]: https://github.com/kentcdodds/css-in-js-precompiler/blob/master/other/ROADMAP.md\n[examples-badge]: https://img.shields.io/badge/%F0%9F%92%A1-examples-8C8E93.svg?style=flat-square\n[examples]: https://github.com/kentcdodds/css-in-js-precompiler/blob/master/other/EXAMPLES.md\n[github-watch-badge]: https://img.shields.io/github/watchers/kentcdodds/css-in-js-precompiler.svg?style=social\n[github-watch]: https://github.com/kentcdodds/css-in-js-precompiler/watchers\n[github-star-badge]: https://img.shields.io/github/stars/kentcdodds/css-in-js-precompiler.svg?style=social\n[github-star]: https://github.com/kentcdodds/css-in-js-precompiler/stargazers\n[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20css-in-js-precompiler!%20https://github.com/kentcdodds/css-in-js-precompiler%20%F0%9F%91%8D\n[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/kentcdodds/css-in-js-precompiler.svg?style=social\n[emojis]: https://github.com/kentcdodds/all-contributors#emoji-key\n[all-contributors]: https://github.com/kentcdodds/all-contributors\n[inspiration-link]: https://github.com/paypal/glamorous/issues/43#issuecomment-294153104\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkentcdodds%2Fcss-in-js-precompiler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkentcdodds%2Fcss-in-js-precompiler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkentcdodds%2Fcss-in-js-precompiler/lists"}