styled-selector

Get static CSS(-in-JS) selectors (like .sc-htpNat) from React components

Install

$ npm i styled-selector

Usage

Styled Components

import styled from "styled-components";
import s from "styled-selector";

const Comp = styled.div``;

s(Comp); // .sc-htpNat

Emotion

import styled, { css } from "react-emotion";
import s from "styled-selector";

const Comp = styled("div")``;

s(Comp); // .css-htpNat

const className = css``;

s(className); // .css-htpNat

Reuse

import styled from "styled-components";
import use from "reuse";
import s from "styled-selector";

const Comp = use(styled.div``);

s(Comp); // .sc-htpNat

Custom

import React from "react";
import s from "styled-selector";

const Comp = () => <div id="foo" />;
Comp.selector = "#foo";

s(Comp); // #foo

License

MIT © Haz