Home » Nodejs » “style” field in package.json

“style” field in package.json

Posted by: admin November 30, 2017 Leave a comment

Questions:

I noticed that Bootstrap and Normalize.css both have a “style” field in their package.json.

Why do they have this? If I had to guess, it’s to allow users to import the defined stylesheet as easily as doing require('bootstrap'), but that doesn’t seem to be the case.

Answers:

From Techwraith’s pull request that added it to Bootstrap:

Many modules in npm are starting to expose their css entry files in
their package.json files. This allows tools like npm-css,
rework-npm, and npm-less to import bootstrap from the
node_modules directory. […]

It’s actually not written anywhere but in the code for these modules
right now. We’re hoping to get this standardized at some point, but
we’ve all reached this convention separately, so I’m inclined to just
go with it. […]

If you want to read about this style of css development, I wrote a
thing:

http://techwraith.com/your-css-needs-a-dependency-graph-too/

There’s also support in other tools, such as the browserify plugin parcelify:

Add css to your npm modules consumed with browserify.

  • Just add a style key to your package.json to specify the package’s css file(s). […]

Parcelify will concatenate all the css files in the modules on which
main.js depends — in this case just myModule.css — in the order
of the js dependency graph, and write the output to bundle.css.