Every React component gets an inbuilt javascript constructor for functional logic.
Introducing the css constructor for styling!
import React from 'react';import css from 'css-constructor'; // 👶 Super tiny: only 1.2K gzipped! Component /* javascript constructor */ { ; } /* css constructor */ @css` // 🔒 Isolated and co-located font-size: 16px; text-align: center; // 🎀 Supports the entirety of CSS color: {this.props.color}; // 🔥 Use props in css display: flex; // 💻 Built in vendor prefixing &:hover { // 🌀 Pseudo selectors color: #FFF; } img { // 👪 Nested css border-radius: 50%; } #handle { margin-top: 20px; } @media (max-width: 600px) { // 📱 Media queries support & {font-size: 18px;} } ` { return <div> // 🔼 Attaches class to the highest element <img ="https://github.com/siddharthkp.png"/> <div ="handle">@siddharthkp</div> </div> }; // <Hello color='papayawhip'/>
--
Other features
🙋 Uses classes instead of inline styles
🔧 Editable in developer tools
👶 Super tiny: only 1.2K gzipped!
💄 Official library emoji
Coming soon
🌏 server side rendering
--
Usage
-
npm install css-constructor --save
-
import css from 'css-constructor'
-
Add a
@css
block just before therender
function (important) -
Add
transform-decorators-legacy
as the firstplugin
in your.babelrc
(already downloaded with 💄).
If you are not familiar with babel plugins
you can follow the detailed instructions here.
Or, if you would prefer using 💄 without adding the babel transform for decorators, up-vote this issue.
--
How does it work?
💄 uses ES7 class method decorators on the render function. Detailed post coming soon.
Inspiration
Heavily inspired from glamor, styled-components and radium
Special thanks to thysultan. stylis is the bomb!
Support
⭐️ this repo!