{"id":17087829,"url":"https://github.com/dan-lee/glamor-jss","last_synced_at":"2025-04-12T21:08:51.631Z","repository":{"id":29438677,"uuid":"121708800","full_name":"dan-lee/glamor-jss","owner":"dan-lee","description":"Use glamor flavored CSS with jss under the hood…","archived":false,"fork":false,"pushed_at":"2023-11-20T16:48:55.000Z","size":1492,"stargazers_count":22,"open_issues_count":45,"forks_count":5,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-12T21:08:37.040Z","etag":null,"topics":["cssinjs","cssom","glamor","jss"],"latest_commit_sha":null,"homepage":"https://glamor-jss.now.sh/","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/dan-lee.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2018-02-16T02:46:52.000Z","updated_at":"2024-04-26T01:17:22.000Z","dependencies_parsed_at":"2023-02-14T01:00:40.341Z","dependency_job_id":"2c132308-ab74-49d7-8115-33231b8fe7ed","html_url":"https://github.com/dan-lee/glamor-jss","commit_stats":{"total_commits":221,"total_committers":5,"mean_commits":44.2,"dds":"0.18552036199095023","last_synced_commit":"2895d2840c6557c321fab57bcd1db0305095d7ad"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dan-lee%2Fglamor-jss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dan-lee%2Fglamor-jss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dan-lee%2Fglamor-jss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dan-lee%2Fglamor-jss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dan-lee","download_url":"https://codeload.github.com/dan-lee/glamor-jss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248631676,"owners_count":21136562,"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":["cssinjs","cssom","glamor","jss"],"created_at":"2024-10-14T13:35:05.139Z","updated_at":"2025-04-12T21:08:51.610Z","avatar_url":"https://github.com/dan-lee.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# glamor-jss\n\n[![Build Status](https://travis-ci.org/dan-lee/glamor-jss.svg?branch=master)](https://travis-ci.org/dan-lee/glamor-jss)\n\nUse [`glamor`](https://github.com/threepointone/glamor) flavored CSS with [`jss`](https://github.com/cssinjs/jss) under the hood…\n\n## Install\n\n```sh\nyarn add glamor-jss\n```\n\n## Features\n\n* 📦 Zero configuration *(just like glamor)*.\n* ⚡️ Server side rendering ready.\n* 💭 Caching mechanisms\n* 🕸 Hoist static style rules with babel plugin.\n* 🏎💨 [Blazing fast](https://github.com/cssinjs/jss/blob/master/docs/performance.md), thanks to JSS behind scenes.\n* 📝 Well tested\n\n## Reasoning\n\nI'm a big fan of `glamor`.\nUnfortunately it seems like a stale project, but I don't want to give up on it just yet.  my idea was to keep the simple and hands on usage of glamor and back it up with something bigger in the background.\n\nThat's why I created `glamor-jss`. It's not a plugin but more kind of like a wrapper around it.\n\nI wanted it to be fast. And I wanted it to be smart.\n\nOf course I couldn't lift these heavy tasks all alone. I did some thorough research to back up this project with a bunch of great other projects:\n\n* [`hash-it`](https://github.com/planttheidea/hash-it): fast object hashing to cache the 💩 out of it.\n* [`memoize-weak`](https://github.com/timkendrick/memoize-weak): combined with the hoisting plugin for babel this produces even better caching possibilites (uses `WeakMap` if possible).\n\nand of course, let's not forget\n\n* [`jss`](https://github.com/cssinjs/jss): Does all the heavy lifting in the `CSSOM`\n\nThis is by no means feature complete and only supports the CSS object definition (e.g.: `css({ width: 100 })`) for now. I don't plan to support string templates.\n\nAPI wise for now it supports:\n\n* `css` object spreading\n* `css` as class names\n* `css.keyframes`\n* Babel hoisting (`glamor-jss/hoist`)\n* `renderToString` Server side rendering \n\nThis is all I needed for now, but I am happy to extend it further or accept PRs\n\n### Just want to try it out?\n\nThere's a [codeshift](https://github.com/facebook/jscodeshift) which will replace all `glamor` imports with `glamor-jss` imports.  \nBe aware that only a limited set of the glamor API is available (see above).\n\nJust run\n\n```sh\njscodeshift -t glamor-jss/codeshift.js src\n```\n\n## Usage\n\n🎊 **[See the demo](https://glamor-jss.now.sh)** 🎉 (and the [according source](example/src))\n\nFor further documentation on how to declare styles, I'd like to refer to the [glamor API guidelines](https://github.com/threepointone/glamor/blob/master/docs/api.md).\n\n\n### 🍨 Vanilla\n```js\nimport css from 'glamor-jss'\n// oldschool require:\n// const css = require('glamor-jss').default\n\nconst myClass = css({ color: 'red' })\ndocument.body.innerHTML = `\u003cdiv class=\"${myClass}\"\u003eRED 🎈\u003c/div\u003e`\n```\n\n### 🔋 React\n\n```jsx\nimport React from 'react'\nimport { css } from 'glamor-jss'\n\nconst AwesomeComponent = () =\u003e (\n  \u003cdiv {...css({ color: 'red' )}\u003eRED 🎈\u003c/div\u003e\n\n  // or as CSS class:\n  // \u003cdiv className={css({ color: 'red' )} /\u003e\n)\n```\n\n### 💁‍♀️ Server side rendering (SSR)\n\nIt's easy to add the generated styles on the server side (see [`example/src/server.js`](example/src/server.js)):\n\n```js\n// …\nimport ReactDOMServer from 'react-dom/server'\nimport { renderToString } from 'glamor-jss'\n\n// … eventually\nconst html = ReactDOMServer.renderToString(\u003cApp /\u003e)\nresponse.send(`\n  \u003c!doctype html\u003e\n  \u003chtml\u003e\n    \u003cstyle id=\"ssr\"\u003e${renderToString()}\u003c/style\u003e\n    \u003cdiv id=\"root\"\u003e${html}\u003c/div\u003e\n  \u003c/html\u003e\n`)\n```\n\nOn client side you can then easily remove this style tag (see [`example/src/client.js`](example/src/client.js)):\n\n```js\nReactDOM.hydrate(\u003cApp /\u003e, document.getElementById('root'), () =\u003e {\n  const ssr = document.getElementById('ssr')\n  ssr.parentNode.removeChild(ssr)\n})\n```\n\n### 🐠 Babel plugin\n\n```json\n// .babelrc\n{\n  \"plugins\": [\"glamor-jss/hoist\"]\n}\n```\n\n**What does it do?** 🤔\n\nEvery statically declared rule will be moved to the outermost scope. This opens up the possibility for heavy caching.\n\nFor example:\n\n**In**\n\n```js\nimport css from 'glamor-jss'\n\nconst Component = props =\u003e (\n  \u003cdiv {...css({ width: 100, height: 100 })}\u003e\n    \u003cdiv {...css({ ':after': { content: \"'*'\" } })} /\u003e\n\t\u003cdiv {...css({ background: props.background })} /\u003e\n  \u003c/div\u003e\n)\n```\n\n**Out**\n\n```js\nimport css from 'glamor-jss'\n\nvar _ref = { width: 100, height: 100 };\nvar _ref2 = { ':after': { content: \"'*'\" } };\n\nconst Component = props =\u003e (\n  \u003cdiv {...css(_ref)}\u003e\n    \u003cdiv {...css(_ref2)} /\u003e\n\t\u003cdiv {...css({ background: props.background })} /\u003e\n  \u003c/div\u003e\n)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdan-lee%2Fglamor-jss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdan-lee%2Fglamor-jss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdan-lee%2Fglamor-jss/lists"}