New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details →
Socket
Book a DemoSign in
Socket

crease

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

crease

The super lightweight, fully tested, simple, and easy CSS by JS module. Create CSS with Ease.

latest
Source
npmnpm
Version
1.0.2
Version published
Maintainers
1
Created
Source

Crease

The super lightweight, fully tested, simple, and easy CSS by JS module. Create CSS with Ease.

Currently supports children inheritance and camelCase:

import crease from 'crease'

var createdStyleElement = crease({
  '#container': {
    border: '1px solid black',
    padding: '5px',
    boxShadow: '3px 3px 6px black',
    
    'input[type="button"]': {
      cursor: 'pointer'
    }
  }
})

equals the following html element appended to the document's head (in minified form):

<style>
  #container {
    border: 1px solid black;
    padding: 5px;
    box-shadow: 3px 3px 6px black;
  }
  #container input[type="button"] {
    cursor: pointer;
  }
</style>

Crease works great with crelm for native javascript componentization:

import crelm from 'crelm'
import crease from 'crease'

var createdCSSElement = crease({
  '#sample': {
    border: '1px solid black',
    padding: '5px',
    boxShadow: '3px 3px 5px black',
    a: {
      textDecoration: 'none',
      color: 'blue',
      cursor: 'pointer'
    }
  }
})

var createdDOMElement = crelm({
  id: 'sample',
  parent: document.body,
  children: [
    'My Links:',
    {tagName: 'a', innerText: 'My Website', href: 'https://<whatever>.me'},
  ]
})

Would equal:

<head>
  <style>
    #sample {
      border: 1px solid black;
      padding: 5px;
      box-shadow: 3px 3px 5px black;
    }
    #sample a {
      text-decoration: none;
      color: blue;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="sample">
    My Links
    <a href="https://<whatever>.me">My Website</a>
  </div>
</body>

FAQs

Package last updated on 04 Nov 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts