Font-awesome: 'main' field in package.json

[fritx]

See: Make normalize.css available for webpack
https://github.com/necolas/normalize.css/pull/421

[tagliala]

Sorry, I didn't get this request

Could you please clarify?

[fritx]

OK. I meant the main field is missing in package.json.
I can't import it with webpack. The issue is similar with necolas/normalize.css#421.
Any pull request is welcomed? Thanks.

[tagliala]

Sorry but I'm not so much into node and npm

I'm noticing that main seems related to .js files

https://docs.npmjs.com/files/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 ID relative to the root of your package folder.

For most modules, it makes the most sense to have a main script and often not much else.

EG: bootstrap https://github.com/twbs/bootstrap/blob/master/package.json#L22

since there is no javascript here, what is the use case of pointing main to a css file?

[fritx]

hi @tagliala
npm is not only for js now. many css and other modules fucked it over, such as normalize.css.
and we prefer to import them in js thanks to webpack bundling.
as far as i know, bootstrap is a set of js, css, img, so i won't import it this way.
in a word, adding a main field to the package.json makes itself available to webpack users, and can make no side-effect at all ;)
related PR: https://github.com/necolas/normalize.css/pull/384

// my/page/bundle.js
import 'normalize.css'
import 'font-awesome' // to be supported
import './my/other.css'

[tagliala]

hi @fritx,

thanks for your clarification. I need feedback from Dave before adding this

[fritx]

cool awesome :)

[romiem]

+1 Please add a main property in the package.json file which points to ./css/font-awesome.css'.

[Youmoo]

+1 bulma also does this.

[tothandras]

@tagliala sorry for including you but I see this is open for a long time and it would be a quick fix :) I am happy to open a PR too if it makes easier.

[tagliala]

@tothandras sorry I can't make this decision, please check if you can get feedback from him

[niftylettuce]

Please add this!

[jrharshath]

Update/FYI: Bootstrap has not only JS, but also CSS. They're using a "style" field in package.json for pointing to css (or scss, in case of bootstrap-sass), and the "main" field for their JS.

@fritx Should we be using the "style" field, and relegate the "main" field just for JS?

[fritx]

@jrharshath is this issue related? https://github.com/webpack/css-loader/issues/51
If using the style field, i'm not sure, does import 'font-awesome' work? 😕

[jrharshath]

I'm not using webpack myself - I'm using node-sass + node-sass-import, and node-sass-import makes uses the style fields when I use @import 'font-awesome' or @import 'bootstrap-sass'.

Hopefully webpack/css-loader will soon implement support for the style field. I think as more and more projects start adopting the style or css field in their package.json, npm will address it and standardize this to one prescribed convention.

[bjankord]

+1 for style field

[oluckyman]

So guys, it’s one line of code, it have no side-effects and it unlocks all webpack users which are legions out there. What are you waiting for? Pull request or something? Let’s close that issue and move on

[oluckyman]

Meanwhile made a workaround for webpack:

``` lang=js
var config = {
entry: {
app: '...'
vendor: getVendors(),
},
...
};

function getVendors() {
var dependencies = require('./package.json').dependencies || {};
var vendors = Object.keys(dependencies).map(vendor => {
switch (vendor) {
case 'font-awesome':
return 'font-awesome/css/font-awesome.css';
default:
return vendor;
}
});
return vendors;
}
```

[mikpetr]

Hi all.
Totally agree with @oluckyman . It's already 2017 and it's not fixed yet. All npm packages have main field. There is no difference which kind of file it is.

[CyberCookie]

@davegandy
Lol really !? Why are you so slow?
This enchancment not only gives benefits for webpack users, but it also allows to retrieve absolute pass to file specified in package.json main by NodeJS require.resolve('font-awesome') method. This can be used to read any file font-awesome module consists of.
Cmon ! How much more PRs should be created before you finally merge this 1 line of text !?

[mikpetr]

Seems font awesome no more supported.

[franciscop]

I added more explanations in the PR I made (above), not only people going through Webpack but also people going through Create-React-App* are affected. With this change implemented, this could be done:

import React from 'react';
import ReactDOM from 'react-dom';
import 'picnic';
import 'font-awesome';

// ...

From reading this discussion, it seems that this is the current status:

Pros:

• CDNs get a lot easier to use, from jsDelivery to unpkg.
• Webpack and by extension Create-React-App users lives are a lot simpler.
• Follows the convention used by many other CSS libraries.
• It is retrocompatible. It seems like nothing would break adding this.

Cons:

• It is not what the main is designed for.

*While CRA uses webpack in the back, I separate these users for two reasons: they are more likely to be new and not know how to manage these things, and because the examples in CRA are all doing import './NAME.css'; so I think it is fair to say that they expect this functionality by default.

[tagliala]

This should be done in 5.0.0

https://www.npmjs.com/package/@fortawesome/fontawesome-free-webfonts

$ yarn info @fortawesome/fontawesome-free-webfonts | grep main:
  main: 'css/fontawesome.css'

let me know if this is fixed

[tagliala]

No feedback, closing here as fixed