styled-selector

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

Note:

This library relies on implementation details of libraries mentioned in Usage so as to get component selectors. Styled Components, for example, has a .styledComponentId property, whereas Emotion uses the .toString() method.

This means that they can break it in patch versions. If this happens, we'll release a fix here as soon as possible. For more information, see our code.

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