Stressless CSS for components using JS. Write Component Based CSS with functional mixins.
MIT License
Stressless CSS for components using JS. Write Component Based CSS with functional mixins.
npm install --save rockey
# For React applications:
npm install --save rockey-react
Firstly, CSS in JS approach is the vanilla JS.
CSS in JS approach — is native JS. You don’t need additional tools to use or build it.
More details explained at Medium Post - CSS in JS. Rockey
Rockey could be used in any application.
rockey
rockey-react
rockey-css-parse
npm run minify
output:
Each time generate uniq class names with randomly generated hash. Same as css-modules.
Write CSS according your components structure. Use real components names for CSS rules instead of classes. Means that if you have component Card — use its name as CSS selector. If you have component PrimaryCard — use its name as CSS selector. Use nested selectors according to components structure.
Live demo: Card example
Each generated classname is clear and readable. The same components renders with same class names. It is very useful and сompatible with browser dev tools — change styles for one component will always apply changes for the rest of the same components.
Card {
CardHeader, CardFooter {
padding: 15px;
}
CardBody {
+ Button {
padding-left: 15px;
}
}
:hover {
border: 1px solid #000;
CardHeader {
background: yellow;
}
}
CardFooter {
background: purple;
@media (max-width: 600px) {
display: none
}
}
}
There is no needs to import specific function to render @media, keyframes, font-faces or pseudo classes like :hover or ::after. Support nested and multiple selectors.
Live demo with complex selectors: Material TextField
Rendering CSS string, generating CSS rules and inserting them into DOM is really fast. There is example React application with implemented different approaches: fela / jss / glamor / styled-components / rockey.
npm run best-results -- --size 10000
Note that rockey and postcss were developed for different tasks. Rockey parser configured for specific syntax and will never be able to replace postcss
Results could be found here.
rockey uses separated CSS classes for each rule and for each mixin. That is why it is very сompatible with devtools. When change CSS values of parent component via devtools — it will be applied for all children.
rockey-react example (works same as rockey.addParent):
import rockey from 'rockey-react';
const Button = rockey.button('Button')`
color: black;
${rockey.when('LargeButton', props => props.large)`
font-size: 20px;
`}
`;
const PrimaryButton = Button('PrimaryButton')`
color: blue;
`;
const SuperButton = PrimaryButton('SuperButton')`
color: red;
`;
Inserted CSS (after component is rendered):
.Button-{{ hash }} {
color: black;
}
.PrimaryButton-{{ hash }} {
color: blue;
}
.SuperButton-{{ hash }} {
color: red;
}
.Mixin-LargeButton-{{ hash }}.Button-{{ hash }} {
font-size: 20px;
}
And for <PrimaryButton large={true}/>
className prop will equal .PrimaryButton-{{ hash }} .Button-{{ hash }} .Mixin-LargeButton-{{ hash }}
.
That is why it is very сompatible with devtools. When change CSS values of parent component via devtools — it will be applied for all children.
If prop large is changed to false - only mixin class will be removed instead of all styles re-calculating. This is another reason why rockey is fast.
Button {
color: black;
${rockey.when('isPrimary', props => props.primary)`
color: blue;
`}
Icon {
margin: 5px;
}
}
Inserted CSS:
.Button-{{ hash }} {
color: black;
}
.isPrimary-{{ hash }}.Button-{{ hash }} {
color: blue;
}
.Button-{{ hash }} .Icon-{{ hash }} {
font-size: 12px;
}
Rockey was integrated with React. There are much more feature and advanteags.
This is a very new and young library and not all features are implemented yet. But with each new release this list will be much and much shorter until there are no disadvantages :)
process.NODE_ENV === 'development'
After clone:
npm install
- install dev dependencieslerna bootstrap
- install dependencies for all packagesIf you want to run rockey inside another applicaiton via npm link - run npm run dev
at rockey to start watchers and transpile code.
npm run minify
to minify codenpm run optimize-parse
to auto optimize CSS parser packages/rockey-css-parse/parse.js
npm run clean
- to remove all transpiled filesnpm run test
- run testsnpm run test-dev
- run tests with watcherslerna run prepublish
- to transpile all packages.benchmarks:
For nested CSS syntax:
npm run bench:nested -- --size {{ SIZE }}
For native CSS syntax:
npm run bench:native -- --size {{ SIZE }}
{{ SIZE }}
- number of generated CSS classes to parse (1000 by default).There is precommit hook (via husky) to run prettier for all staged files.
This is a very new approach and library and not all features are implemented yet. Feel free to file issue or suggest feature to help me to make rockey better. Or ping me on twitter @tuchk4.
🎉
Upcoming plans: