@poprize/styled v1.2.1

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.

const Container = styled.div`
  background-color: black;
`

const BlackContainer = styled.div`
  background-color: black;
`
// Same parameters, same className

Installation:

npm install @poprize/styled

or

yarn 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

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

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.

import styled, { createGlobalStyle } from "@poprize/styled";
import React from "react";

// Important: setup your JSX element type. 
// With preact it could be: setup(h)
setup(React.createElement);

// define global styles. NOTE: Don't forget adding it to you App
const GlobalStyle = createGlobalStyle`
  * {
    margin: 0;
    font-family: sans-serif;
  }
`;

// You can paste the code above in other page if you want

const Background = styled.div`
  box-sizing: border-box;
  background: repeating-conic-gradient(
      at 111% -11%,
      transparent,
      #ff99c8 0.09%,
      #fcf6bd 0.52%,
      #d0f4de 0.54%,
      #a9def9 1%,
      transparent 1.02%,
      transparent 1.7%
    ),
    radial-gradient(at 100% 0%, #a9def9 0%, #e4c1f9 100%);
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
`;

const Input = styled.input`
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  border-radius: 2rem;
  width: 80%;
  height: 3rem;
  padding: 1rem;
  margin: 0.8rem;
  border: none;
  outline: none;
  color: #3c354e;
  font-size: 1rem;
  font-weight: 300;
  &:focus {
    display: inline-block;
    box-shadow: 0 0 0 0.2rem #b9abe0;
    border-radius: 2rem;
  }
  &::placeholder {
    color: #1c1a2299;
    font-weight: 100;
    font-size: 1rem;
  }
`;

const Button = styled.button`
  background: linear-gradient(to right, #ff99c8 0%, #79c3e9 79%);
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  width: 65%;
  height: 3rem;
  border: none;
  color: white;
  border-radius: 2rem;
  cursor: pointer;
`;

const MainContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
  width: 440px;
  max-width: calc(100% - 20px);
  height: 80%;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 10px;
  color: #ff99c8;
  letter-spacing: 0.4rem;
`;

const WelcomeText = styled.h2`
  margin-bottom: 2rem;
  position: relative;
  display: flex;
  text-align: center;
  font-weight: 100;
`;

const InputContainer = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 30px;
  width: 100%;
`;

const ButtonContainer = styled.div`
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  :hover {
    transform: scale(1.2);
  }
`;

const ForgotPassword = styled.h4`
  cursor: pointer;
  position: relative;
  display: flex;
  text-align: center;
  font-weight: 100;
`;

function Home() {
  return (
    <Background>
      <MainContainer>
        <WelcomeText>Welcome</WelcomeText>
        <InputContainer>
          <Input type="text" placeholder="Email" />
          <Input type="password" placeholder="Password" />
        </InputContainer>
        <ButtonContainer>
          <Button>Sign Up</Button>
        </ButtonContainer>
        <ForgotPassword>Forgot Password ?</ForgotPassword>
      </MainContainer>
    </Background>
  );
}

export default Home;

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:

import { extract } from '@poprize/styled'
import NextDocument, { Html, Head, Main, NextScript } from 'next/document'
import React from 'react'

class Document extends NextDocument {
  render() {
    return (
      <Html>
        <Head>
          <style id="pstyle" dangerouslySetInnerHTML={{ __html: extract() }} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default Document

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