Hydrophobefireman / Catom
Licence: mit
A 0 runtime CSS in JS library
Stars: ✭ 84
Programming Languages
javascript
184084 projects - #8 most used programming language
typescript
32286 projects
Labels
Projects that are alternatives of or similar to Catom
Astexplorer.app
https://astexplorer.net with ES Modules support and Hot Reloading
Stars: ✭ 65 (-22.62%)
Mutual labels: babel, babel-plugin
Postjss
Use the power of PostCSS in compiling with JSS
Stars: ✭ 40 (-52.38%)
Mutual labels: babel, babel-plugin
Babel Plugin Transform React Remove Prop Types
Remove unnecessary React propTypes from the production build. 🎈
Stars: ✭ 890 (+959.52%)
Mutual labels: babel, babel-plugin
Faster.js
faster.js is a Babel plugin that compiles idiomatic Javascript to faster, micro-optimized Javascript.
Stars: ✭ 429 (+410.71%)
Mutual labels: babel, babel-plugin
Babel Plugin Optimize Clsx
Babel plugin to optimize the use of clsx, classnames, and other libraries with a compatible API
Stars: ✭ 80 (-4.76%)
Mutual labels: babel, babel-plugin
Babel Plugin Sitrep
Log all assignments and the return value of a function with a simple comment
Stars: ✭ 442 (+426.19%)
Mutual labels: babel, babel-plugin
Sowing Machine
🌱A React UI toolchain & JSX alternative
Stars: ✭ 64 (-23.81%)
Mutual labels: babel, 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 (+278.57%)
Mutual labels: babel, babel-plugin
Babel Plugin Css Prop
Babel plugin to transpile `css` prop to a styled component. (Experimental)
Stars: ✭ 56 (-33.33%)
Mutual labels: babel, babel-plugin
Babel Plugin Root Import
Add the opportunity to import modules by the root path
Stars: ✭ 1,084 (+1190.48%)
Mutual labels: babel, babel-plugin
I18nize React
Internationalize react apps within a lunch break
Stars: ✭ 389 (+363.1%)
Mutual labels: babel, babel-plugin
Babel Plugin Partial Application
[DEPRECATED] Please use https://github.com/citycide/param.macro
Stars: ✭ 60 (-28.57%)
Mutual labels: babel, babel-plugin
Babel Plugin React Remove Properties
Babel plugin for removing React properties. 💨
Stars: ✭ 327 (+289.29%)
Mutual labels: babel, babel-plugin
Htm
Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.
Stars: ✭ 7,299 (+8589.29%)
Mutual labels: babel, babel-plugin
Babel Plugin Tailwind Components
Use Tailwind with any CSS-in-JS library
Stars: ✭ 320 (+280.95%)
Mutual labels: babel, babel-plugin
Babel Plugin Styled Components
Improve the debugging experience and add server-side rendering support to styled-components
Stars: ✭ 878 (+945.24%)
Mutual labels: babel, babel-plugin
Babel Plugin Module Resolver
Custom module resolver plugin for Babel
Stars: ✭ 3,134 (+3630.95%)
Mutual labels: babel, babel-plugin
Effectfuljs
JavaScript embedded effects compiler
Stars: ✭ 287 (+241.67%)
Mutual labels: babel, babel-plugin
Xwasm
[Work In Progress] WebAssembly Packager and WASM tooling for modern frontend
Stars: ✭ 45 (-46.43%)
Mutual labels: babel, babel-plugin
Tinker.macro
Evaluate Laravel code at build-time, via Laravel Tinker
Stars: ✭ 56 (-33.33%)
Mutual labels: babel, babel-plugin
Catom
A 0 runtime css in js css tool
Stage: Pre Alpha (Caveats)
Catom allows you to write CSS in your javascript/typescript file and creates highly optimized CSS out of it.
Each rule creates a unique class definition out of it and it gives you 100% freedom about where to put your generated css bundle.
Your javascript code has 0 references to any styles and all that's left is are the compiled hashed clasnames as a string.
It's framework agnostic as it emits pure CSS and leaves out just the classnames
Example
somewhere in our App.js
import { css } from "catom";
const styledButton = css({
color: "#ff0000",
borderRadius: "5px",
padding: "4px",
});
const styledDiv = css({ color: "blue", borderRadius: "5px", padding: "4px" });
function App() {
return (
<div className={styledDiv}>
<button className={styledButton}>Hi</button>
</div>
);
}
Css generated:
._6da32 {
color: #ff0000;
}
.quva1q {
border-radius: 5px;
}
._2rlxtj {
padding: 4px;
}
._14ksm7b {
color: blue;
}
App.js:
const styledButton = "_6da32 quva1q _2rlxtj";
const styledDiv = "_14ksm7b quva1q _2rlxtj";
....
As we had only 4 unique rules, catom generated only 4 classes.
Catom also supports media queries and pseudo properties passing them in an object
const mediaQuery = css({
media: { "only screen and (max-width:500px)": { color: "red" } },
});
const pseudoQuery = css({ pseudo: { ":hover": { color: "green" } } });
Installation and Usage
Install using npm or yarn
npm i catom -D
In your babel config:
{
"plugins": [
"catom/babelPlugin"
`....
]
}
As catom doesn't really interact with your build tool at all, it's your job to inject the generated style.
Here's an example of how you can use it with HTMLWebpackPlugin.
webpack.confg.js
const { emitCSS } = require("catom/css");
// ...
module.exports = {
plugins: [
new HtmlWebpackPlugin({
templateParameters: async function templateParametersGenerator(
compilation,
files,
tags,
options
) {
return {
compilation,
webpackConfig: compilation.options,
htmlWebpackPlugin: {
tags,
files,
options: Object.assign(options, {
emitCSS,
}),
},
};
},
}),
],
};
and then inject it using a template parameter.
<head>
<style>
<%= htmlWebpackPlugin.options.emitCSS() %>
</style>
</head>
it also allows you to use postCSS plugins by importing the transformCSS and/or autoPrefixCSS functions
0 Runtime
Catom ships with 0 js code in your bundle. In fact the first thing the babel transform does, is to remove all imports of the css function from your code.
Caveats
- It's just something I threw together because I wanted it for a project
- Not even close to production ready
- Since it works with AST, it does not allow you to use variable in the values (In work)
- No support for keyframes as of now
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].