morpho

0.3.0 • Public • Published

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.

Package Sidebar

Install

npm i morpho

Weekly Downloads

1

Version

0.3.0

License

MIT

Unpacked Size

28.3 kB

Total Files

6

Last publish

Collaborators

  • b-teague