`babel-plugin-styled-components-selector`

Babel plugin for styled-components. This is not necessary at all to use styled-components, it just adds some nice features to enhance the experience.

Usage

THIS ISN'T PUBLISHED YET, WIP

npm install --save-dev babel-plugin-styled-components-selector

Then in your babel configuration (probably .babelrc):

{
  "plugins": ["styled-components-selector"]
}

Features

Adds CSS component selector support for `styled-components`

The es6 template literal allows you to use the full power of css. But there is no css selector for styled-components.

You can work around this problem, but you will either:

break component encapsulation by using html tag/class selectors in the parent component
or have to introduce a bunch of intermediate styled-components, even for minimal adjustments like setting a margin

This babel plugin generates a css selector on all styled-components components. This allows you to use them as normal css selectors as shown in the following examples without breaking encapsulation:

const Button = styled.button`
  color: black;
`;
const Container = styled.div`
  > ${Button} {
    color: green;
  }
`;

Works with composition:

const Button = styled.button`
  color: black;
`;

const PrimaryButton = styled(Button)`
  font-size: 2rem;
`;

const Container = styled.div`
  > ${PrimaryButton} {
    color: green;
  }
`;

Specific composition hierarchy selectors:

const Button = styled.button`
  color: black;
`;

const PrimaryButton = styled(Button)`
  font-size: 2rem;
`;

const Container = styled.div`
  > ${Button} {
    color: green;
  }
  > ${PrimaryButton} {
    color: red;
  }
`;

Deeply nested:

const Icon = styled.img`
  max-width: 100%;
  height: auto;
  display: block;  
`

const IconButton = styled.div`
  padding: 1rem;
`;

const Container = styled.div`
  > ${IconButton} {
    color: green;
    > ${Icon} {
      border: 2px;
    }
  }
`;

Credits & Inspiration

styled-components for bringing css and react components closer together in a sane way

babel-plugin-styled-components took parts of your code and adjusted them to my needs

murmurhash-js copied your hashing function

License

See LICENSE.md for more information.

jzimmek/babel-plugin-styled-components-selector