johanholmerin / Style9
Licence: mit
CSS-in-JS compiler inspired by Facebook's stylex
Stars: β 314
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Style9
Snackui
SnackUI π - the final React style library. With an *optimizing compiler* that lets you write views naturally, with easier DX, working on native and web at once, all while being faster than hand-rolling your own CSS.
Stars: β 55 (-82.48%)
Mutual labels: babel-plugin, css-in-js
Babel Plugin Tailwind Components
Use Tailwind with any CSS-in-JS library
Stars: β 320 (+1.91%)
Mutual labels: babel-plugin, css-in-js
Xwind
Tailwind CSS as a templating language in JS and CSS-in-JS
Stars: β 249 (-20.7%)
Mutual labels: babel-plugin, css-in-js
Postjss
Use the power of PostCSS in compiling with JSS
Stars: β 40 (-87.26%)
Mutual labels: babel-plugin, css-in-js
Compiled
A familiar and performant compile time CSS-in-JS library for React.
Stars: β 1,235 (+293.31%)
Mutual labels: babel-plugin, css-in-js
Emotion
π©βπ€ CSS-in-JS library designed for high performance style composition
Stars: β 14,177 (+4414.97%)
Mutual labels: babel-plugin, css-in-js
flair
a lean, component-centric style system for React components
Stars: β 19 (-93.95%)
Mutual labels: babel-plugin, css-in-js
React Magic
A collection of magic animations for react components.
Stars: β 264 (-15.92%)
Mutual labels: css-in-js
React Loadable
β³ A higher order component for loading components with promises.
Stars: β 16,238 (+5071.34%)
Mutual labels: babel-plugin
Vscode Stylelint
A Visual Studio Code extension to lint CSS/SCSS/Less with stylelint
Stars: β 260 (-17.2%)
Mutual labels: css-in-js
isotope
UI library that aims to bring simplicity and intuitiveness back to Web Development. π
Stars: β 52 (-83.44%)
Mutual labels: css-in-js
Babel Blade
(under new management!) βΈοΈSolve the Double Declaration problem with inline GraphQL. Babel plugin/macro that works with any GraphQL client!
Stars: β 266 (-15.29%)
Mutual labels: babel-plugin
Graphql Let
A layer to start/scale the use of GraphQL code generator.
Stars: β 282 (-10.19%)
Mutual labels: babel-plugin
Trousers
hooks-first CSS-in-JS library, focused on semantics and runtime performance
Stars: β 295 (-6.05%)
Mutual labels: css-in-js
Styletron
β‘ Toolkit for component-oriented styling
Stars: β 3,217 (+924.52%)
Mutual labels: css-in-js
Shevyjs
Configurable Vertical Rhythm & Typography in CSS-in-JS
Stars: β 292 (-7.01%)
Mutual labels: css-in-js
Babel Plugin Import Graphql
Enables import syntax for .graphql and .gql files
Stars: β 284 (-9.55%)
Mutual labels: babel-plugin
Babel Plugin Module Resolver
Custom module resolver plugin for Babel
Stars: β 3,134 (+898.09%)
Mutual labels: babel-plugin
style9
CSS-in-JS compiler inspired by Facebook's stylex, with near-zero runtime, atomic CSS extraction and TypeScript support. Framework agnostic.
Basic usage
For a complete walkthrough of the API, see Styling.
import style9 from 'style9';
const styles = style9.create({
blue: {
color: 'blue',
},
red: {
color: 'red'
}
});
document.body.className = styles('blue', isRed && 'red');
For the above input, the compiler will generate the following output:
/* JavaScript */
document.body.className = isRed ? 'cyyg6ey ' : 'c1r9f2e5 ';
/* CSS */
.c1r9f2e5 { color: blue }
.cyyg6ey { color: red }
Installation
# Yarn
yarn add style9
# npm
npm install style9
Compiler setup - required
The following is the minimally required Webpack setup for extracting styles to a CSS file. For Webpack options and Rollup, Next.js, Gatsby, and Babel plugins, see Bundler plugins.
const Style9Plugin = require('style9/webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
module: {
rules: [
{
test: /\.(tsx|ts|js|mjs|jsx)$/,
use: Style9Plugin.loader,
},
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
plugins: [
new Style9Plugin(),
new MiniCssExtractPlugin()
]
};
Documentation
Have a question?
Look at the FAQ, search the repo, or ask in discussions.
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].