Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

"style" field in package.json

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.

like image 617
banhfun Avatar asked Aug 16 '15 16:08

banhfun


People also ask

Can you add custom fields to package json?

Yes, you're allowed to add custom entries to package. json . Choose a key name: not already defined (details below)

What is main field in package json?

main. The main field is a module ID that is the primary entry point to your program. That is, if your package is named foo , and a user installs it, and then does require("foo") , then your main module's exports object will be returned. This should be a module relative to the root of your package folder.

What is scripts section in package json?

Where are scripts placed in package JSON? In a project, Scripts are stored in a section of the package. json file and are defined as an object where the Key is the command name used on the terminal, and the value is the command we want to run.

What is entry point node JS?

Entry point is the javascript file that will be invoked when consumers of your module “require” it, this file will include the main logic for your module, or if it is a large module you can export public functions found with other files (typically in the lib directory) So it should be your app. js file.


1 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.

like image 200
deltab Avatar answered Oct 15 '22 19:10

deltab