README

Morpho

Small and beautiful CSS-in-JS library

Features

Tiny - 1.6 kb
Framework Agnostic - use with Hyperapp, React, Vue, Angular or anything that has a class attribute
Uniquely scoped class names: .morpho-nnbflx
Custom css class name prefixing: .article-header-xj38d
Custom default numerical units: 5 -> 5em
Vendor Prefixing {-webkit-box-direction: normal; box-direction: normal;}
List values: [width, 2] -> transition: width 2s;
@media queries @media (max-width: 450px){}
@keyframes @keyframes morpho-nnbflx {}
Nesting .morpho-dx8a25 {} h1 .morpho-dx8a25 {}
Dynamic Prop values props => ({color: props.color})
Pseudo Selectors and elements .morpho-5tqubj:hover {}
Combinators .morpho-ra155c + .morpho-ra155c {}
Styled Components styled("div", { borderRadius: "5px" })
- Style Unstyled Components styled(Button, { color: "tomato" })
- Extend Styled Components styled(GreenButton, { fontSize: 10 })

Setup

Install morpho library

npm i morpho

With a module bundler like Rollup or Webpack, import morpho into your application

import morpho from "morpho"

If a bundler is not being used, morpho can be imported in a <script> tag as a module.

<script type="module">
  import morpho from "https://unpkg.com//to be determined//"
</script>

Getting Started

const options = {} //See options below

const { css, keyframes } = morpho(options);

const generatedClassName = css({
  color: "blue"
})

//Hyperapp
const Component = (props, children) => {
  return h("div", {class: generatedClassName}, children)
}

//React
const Component = (props) => {
  return <div className={generatedClassName}>Hello World</div>
}

//Vue
<div v-bind:class="[activeClass]"></div>
data: {
  activeClass: generatedClassName,
}

//Angular
<div [ngClass]="{[generatedClassName]: true}">

Options

{
  prefix: "morpho"
  unit: "em",
  cssProps: {
    border: {
      vendor: ["-webkit-", "-moz-"],
      unit: "%"
    }
  }
}

prefix - This option is used to specific the global custom prefix for generated css class names. Can be overridden by each css function call css({}, "customPrefix"). Default value is "morpho".
unit - This option is used to specify the global default numerical unit. Examples include: "%", "rem", or "px". Default value is "px".
cssProps - Use this option to fully customize how each css property will apply vendor prefixing or default numerical values. For example, if you want the css property transition to use the "-webkit-" prefix and a default unit in milliseconds "ms", you would initialize this option to:
```
cssProps: {
  transition: {
    vendor: ["-webkit-"], //Accepts and applies a list of vendor prefixes
    unit: "ms" //Appends a unit to a numerical value.  Ex: 5 -> 5ms
  }
}
```
Note: cssProps will override settings from morpho-vendor and morpho-unit
Uniquely scoped class names
```
.morpho-nnbflx
```

Styled components

For any framework that supports JSX or exposes an h() function, you can use the morpho-style library to create styled components

import { morpho } from "morpho"
const { css, keyframes } = morpho(options);

import {morphoStyle} from "morpho-style"
const {styled} = morphoStyle(css, h, styleOptions) //Requires morpho's css function and the JSX h function

const Button = styled("div", {
  margin: "1em",
  padding: "0.25em 1em",
  borderRadius: "3px"
});

Vendor Prefixing

If you wish to support vendor prefixing, you can use the morpho-vendor library which has a predefined list of css properties based on data from browserlist and mdn-browser-compat-data

import { morpho } from "morpho"
import { vendorProps } from "morpho-vendor"

const { css, keyframes } = morpho({vendorProps});

const vendorClassName = css({
  boxDirection: "normal"
})

.morpho-en4vga {
  -webkit-box-direction: normal;
  box-direction: normal;
}

Custom default units
- If you want morpho to default numerical values with unit, you can use the predefined list from morpho-unit. Note - This list currently only contains css properties that are unitless. The global default will append "px". Todo - Add additional default units to several css properties based on CSS Best Practices
```
import { morpho } from "morpho"
import { unitProps } from "morpho-unit"

const { css, keyframes } = morpho({cssProps: unitProps});

const vendorClassName = css({
  border: 5
})
```
```
.morpho-en4vga {
 border: 5px;
}
```

Extend a component

const GreenButton = styled(Button, {
  color: "tomato",
});

Style an unstyled component

const Button = (props) => h("div", {class: props.class}, props.children);

const OrangeButton styled(Button, {
  backgroundColor: "orange"
})

Custom class name prefixing

const Fancy = styled("div", {
    borderRightWidth: 5
},"article-header")

const className = css({borderRightWidth: 5}, "article-header")

.article-header-nnbflx

Media queries

@media (max-width: 450px) {
  .morpho-yi32xy {
    font-size: 32px;
  }
}

Keyframes

keyframes({
  from: {
    transform: 'scale(2)'
  },
  to: {
    transform: 'scale(4)'
  },
})

@keyframes morpho-nnbflx {
  from {
    transform: scale(2);
  }

  to {
    transform: scale(4);
  }
}

Numeric values

const Fancy = styled("div", {
  width: 5,
  columns: 10
})

List of values

const Fancy = styled("div", {
  transition: ["width", 2]
})

.morpho-ta4jzb {
  -webkit-transition: width 2s;
  transition: width 2s;
}

Repeat properties using nested arrays

const Fancy = styled("div", {
  position: [["-webkit-sticky"], ["sticky"]]
})

.morpho-ta4jzb {
  position: -webkit-sticky;
  position: sticky;
}

Nesting

const Fancy = styled("div", {
  width: 5,
  "h1 &": {
    color: "orange",
    tag: {
      fontSize: "21px",
      "& h2": {
        border: "5px"
      }
    }
  }
})

.morpho-dx8a25 {width: 5%;}
h1 .morpho-dx8a25 {color: orange;}
h1 .morpho-dx8a25 tag {font-size: 21px;}
h1 .morpho-dx8a25 tag .morpho-dx8a25 h2 {border: 5px;}

Dynamically set css values from props

const Button = styled("div", props => ({
  color: props.myColor || "green",
  width: props.size || "5px"
}))
Button({ myColor: "orange", size: "20px" });

.morpho-qbjka {
  color: orange;
  width: 20px;
}

Pseudo selectors and elements

const Link = styled("div", {
  color: "blue",
  "&:hover": {
    color: "red"
  }
})

.morpho-5tqubj:hover {
  color: red;
}
.morpho-5tqubj {
  color: blue;
}

Combinators

const Fancy = styled("div", {
  color: "#123456",
  "& + &": {
    color: "#32AB71"
  }
})

.morpho-ra155c + .morpho-ra155c {
  color: #32AB71;
}
.morpho-ra155c {
  color: #123456;
}

Credits

A lot of inspiration and work for this library comes from Picostyle. Some of the work I added to Picostyle including css export is also found here.

Differences between morpho and picostyle

Morpho adds a lot of additional features that are not found in Picostyle including: list values, default numeric units, vendor prefixing, nesting, and dynamic values from props.

Usage no npm install needed!