threepointone / Glam
crazy good css in your js
Stars: ✭ 485
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Glam
Babel Blade
(under new management!) ⛸️Solve the Double Declaration problem with inline GraphQL. Babel plugin/macro that works with any GraphQL client!
Stars: ✭ 266 (-45.15%)
Mutual labels: babel-plugin
Style9
CSS-in-JS compiler inspired by Facebook's stylex
Stars: ✭ 314 (-35.26%)
Mutual labels: babel-plugin
Reflective Bind
Eliminate wasteful re-rendering in React components caused by inline functions
Stars: ✭ 366 (-24.54%)
Mutual labels: babel-plugin
Babel Plugin Module Resolver
Custom module resolver plugin for Babel
Stars: ✭ 3,134 (+546.19%)
Mutual labels: babel-plugin
Babel Plugin Css Modules Transform
Extract css class names from required css module files, so we can render it on server.
Stars: ✭ 318 (-34.43%)
Mutual labels: babel-plugin
babel-plugin-syntax-pipeline
Allow parsing of pipeline operator |>
Stars: ✭ 23 (-95.26%)
Mutual labels: babel-plugin
Babel Plugin React Intl
Extracts string messages from React components that use React Intl.
Stars: ✭ 430 (-11.34%)
Mutual labels: babel-plugin
Babel Plugin Typescript To Proptypes
Generate React PropTypes from TypeScript interfaces or type aliases.
Stars: ✭ 291 (-40%)
Mutual labels: babel-plugin
Babel Plugin Import Graphql
Enables import syntax for .graphql and .gql files
Stars: ✭ 284 (-41.44%)
Mutual labels: babel-plugin
Graphql Let
A layer to start/scale the use of GraphQL code generator.
Stars: ✭ 282 (-41.86%)
Mutual labels: babel-plugin
Babel Plugin Tailwind Components
Use Tailwind with any CSS-in-JS library
Stars: ✭ 320 (-34.02%)
Mutual labels: babel-plugin
Babel Plugin Console
Babel Plugin that adds useful build time console functions 🎮
Stars: ✭ 278 (-42.68%)
Mutual labels: babel-plugin
I18nize React
Internationalize react apps within a lunch break
Stars: ✭ 389 (-19.79%)
Mutual labels: babel-plugin
Vuera
👀 Vue in React, React in Vue. Seamless integration of the two. 👯
Stars: ✭ 3,631 (+648.66%)
Mutual labels: babel-plugin
Babel Plugin Sitrep
Log all assignments and the return value of a function with a simple comment
Stars: ✭ 442 (-8.87%)
Mutual labels: babel-plugin
Faster.js
faster.js is a Babel plugin that compiles idiomatic Javascript to faster, micro-optimized Javascript.
Stars: ✭ 429 (-11.55%)
Mutual labels: babel-plugin
Babel Plugin React Remove Properties
Babel plugin for removing React properties. 💨
Stars: ✭ 327 (-32.58%)
Mutual labels: babel-plugin
glam
[work in progress]
“It's like giving a glass of ice water to somebody in hell"
yarn add glam
or npm install glam
// copy paste this at the top of your file
/* @jsx glam */
import glam from 'glam'
// and then write css as inline objects
<div css={{
color: 'red',
':hover': {
color: 'blue'
}
}}>
hello world!
</div>
motivation
I made it for me. You might like it. It's the core experience of glamor, trimmed down and optimised for react.
- fast, small
- great for prototyping / design systems
- objects everywhere
- compose with arrays
- easy to migrate to/from another system
object format
key: value
key : [...fallbacks]
<selector> : {...}
@media <query>: {...}
@supports: {...}
- nest it however you want
- (todo)
@keyframes: {...}
- (todo)
@font-face: {...}
composition
- objects everywhere
- nested selectors
- arrays to join efficiently
- whatever pattern you want on top - bem, itcss, oocss, sc, jsxstyle, whatever
debugging / tools / dx
[todo]
tradeoffs
- memory - glam maintains a hierarchical WeakMap cache for the parser, and a Set of inserted ids.
- runtime - about 8k gz
- added bundle size of having your styles as objects
- learning curve
how does it work?
[todo]
how is it different
- typed
- streaming ssr support
- (todo) iframes
- (todo) wc (via skate?)
- (todo) safe
server rendering
glam should 'just work' with react v16, streaming and all.
[todo] - when hydrating on the client side, use glam/hydrate
.
[todo - v15 shim]
[maybe?]
global
- react-native/ vr
- static extraction
scoped
- 'virtual'
- parser/generator plugins
- houdini
- reset.css
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].