All Projects → tuchk4 → Rockey

tuchk4 / Rockey

Licence: mit
Stressless CSS for components using JS. Write Component Based CSS with functional mixins.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Rockey

Immutable Styles
A library for styling web interfaces with a focus on predictability and robustness. It uses immutability to remove side effects often tied to CSS, allowing UI bugs to be caught ahead of time!
Stars: ✭ 69 (-28.87%)
Mutual labels:  css-in-js
Clxx
Some lightweight H5 components and features
Stars: ✭ 79 (-18.56%)
Mutual labels:  css-in-js
Stylex
Write CSS-in-JS with atomic support. Like Facebook's Stylex!
Stars: ✭ 90 (-7.22%)
Mutual labels:  css-in-js
Bss
🎨 Better Style Sheets
Stars: ✭ 72 (-25.77%)
Mutual labels:  css-in-js
Horror
😱 React HTML elements with CSS-in-JS
Stars: ✭ 78 (-19.59%)
Mutual labels:  css-in-js
Nano Style
React functional CSS-in-JS
Stars: ✭ 85 (-12.37%)
Mutual labels:  css-in-js
Rosebox
CSS in Typescript
Stars: ✭ 62 (-36.08%)
Mutual labels:  css-in-js
Onno
Responsive style props for building themed design systems
Stars: ✭ 95 (-2.06%)
Mutual labels:  css-in-js
Moo Css
模块化面向对象的css写法规范策略。适用于大中小型C端项目样式开发,旨在提高开发和维护效率。
Stars: ✭ 79 (-18.56%)
Mutual labels:  css-in-js
React Usestyles
🖍 Style components using React hooks. Abstracts the styling library away.
Stars: ✭ 89 (-8.25%)
Mutual labels:  css-in-js
Stylelint
A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
Stars: ✭ 9,350 (+9539.18%)
Mutual labels:  css-in-js
React Jss
JSS integration for React (Migrated to a Monorepo it JSS repository)
Stars: ✭ 1,212 (+1149.48%)
Mutual labels:  css-in-js
Compiled
A familiar and performant compile time CSS-in-JS library for React.
Stars: ✭ 1,235 (+1173.2%)
Mutual labels:  css-in-js
Css In Js Precompiler
WORK IN PROGRESS: Precompiles CSS-in-JS objects to CSS strings
Stars: ✭ 71 (-26.8%)
Mutual labels:  css-in-js
Glamorous Primitives
💄 style primitive React interfaces with glamorous
Stars: ✭ 91 (-6.19%)
Mutual labels:  css-in-js
Flame
Component library for building Lightspeed products
Stars: ✭ 65 (-32.99%)
Mutual labels:  css-in-js
React Image Smooth Loading
[not maintained] Images which just flick to appear aren't cool. Images which appear smoothly with a fade like Instagram are cool
Stars: ✭ 84 (-13.4%)
Mutual labels:  css-in-js
Jest Glamor React
Jest utilities for Glamor and React
Stars: ✭ 97 (+0%)
Mutual labels:  css-in-js
Match Media
Universal polyfill for match media API using Expo APIs on mobile
Stars: ✭ 95 (-2.06%)
Mutual labels:  css-in-js
Scale
The Scale library offers a set of customizable web components written with Stencil.js & TypeScript. The default theme of the library can be easily replaced so that a corresponding corporate identity of a dedicated brand can be represented.
Stars: ✭ 87 (-10.31%)
Mutual labels:  css-in-js

Rockey Component Based CSS in JS

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

Rockey tests


Documentation

Why do we need CSS in JS?

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.

  • Developer Experience!
  • For components libraries. Or when going to share components between applications.
  • More simpler application configuration
  • There is no custom loaders
  • More cleaner file structure
  • Easier to run tests
  • DRY

More details explained at Medium Post - CSS in JS. Rockey

Features and Advantages

Framework Agnostic

Rockey could be used in any application.

Small Size

  • rockey rockey gzip size
  • rockey-react rockey-react gzip size
  • rockey-css-parse rockey-css-parse gzip size

npm run minify output:

rockey and rockey-react size

Uniq Class Names

Each time generate uniq class names with randomly generated hash. Same as css-modules.

Component based selectors

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

Readable CSS Class Names

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.

Generated class names

~100% CSS Syntax

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

Fast. And Will be More Faster!

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.

Benchmark: parsing and generating CSS

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

Benchmark: A-gambit/CSS-IN-JS-Benchmarks

Results could be found here.

Class Names

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.

git how extends works

Dynamic CSS

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 React

Rockey was integrated with React. There are much more feature and advanteags.


Current Disadvantages

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 :)

  • Does not support Server Rendering. Will be added in nearest release.
  • There is no auto-prefixer. Will be added in nearest release. Because styles are generating in realtime prefixes will be added only for current browser.
  • There is no CSS validation. Will be added in nearest release. Will work only if process.NODE_ENV === 'development'
  • There is not way to remove inserted rules. Will be added a bit later.
  • Does not support hot-reload. Will be added a bit later.
  • Does not delete unused styles from DOM. Will be added a bit later.

Examples

Contribute

After clone:

  • npm install - install dev dependencies
  • lerna bootstrap - install dependencies for all packages

If 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 code
  • npm run optimize-parse to auto optimize CSS parser packages/rockey-css-parse/parse.js
  • npm run clean - to remove all transpiled files
  • npm run test - run tests
  • npm run test-dev - run tests with watchers
  • lerna 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.

Feedback wanted

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:

  • Make disadvantages list as shorter as possible
  • Medium post "Rockey Under the Hood". Topic about how rockey works — how to make batch CSS rules insert, how to parse and auto optimize parser, how dynamic CSS works
  • Medium post "Rockey — tips and tricks". There are too lot of tips and tricks that I want to share with you
  • "Components kit" — library with easiest way to develop React components using rockey and recompose
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].