light-stylish v0.0.1

Light stylish

• Add your css styles in js
• Nesting styles

Example with React

import React from "react";
import { css } from "light-stylish";

const App = () => {
  const [isVisible, setVisibility] = React.useReducer((is) => !is, false);
  return (
    <div>
      <button className={buttonStyles} onClick={setVisibility}>
        Toggle
      </button>
      <div className={hiddenBlockStyles} data-visibility={isVisible}>
        Hidden block
      </div>
    </div>
  );
};

const buttonStyles = css`
  background: black;
  color: white;
  padding: 10px;
`;

const hiddenBlockStyles = css`
  display: none;
  padding: 10px;

  &[data-visibility="true"] {
    display: block;
  }
`;