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