hss
hyperapp-scoped-stylesheet
npm i hyperapp-scoped-stylesheet
hss

hyperapp-scoped-stylesheet

Easily style Hyperapp view functions/components with Scoped CSS

by Albert Alises

1.3.0 (see all)License:MITTypeScript:Not Found
npm i hyperapp-scoped-stylesheet
Readme

Hyperapp Scoped Stylesheet

npm 452 gzip

Build Status

This HOF allows you to easily style Hyperapp views/components by adding styles / a scoped stylesheet that applies to that view only and its descendants.

Basically it allows to use scoped css styling like Angular or Vue does by adding a scoped stylesheet

Demo

Edit 7yk0kyy0jq

Getting started

install npm install hyperapp-scoped-stylesheet --save

Usage:

  1. Import the library
import { stylesheet } from "hyperapp-scoped-stylesheet"
  1. Define a string with raw CSS content
const style = `
  span { 
    font-size: 20px; 
    color: lightblue; 
  }
`

The library consists of a single function that wraps a Hyperapp view/component function, the first parameter is the raw CSS string and the second one is the JSX function defining the Vnodes. The signature is:

stylesheet(style, props => <span>something</span> ...)
  1. Wrap your Hyperapp view/component function as the second parameter (the first one is the raw content string), an example:
const style = `
  .test-style {
    color: #8651bb;
    font-weight: bold;
  }

  p {
    text-align: center;
  }
`
//First argument is the style string, second is the component function
const ScopeStyled = stylesheet(style, () => (
  <div class="test-style"> This is scope-styled yay! </div>
  <p> And this as well </p>
));

const view = () => (
  <div>
    <ScopeStyled />
  </div>
);

The function supports all CSS features defined here: https://www.npmjs.com/package/scope-css This project has been inspired by: https://github.com/k1r0s/preact-stylesheet-decorator

Downloads/wk

11

GitHub Stars

12

LAST COMMIT

3yrs ago

MAINTAINERS

1

CONTRIBUTORS

2

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
1.3.0
latest
3yrs ago
No alternatives found
No tutorials found
Add a tutorial