Styled

Styled is the smallest cssinjs library (less than 1k) with "styled-components" compatible api.

• keyframes, selectors, @media and props are supported
• No duplication: same properties, same className.

1const Container = styled.div`
2  background-color: black;
3`
4
5const BlackContainer = styled.div`
6  background-color: black;
7`
8// Same parameters, same className

Installation:

1npm install @poprize/styled

or

1yarn add @poprize/styled

Motivation :

After visiting my family in my home town in South America, I realized that not many people had access to high-end smartphones, and internet access is very limited in many places. This, combined with my passion for performance and simplicity, made me try to build the smallest cssinjs library, framework agnostic (works in react, preact, or pretty much anything that uses jsx), and that had the same features as the library I have used in recent years.

This is just an alternative to Styled-components, Emotion, Goober, aiming to be simple, friendly, and extremely small. I won't sell this as the best library ever, but as a smaller, simpler alternative, and note that's what this project is all about.

Usage :

Use styled to define your components. createGlobalStyle will define global css. Keyframes are suported. You can also using custom properties to Object

1
2const Container = styled.div`
3  background-color: ${(props)=> props.primaryColor};
4`

To ensure that you can use any framework (React, Preact and any other jsx framework), you need to configure your framework in the same file where you define the global functions.

Below is an example of a login screen built with Styled. Use as an example.

1import styled, { createGlobalStyle } from "@poprize/styled";
2import React from "react";
3
4// Important: setup your JSX element type. 
5// With preact it could be: setup(h)
6setup(React.createElement);
7
8// define global styles. NOTE: Don't forget adding it to you App
9const GlobalStyle = createGlobalStyle`
10  * {
11    margin: 0;
12    font-family: sans-serif;
13  }
14`;
15
16// You can paste the code above in other page if you want
17
18const Background = styled.div`
19  box-sizing: border-box;
20  background: repeating-conic-gradient(
21      at 111% -11%,
22      transparent,
23      #ff99c8 0.09%,
24      #fcf6bd 0.52%,
25      #d0f4de 0.54%,
26      #a9def9 1%,
27      transparent 1.02%,
28      transparent 1.7%
29    ),
30    radial-gradient(at 100% 0%, #a9def9 0%, #e4c1f9 100%);
31  background-size: cover;
32  display: flex;
33  flex-direction: column;
34  justify-content: center;
35  align-items: center;
36  height: 100vh;
37`;
38
39const Input = styled.input`
40  background: rgba(255, 255, 255, 0.15);
41  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
42  border-radius: 2rem;
43  width: 80%;
44  height: 3rem;
45  padding: 1rem;
46  margin: 0.8rem;
47  border: none;
48  outline: none;
49  color: #3c354e;
50  font-size: 1rem;
51  font-weight: 300;
52  &:focus {
53    display: inline-block;
54    box-shadow: 0 0 0 0.2rem #b9abe0;
55    border-radius: 2rem;
56  }
57  &::placeholder {
58    color: #1c1a2299;
59    font-weight: 100;
60    font-size: 1rem;
61  }
62`;
63
64const Button = styled.button`
65  background: linear-gradient(to right, #ff99c8 0%, #79c3e9 79%);
66  text-transform: uppercase;
67  letter-spacing: 0.2rem;
68  width: 65%;
69  height: 3rem;
70  border: none;
71  color: white;
72  border-radius: 2rem;
73  cursor: pointer;
74`;
75
76const MainContainer = styled.div`
77  display: flex;
78  align-items: center;
79  justify-content: space-evenly;
80  flex-direction: column;
81  width: 440px;
82  max-width: calc(100% - 20px);
83  height: 80%;
84  background: rgba(255, 255, 255, 0.4);
85  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
86  backdrop-filter: blur(16px);
87  -webkit-backdrop-filter: blur(16px);
88  border-radius: 10px;
89  color: #ff99c8;
90  letter-spacing: 0.4rem;
91`;
92
93const WelcomeText = styled.h2`
94  margin-bottom: 2rem;
95  position: relative;
96  display: flex;
97  text-align: center;
98  font-weight: 100;
99`;
100
101const InputContainer = styled.div`
102  display: flex;
103  flex-direction: column;
104  justify-content: space-around;
105  align-items: center;
106  height: 30px;
107  width: 100%;
108`;
109
110const ButtonContainer = styled.div`
111  align-self: stretch;
112  display: flex;
113  align-items: center;
114  justify-content: center;
115  :hover {
116    transform: scale(1.2);
117  }
118`;
119
120const ForgotPassword = styled.h4`
121  cursor: pointer;
122  position: relative;
123  display: flex;
124  text-align: center;
125  font-weight: 100;
126`;
127
128function Home() {
129  return (
130    <Background>
131      <MainContainer>
132        <WelcomeText>Welcome</WelcomeText>
133        <InputContainer>
134          <Input type="text" placeholder="Email" />
135          <Input type="password" placeholder="Password" />
136        </InputContainer>
137        <ButtonContainer>
138          <Button>Sign Up</Button>
139        </ButtonContainer>
140        <ForgotPassword>Forgot Password ?</ForgotPassword>
141      </MainContainer>
142    </Background>
143  );
144}
145
146export default Home;
147

NextJS or other SSR framework

To use styled in SSR you need to use the extract() function In nextJS you have to create a _document.tsx file, and add styled to it:

1import { extract } from '@poprize/styled'
2import NextDocument, { Html, Head, Main, NextScript } from 'next/document'
3import React from 'react'
4
5class Document extends NextDocument {
6  render() {
7    return (
8      <Html>
9        <Head>
10          <style id="pstyle" dangerouslySetInnerHTML={{ __html: extract() }} />
11        </Head>
12        <body>
13          <Main />
14          <NextScript />
15        </body>
16      </Html>
17    )
18  }
19}
20
21export default Document
22

Feature requests and issues are welcome. Just keep the scope of the project in mind.