@mountainpass/html-styled-components

Styled components syntax for creating raw html in javascript.

Usage no npm install needed!

<script type="module">
  import mountainpassHtmlStyledComponents from 'https://cdn.skypack.dev/@mountainpass/html-styled-components';
</script>

README

html-styled-components

GitHub license NPM JavaScript Style Guide

Overview

Provides a javascript library for creating raw html (string), using "styled components" like syntax.

Install

Install from NPM

npm i @mountainpass/html-styled-components

Usage

The bare minimum

const { styled, generateCssClasses } = require('@mountainpass/html-styled-compoennts').newInstance()

const CustomH1 = styled.h1`
  border: 1px solid blue;
`
const html = `<html><head><style>${generateCssClasses()}</style></head><body>${CustomH1('Hello world!')}</body></html>`

Output

<html>
  <head>
    <style>
      .c100 {
        border: 1px solid blue;
      }
    </style>
  </head>
  <body>
    <h1 class="c100">Hello world!</h1>
  </body>
</html>

Full example

Please see the unit tests for all usage examples.

Configuration

Please see the unit tests for all configuration examples.

License

Apache 2.0 © nickgrealy