npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

nocssjs

v0.2.4

Published

NoCSS -- stop writing CSS, just use Javascript

Downloads

2

Readme

NoCSS Build Status

NoCSS is a small, fast, Javascript to CSS compiler. It's written in ES6 and has a growing library of plugins, including auto-prefixer and support-level-enforcer (need your CSS to support IE 8? This plugin will ensure that it happens).

Background

Pure CSS is hard to maintain. This has given rise to a plethora of frameworks, including sass, less, stylus, PostCSS, etc. These frameworks are great, but none of them has been built from the ground up on a simple Javascript DSL -- a design choice which lends speed, simplicity, and economy of space to the entire project.

The core engine in NoCSS is less than 50 lines of code. It does not have to parse CSS, build and then execute transforms on an abstract syntax tree (like PostCSS). Because of its diminutive size, you can embed NoCSS in your frontend code and render CSS from Javascript at runtime. It turns out this is a useful ability in many situations, particularly as UIs become more complex.

Because it's in ES6, it's easy to debug, see how the library works and to augment it to your needs. The goal was to make the simplest, lightest-weight CSS processor, which could be used at compile-time or run-time.

Here's an example of NoCSS in action:

const nocss = require('nocssjs')();

// Use the auto-prefixer plugin
nocss.use(require('nocssjs/src/plugin/prefix')());

// Use the browser support plugin, ensuring that we
// support ie >= 8 and firefox >= 40
nocss.use(require('nocssjs/src/plugin/support')({
  ie: 8,
  firefox: 40
}));

// Generate a valid css string (prefix expansions are handled for you)
const styleString = nocss.render({
  'body': {
    'background-color': 'red',
    'ul': {
      'padding': '1em',
      'display': 'flex'
    }
  }
});

console.log(styleString);

This example will output the following string:

body {
  background-color: red;
}
body ul {
  padding: 1em,
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

As you can see, vendor prefixes are handled for you.

It also supports syntactic sugar such as the "&" (concatenate) operator:

nocss.render({
  'input,button': {
    '&.really-big': {
      'transform': 'scale3d(2.0, 2.0, 2.0)'
    },
    '&:focus': {
      'opacity': 0.5
    },
    '&:before,&:after': {
      ...
    }
  }
});

NoCSS vs PostCSS

(coming soon)

Sources

  • vendor prefix overview: https://www.sitepoint.com/web-foundations/vendor-specific-properties/
  • vendor prefix data: http://peter.sh/experiments/vendor-prefixed-css-property-overview/
  • CSS reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
  • raw caniuse database: https://github.com/Fyrd/caniuse