Since I've scrubbed in to try to help @maya with this, I've run into some questions for @jeremiak and @msecret.

So when we talk about "npm support", we're talking about being able to write browser-only JavaScript that can require('uswds'), ostensibly after browserifying it? We're not talking about being able to require('uswds') from an arbitrary Node program or the Node REPL and having it work without errors? For example:

// npm.js
// Compiled using: browserify npm.js -o index.js
'use strict';
require('uswds');

And then in the HTML file:

<script src="./assets/js/vendor/jquery-1.11.3.min.js"></script>
<script src="./index.js"></script>

This seems to behave in my browser; whereas require('uswds') in the Node REPL dies horribly.

And these programmatic require('uswds/package.json').css or require('uswds/package.json').scss directives aren't actually standardized yet, but proposed standards, correct? I saw that bootstrap uses the less and style tags, but gives no guidance on how they're used. Then I found that the parcelify npm supposedly uses style, but again, that requires the user knowing to use it. Also:

• http://stackoverflow.com/questions/32037150/style-field-in-package-json
• This hints that some npms exist to overload the @import directive: http://techwraith.com/your-css-needs-a-dependency-graph-too/, namely:
  • resin
  • rework-npm

Point being, if we add these keys, we'll have to document how to use them. So basically, the package.json needs updated to something like this, plus some documentation, and we're good to go:

  "main": "assets/js/components.js",
  "scripts": {
    "build-sass": "node-sass assets/_scss/all.scss > assets/css/uswds.css",
    "prepublish": "npm run build-sass build"
  },
  "assets": "assets/",
  "css": "assets/css/uswds.css",
  "scss": "assets/_scss/all.scss",

Cool, I'll take a look at the PR @mbland but also wanted to answer your question. In my opinion the benefit of having the library on NPM is that it can be a declared dependency to ease installation and deployment. If you are var wds = require('uswds')-ing then I would assume that wds is an object from the index.js file in that repo and be the JavaScript components of the library.

As far as those other keys, they're definitely not yet standards with regards to their semantic meaning or place in package.json. But 👍 for shipping it with documentation, as it enables flexibility for any arbitrary build tool chain.

As an example, on Federalist we use the build-sass script to compile the CSS.

No, I get the benefit of npm packaging. I was checking whether my understanding of how it would be used is (now) correct, that it would be required by browser scripts only. This after pulling a fair amount of hair out trying to get it to load without throwing a stack trace in the REPL.