{"id":13494604,"url":"https://github.com/threepointone/glam","last_synced_at":"2025-04-05T22:08:09.239Z","repository":{"id":66100084,"uuid":"89388866","full_name":"threepointone/glam","owner":"threepointone","description":"crazy good css in your js","archived":false,"fork":false,"pushed_at":"2018-04-25T15:36:20.000Z","size":1272,"stargazers_count":509,"open_issues_count":13,"forks_count":18,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-29T21:06:24.588Z","etag":null,"topics":["babel-plugin","css"],"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/threepointone.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-25T17:35:48.000Z","updated_at":"2024-12-18T07:41:32.000Z","dependencies_parsed_at":"2023-02-22T01:15:32.995Z","dependency_job_id":null,"html_url":"https://github.com/threepointone/glam","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/threepointone%2Fglam","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/threepointone%2Fglam/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/threepointone%2Fglam/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/threepointone%2Fglam/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/threepointone","download_url":"https://codeload.github.com/threepointone/glam/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247406090,"owners_count":20933803,"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-plugin","css"],"created_at":"2024-07-31T19:01:26.457Z","updated_at":"2025-04-05T22:08:09.140Z","avatar_url":"https://github.com/threepointone.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","库"],"sub_categories":[],"readme":"glam\n---\n\n[work in progress]\n\n“It's like giving a glass of ice water to somebody in hell\"\n\n`yarn add glam` or `npm install glam`\n\n```jsx\n// copy paste this at the top of your file\n/* @jsx glam */\nimport glam from 'glam'\n\n// and then write css as inline objects\n\n\u003cdiv css={{\n  color: 'red',\n  ':hover': {\n    color: 'blue'\n  }\n}}\u003e\n  hello world!\n\u003c/div\u003e\n```\n\n\nmotivation\n---\n\nI made it for me. You might like it. It's the core experience of glamor, trimmed down and optimised for react.\n\n- fast, small\n- great for prototyping / design systems\n- objects everywhere\n- compose with arrays\n- easy to migrate to/from another system\n\n\nobject format\n---\n\n- `key: value`\n- `key : [...fallbacks]`\n- `\u003cselector\u003e : {...}`\n- `@media \u003cquery\u003e: {...}`\n- `@supports: {...}`\n- nest it however you want\n- (todo) `@keyframes: {...}`\n- (todo) `@font-face: {...}`\n\n\ncomposition\n---\n\n- objects everywhere\n- nested selectors\n- arrays to join efficiently\n- whatever pattern you want on top - bem, itcss, oocss, sc, jsxstyle, whatever\n\n\ndebugging / tools / dx\n---\n\n[todo]\n\n\ntradeoffs\n---\n\n- memory - glam maintains a hierarchical WeakMap cache for the parser, and a Set of inserted ids.  \n- runtime - about 8k gz\n- added bundle size of having your styles as objects\n- learning curve\n\n\nhow does it work?\n---\n\n[todo]\n\n\nhow is it different\n---\n\n- typed\n- streaming ssr support\n- (todo) iframes\n- (todo) wc (via skate?)\n- (todo) safe\n\n\nserver rendering\n---\n\nglam should 'just work' with react v16, streaming and all.\n\n[todo] - when hydrating on the client side, use `glam/hydrate`.\n\n[todo - v15 shim]\n\n\n\n[maybe?]\n---\n\n- `global`\n- react-native/ vr\n- static extraction\n- `scoped`\n- 'virtual'\n- parser/generator plugins\n- houdini\n- reset.css\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthreepointone%2Fglam","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthreepointone%2Fglam","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthreepointone%2Fglam/lists"}