atlassian-labs / Compiled
Licence: apache-2.0
A familiar and performant compile time CSS-in-JS library for React.
Stars: ✭ 1,235
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Compiled
Astexplorer.app
https://astexplorer.net with ES Modules support and Hot Reloading
Stars: ✭ 65 (-94.74%)
Mutual labels: webpack, babel, babel-plugin
Babel Plugin Tailwind Components
Use Tailwind with any CSS-in-JS library
Stars: ✭ 320 (-74.09%)
Mutual labels: babel, babel-plugin, css-in-js
Xwind
Tailwind CSS as a templating language in JS and CSS-in-JS
Stars: ✭ 249 (-79.84%)
Mutual labels: babel, babel-plugin, css-in-js
Postjss
Use the power of PostCSS in compiling with JSS
Stars: ✭ 40 (-96.76%)
Mutual labels: babel, babel-plugin, css-in-js
Babel Plugin Prismjs
A babel plugin to use PrismJS with standard bundlers.
Stars: ✭ 114 (-90.77%)
Mutual labels: webpack, babel, babel-plugin
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 (-95.55%)
Mutual labels: webpack, babel-plugin, css-in-js
Esbuild Loader
⚡️ Speed up your Webpack build with esbuild
Stars: ✭ 1,245 (+0.81%)
Mutual labels: webpack, babel
Eleventy Webpack
A barebone Eleventy and Webpack boilerplate 🎈
Stars: ✭ 68 (-94.49%)
Mutual labels: webpack, babel
Babel Plugin Partial Application
[DEPRECATED] Please use https://github.com/citycide/param.macro
Stars: ✭ 60 (-95.14%)
Mutual labels: babel, babel-plugin
Starter React Flux
Generate your React PWA project with TypeScript or JavaScript
Stars: ✭ 65 (-94.74%)
Mutual labels: webpack, babel
Threejs Es6 Webpack Starter
Three.js ES6 starter project with a sane webpack configuration
Stars: ✭ 85 (-93.12%)
Mutual labels: webpack, babel
Sowing Machine
🌱A React UI toolchain & JSX alternative
Stars: ✭ 64 (-94.82%)
Mutual labels: babel, babel-plugin
Tkframework
react + relay + redux + saga + graphql + webpack
Stars: ✭ 83 (-93.28%)
Mutual labels: webpack, babel
React Starter Kit
React Starter Kit - Fiercely quick front-end boilerplate and workflows, React.js, Babel, PostCSS, Webpack
Stars: ✭ 61 (-95.06%)
Mutual labels: webpack, babel
Vue Web Extension
🛠️ A Vue CLI 3+ preset (previously a Vue CLI 2 boilerplate) for quickly starting a web extension with Vue, Babel, ESLint and more!
Stars: ✭ 1,147 (-7.13%)
Mutual labels: webpack, babel
Template.js
A javascript template engine, simple, easy & extras, support webpack, rollup, parcel, browserify, fis and gulp
Stars: ✭ 1,201 (-2.75%)
Mutual labels: webpack, parcel
Babel Plugin Captains Log
Babel plugin that injects helpful details into console statements
Stars: ✭ 80 (-93.52%)
Mutual labels: babel, babel-plugin
Compiled
A familiar and performant compile time CSS-in-JS library for React.
Usage
import { styled, ClassNames } from '@compiled/react';
// Tie styles to an element
<div css={{ color: 'purple' }} />
// Create a component that ties styles to an element
const StyledButton = styled.button`
color: ${(props) => props.color};
`;
// Use a component where styles are not necessarily tied to an element
<ClassNames>
{({ css }) => children({ className: css({ fontSize: 12 }) })}
</ClassNames>
Installation
Install the React package.
npm install @compiled/react
Then configure your bundler of choice or use Babel directly.
Webpack
Install the Webpack loader.
npm install @compiled/webpack-loader --save-dev
See installation for more information.
Parcel
Note
Parcel v2 is currently in pre-release which makes this transformer experimental, it may break when updating Parcel. Use with caution.
Install the Parcel v2 transformer.
npm install @compiled/parcel-transformer --save-dev
See installation for more information.
Babel
Install the Babel plugin.
npm install @compiled/babel-plugin --save-dev
See installation for more information.
Contributions
Contributions are welcomed! Please see CONTRIBUTING.md to get started.
Thanks
Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.
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].