powerstyl

powerstly

Style with template strings.

npm i powerstyl

Convert a CSS string to an object.

import { css } from "powersty";
<ReactElement
  style={css`
    // CSS text
  `}
/>;

Apply a style to a react element.

import powerstyl from "powersty";

const FlexContainer = powerstyl`main``
  display:flex;
`;

<FlexContainer>...</FlexContainer>;

/* 
<main style="display:flex">
  ...
</main>
 */

import { styled, inlined } from "powersty";

styled accepts an element name and its CSS.

const Red = styled`
  color: red; 
`;

<Red>text</Red>;

/* 
  <div style="color:red;">text</div>
 */

inlined applies a style to the child element.

const Green = inlined`
  color: green; 
`;

<Green>
  <div>text</div>
</Green>;

/* 
  <div style="color:green;">text</div>
 */

With CSS preprocessors (sync).

import less from "powersty/less";
import sass from "powersty/sass";

const lessStyle = less`
// ... less code
`;
const sassStyle = sass`
// ... sass code
`;

With options.

const lessStyle = less(options)`
// ... less code
`;
const sassStyle = sass(options)`
// ... sass code
`;