MOTIVATION.md

Table of contents:

• I want to use small and fast lib
• I want to split into looks
• I want CSS in JS with correct extending
• I want to work with readable Class Names
• Cleaner code and Component Based selectors

I want to use small and fast lib

And want to describe CSS using strings (Template literals) instead of JSON objects.

And I want to write Dynamic CSS and event Dynamic CSS that depends on Event Handlers.

Experimental demos:

• Input styles for specific value
• Div background depends on mouse X and Y

Benchmark: parsing and generating CSS

npm run best-results -- --size 10000

• Rockey Parse Optimized — 3.325sec
• Rockey Parse — 3.841sec
• Postcss with Nested Plugin 14.204sec
• Postcss Safe Parser with Nested Plugin — 16.404sec

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.

I want to split into looks

Demo: Buttons look with mixins

import look from 'rockey-react/look';

const { Button, PrimaryButton, SuccessButton } = look.button`
  Button {
    padding: 5px;
    background: none;

    ${rockey.when(props => props.raised)`
      box-shadow: 1px 1px 5px #ccc;
    `}

    font-size: ${props => `${0.9 * props.scale}em`};
  }

  PrimaryButton {
    color: blue;
  }

  SuccessButton {
    color: green;
  }
`
const render = () => {
  <Button raised scale="1.1">Button</Button>
  <PrimaryButton scale="2">PrimaryButton</PrimaryButton>
  <SuccessButton raised scale="1.5">SuccessButton</SuccessButton>
};

I want CSS in JS with correct extending

Demos (open devtools and try to change CSS rules for Base Components):

• Button / PrimaryButton / SuccessButton with raised mixin
• Card example
• Warning Card example

I want to work with readable Class Names

Demos (open devtools and watch classnames):

• Button / PrimaryButton / SuccessButton with raised mixin
• Card example
• Warning Card example

Cleaner code and Component Based selectors

Demos (open devtools and watch classnames):

• Button / PrimaryButton / SuccessButton with raised mixin
• Card example
• Warning Card example

Main goal - keep code as clean as possible.

Write nested 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.

With Dynamic CSS (or even with rockey-react - Dynamic CSS - Event Handlers) You will forgot about large and sometimes very unreadable classnames conditions. Just set className at Comopnent's root element.

import rockey from 'rockey-react';
import Icon from 'icon';

const CardHeader = rockey.div('Card');
const CardBody = rockey.div('CardBody');
const CardActions = rockey.div('CardActions');
const Button = rockey.button('Button');
const CloseIcon = rockey(Icon);

const Card = props => {
  return (
    <Card>
      <CardHeader>
        <Title>I am  CardHeader</Title>
        <CloseIcon/>
      </CardHeader>
      <CardBody>I am Body</CardBody>
      <CardActions>
        <Button>Click me</Button>
      </CardActions>
    </Card>
  );
};

const StyledCard = rockey(Card)`
  Card {
    width: 100px;

    CardHeader {
      background: #fc3;

      CloseIcon {
        float: right;
      }
    }

    CardBody {
      padding: 15px;
    }

    CardActions {
      Button {
        float: right;
      }
    }  
  }
`;