• Stars
    star
    360
  • Rank 118,230 (Top 3 %)
  • Language
    JavaScript
  • License
    Other
  • Created over 7 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Ultra small CSS in JS library in 0.4 KB

Picostyle

482 gzip Build Status

Picostyle is a 0.4 KB CSS-in-JS library for use with frameworks that expose an h function.

Update: Picostyle is now faster by removing JSON.stringify and supports a new css function that returns a class name for Components that support a class attribute property.

Try it Online

  • πŸš€ The smallest CSS-in-JS library: Only 0.4 KB (minified & gzipped).
  • πŸ‘ Zero dependencies: And under 80 LOC.
  • πŸ’… Styled components: Gives you a styled component like styled-components that y'all love.

Currently tested with:

Installation

Install with npm or Yarn.

npm i picostyle

Then with a module bundler like Rollup or Webpack, use as you would anything else.

import picostyle from "picostyle"

Otherwise, download the latest release or load directly from unpkg or jsDelivr.

<script src="https://unpkg.com/picostyle"></script>

Then find it in window.picostyle.

Usage

Picostyle will work with any framework that exposes an h function. When you pass Picostyle an function h it returns a higher order function (HOF) that you can use exactly like the h you pass it.

Picostyle can now return an object with the style function and a new css fucntion when the new "return object" flag is true

import { h } from "some-framework"
import picostyle from "picostyle"

const style = picostyle(h)

Or

import { h } from "some-framework"
import picostyle from "picostyle"

const returnObject = true
const { style, css } = picostyle(h, returnObject)

The HOF accepts a tag name (or an unstyled component) and returns a function that accepts JSON styles.

// Styled component from tag name
const Wrapper = style("div")({
  minHeight: "100vh",
  background: "#000",
})

// Styling an un-styled component
const Component = (props, text) => h("h1", props, text)
const Text = style(Component)({
  color: "#fff",
})

// Styling a component that supports a class name attribute
const Component = (state) => (
  h("h1",
    { 
      class: css( { color: "#fff" } )
    }
)

If you want to change the style based on the props, you can do it by passing a function, instead of JSON styles.

// Here we set the color of the button, based on the color prop
const Button = style("button")(props => ({
  color: props.color
}))

You can also use @keyframes animation importing keyframes function.

import picostyle, { keyframes } from 'picostyle'

const zoom = keyframes({
  from: {
    transform: 'scale(0.5)'
  },
  to: {
    transform: 'scale(2)'
  },
})

const Container = ps('div')({
  animation: `${zoom} 300ms`,
})

You can now use the styled components to build your app.

const App = h("main", {}, [
  Wrapper({}, Text("Scoping CSS is hard")),
  Wrapper({}, Text("Not with styled components!")),
  Wrapper({color: 'red'}, Button("I'm red!")),
])

Picostyle transforms any provided JSON styles into plain CSS styles and injects them into a style tag in the head of the document; all under unique style identifiers (USI). Each styled component is given a USI as a class name.

Because the output is a stylesheet and not inline styles. You can use all valid CSS in your JSON styles. For example:

  • Media Queries (@media (orientation: portrait))
  • Pseudo-element and Pseudo-classes (::before, :hover, :last-child).
  • Nested child styles (> h1, > *+*)

Preact example

Get the Code

import picostyle from "picostyle"
import { h, render } from 'preact';

const ps = picostyle(h)

const keyColor = "#f07";

const Text = ps("a")({
  fontSize: "64px",
  cursor: "pointer",
  color: "#fff",
  padding: "0.4em",
  transition: "all .2s ease-in-out",
  textDecoration: "none",
  ":hover": {
    transform: "scale(1.3)",
  },
  "@media (max-width: 450px)": {
    fontSize: "32px",
  },
})

const Wrapper = ps("div")({
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  width: "100vw",
  height: "100vh",
  backgroundColor: keyColor,
})

render((
  <Wrapper>
    <Text href="https://github.com/morishitter/picostyle">Picostyle meets Preact</Text>
  </Wrapper>
), document.body);

Hyperapp Example

Get the Code

import { h, app } from "hyperapp"
import picostyle from "picostyle"

const style = picostyle(h)
const theme = "hotpink" // Try change the theme to white

const Wrapper = style("div")({
  display: "flex",
  width: "100%",
  height: "100vh",
  backgroundColor: theme,
  "> h1": { cursor: "pointer" }
})

const Text = style("h1")({
  fontSize: "calc(10px + 5vmin)",
  color: theme === "white" ? "black" : "white",
  margin: "auto",
  transition: "transform .2s ease-out",
  ":hover": {
    transform: "scale(1.2)",
  },
  "@media (orientation: landscape)": {
    fontWeight: "bold",
  },
})

app({
  state: {
    text: "Picostyle"
  },
  view: (state) =>
    <Wrapper>
      <Text>Hello { state.text }</Text>
    </Wrapper>
})

Ultradom Example

Get the Code

/** @jsx */

import {h, patch} from "ultradom"
import picostyle from "picostyle"

const ps = picostyle(h)

function view(state) {
  const keyColor = "#f07";

  const Text = ps("h1")({
    fontSize: "64px",
    cursor: "pointer",
    color: "#fff",
    padding: "0.4em",
    transition: "all .2s ease-in-out",
    ":hover": {
      transform: "scale(1.3)",
    },
    "@media (max-width: 450px)": {
      fontSize: "32px",
    },
  })

  const Wrapper = ps("div")({
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    width: "100vw",
    height: "100vh",
    backgroundColor: keyColor,
  })

  return (
    <Wrapper>
      <Text>{state.trim() === "" ? ":)" : state}</Text>
    </Wrapper>
  )
}

document.body.appendChild(patch(view("Hello, Picostyle")))

More Repositories

1

stylefmt

stylefmt is a tool that automatically formats stylesheets.
JavaScript
2,099
star
2

postcss-style-guide

PostCSS plugin to generate a style guide automatically
JavaScript
526
star
3

atcss

Annotations based CSS processor
JavaScript
63
star
4

scssfmt

Standard SCSS code formatter
JavaScript
57
star
5

YACP

Yet Another CSS Preprocessor
JavaScript
52
star
6

gulp-stylefmt

gulp plugin for stylefmt
JavaScript
44
star
7

gulp-csscss

gulp plugin for running csscss
JavaScript
29
star
8

postcss-ref

PostCSS plugin to refer properties from another rule (@ref rule)
JavaScript
25
star
9

is-color

Check if a string is CSS color value
JavaScript
17
star
10

picostyle-react

Picostyle for React
JavaScript
11
star
11

grunt-stylefmt

Grunt plugin for stylefmt
JavaScript
11
star
12

csscs

CSS Code Style checker
JavaScript
9
star
13

postcss-namespace

PostCSS plugin for the scope of name binding
JavaScript
9
star
14

gridbugs

A community-curated list of CSS Grid issues and cross-browser workarounds for them.
7
star
15

postcss-font-smoothing

PostCSS plugin to fallback font-smoothing property
JavaScript
6
star
16

fly-cssfmt

Fly plugin for CSSfmt
JavaScript
6
star
17

fly-stylus

Fly plugin for Stylus
JavaScript
6
star
18

rails-grape-sample

Sample REST API implemented by Rails with Grape.
Ruby
5
star
19

psg-theme-default

Default theme of postcss-style-guide
HTML
5
star
20

postcss-annotation-include

PostCSS plugin for annotations based including properties in other rule sets
JavaScript
5
star
21

sketch.css

Sketch is a CSS framework, it makes Web designing more fun.
CSS
5
star
22

css-annotation

Annotation parser for CSS
JavaScript
5
star
23

psg

Command line interface of postcss-style-guide
JavaScript
4
star
24

psg-theme-forest

'Forest': Theme of postcss-style-guide
CSS
4
star
25

postcss-important

PostCSS plugin for annotations based `!important`
JavaScript
4
star
26

normalize.styl

Stylus port of normalize.css v3.0.3
CSS
3
star
27

postcss-validator

PostCSS plugin to check if an input string is valid CSS
JavaScript
3
star
28

generator-npmodule

Yeoman generator of node packaged module
JavaScript
3
star
29

css-annotation-block

A css-annotation module to return the specific nodes
JavaScript
3
star
30

cheatah

More fast and casual CSS styleguide or cheatsheat generator
JavaScript
3
star
31

masaakim-hidden

About me
2
star
32

css-utilify

Add `@base` annotations to the rules
JavaScript
2
star
33

custom-properties-sass

Transpile Custom Properties to Sass variables
JavaScript
2
star
34

cli-tree

Object tree viewer for the CLI
JavaScript
2
star
35

postcss-annotation-extend

PostCSS plugin for annotations based inheritance from other rule sets
JavaScript
2
star
36

css-border-property

Parser and stringifier of `border` property
JavaScript
2
star
37

fly-csso

Fly plugin for csso
JavaScript
2
star
38

css-tuning

Postprocessing pack for CSS performance tuning
JavaScript
2
star
39

css-specificity

CSS selector specificity calculator
JavaScript
1
star
40

postcss-atcss-inherit

A module for ACSS to inherit other rules
JavaScript
1
star
41

inCollege

inCollege is dating site for university students. They can connect each other.
JavaScript
1
star
42

grunt-yacp

grunt plugin for YACP.
JavaScript
1
star
43

tapestry

Test Anything Protocol tools and its wrapper testing framework in Ruby
Ruby
1
star
44

is-css-length

Check if a string is CSS value of the length
JavaScript
1
star
45

morishitter.com

JavaScript
1
star
46

tecsst

CSS testing framework without taking screenshots
JavaScript
1
star
47

rework-rule-binding

Rework plugin to prohibit cascading the ruleset.
JavaScript
1
star
48

morishitter2

PHP
1
star
49

css-type-definition

List of values that the CSS property can be taken
JavaScript
1
star
50

fly-csscomb

CSSComb plugin for Fly.
JavaScript
1
star
51

YouJukeMix

https://morishitter.github.io/YouJukeMix
JavaScript
1
star
52

css-value-type

get types of CSS properties
JavaScript
1
star
53

search-Twitter-id

The script for searching Twitter ID which has two or three characters.
PHP
1
star
54

heavyarms-syntax

A theme for Atom
CSS
1
star