mini-styled 💅

Abstract

This is meant to be a subset of styled-components features. It was made as a study project in order to give better understanding of the original styled-components source and some of the concepts usages.

ℹ️ This project is ~1.8% the size of real styled-components (package unpacked size);

⚠️ It doesn't work with SSR, since this library uses a browser API. If you need something for a real production application, use styled-components instead.

Installation

npm i mini-styled

or if you're using yarn

yarn add mini-styled

Example

import React from 'react';

import styled from 'mini-styled';

const Wrapper = styled.section`
  padding: 24px;
  background: papayawhip;
`;

const Button = styled.button`
  background-color: ${props => props.customBg || 'white'};
  color: palevioletred;
  border: 24px;

  &:hover {
    background-color: pink;
  }
`;

const MyComponent = () => (
  <Wrapper>
    <Button customBg="yellow">Click me</Button>
  </Wrapper>
);

And then you'll see this in your project:

API

The existing API at this moment expose only the styled factory, which works for HTML Elements and React Components, just as styled. It supports media queries, pseudo classes and general features oferred by Stylis.js. Check TODO for planned functionalities.

TODO

• Add tests
• Make proper use of stylis middleware to inject rules via CSSOM
• Add vendor prefixes (also from stylis)
• Make it work natively with SSR

Feel free to contribute to this project, to increase its features, improve its code and etc! And although this isn't a project I'm willing to take too seriously, feel free to report issues, I'll take a look as soon as possible.

Acknowledgements

• Special thanks to Josh.

I started this project by navigating and studying styled-components source, but his post on Demystifying styled-components really gave me some insights that I applied to the final structure of the code for the sake of simplicity :)