❤
npm
Sign UpSign In

scorpio

0.3.0 • Public • Published

Scorpio

CSS as JavaScript

npm install --save-dev scorpio

applyCSS( // Adds <style> tag to <head>
 
  $(".foo, .bar",
    "font: 12px Times",
 
    // Expands to ".foo em, .bar em" - like sass or less
    $("em",
      "border: 5px solid red"
    ),
 
    // this will also be scoped under the ".foo" selector
    someFunctionThatReturnsScorpioStyling()
  )
);

Why?

  1. Simpler builds
  2. CSS and JS can share data
  3. Import into selector scopes (like above)
  4. Generate styles programmatically

Scorpio is written in plain old JavaScript, so that it works anywhere. It can be imported into a bundle using something like webpack, or included directly, like plain javascript. It will export its API functions as a node module, and/or on window.scorpio.

API

$(selector, rulesAndChildren...)

Returns a selector with the given rules and child selectors. Child selectors will be scoped under the parent selector. See above example.

CSS(selectors...)

Returns a CSS string representation of the given selectors.

applyCSS(selectors...)

Same as CSS, except that it applies the styles instead of returning them. This is achieved by appending a <style> tag to document.head.

Readme

Keywords

Package Sidebar

Install

npm i scorpio

Repository

github.com/jbe/scorpio

Homepage

github.com/jbe/scorpio#readme

Weekly Downloads

1

Version

0.3.0

License

MIT

Last publish

Collaborators

  • josteinbe
Try on RunKit
Report malware