🙋 Importing stylesheets using `style` in module's package.json

I’m trying to get stylesheets which an npm module’s package.json defines a style property, and I’m struggling to get this working. I think its a feature request rather than a bug, but I had been expecting it to work out of the box.

🎛 Configuration (.babelrc, package.json, cli command)

{
  "name": "xxtmp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "datatables.net": "^1.10.16",
    "datatables.net-dt": "^1.10.16",
    "jquery": "^3.2.1"
  }
}

🤔 Expected Behavior

With an imported stylesheet of:

@import 'datatables.net-dt';

I had expected it to automatically expand since datatables.net-dt defines a style property which points to its stylesheet.

😯 Current Behavior

I get an error stating that:

main.css:2:1: Cannot resolve dependency ‘datatables.net-dt’

💁 Possible Solution

Perhaps one solution would be to use postcss-import out of the box. If I use postcss import directly, it does inline the imported stylesheet as expected. I’ve tried using the following in a .postcssrc file, but it made no difference when using Parcel:

{
    "plugins": {
        "postcss-import": {}
    }
}

🔦 Context

I’m trying to write a little blog post to demonstrate how Parcel can be used to easily build in my DataTables library. The problem I’ve had with just about every bundler is the CSS part - the JS is never a problem and I was hoping that Parcel might be an out of the box builder that would resolve this.

🌍 Your Environment

Software	Version(s)
Parcel	1.3.1
Node	8.1.2
npm/Yarn	5.0.3
Operating System	Fedora 27

[dalgard]

+1 for this feature.

When Parcel is used to precompile an NPM package with --target node, it outputs two files:

dist/index.css
dist/index.js

When I import the package somewhere else, it will take the main export from the file referenced in package.json’s "main" property (e.g. "main": "dist/"), but the CSS is left behind.

The point of precompiling the package is that it can be used anywhere without specific loaders setup, but in the case it is used in a Parcel project, it would seem fair that Parcel (or any other bundler) automatically includes all CSS files in dependencies’ package.json’s "style" property in the bundle.

The value of the "style" property (e.g. "style": "dist/") should be resolved in the same, smart way that "main" is, with index.css as the default.

[std4453]

Came across this when using react-dat-gui.

For anyone that needs an immediate solution, importing the CSS file directly works, out-of-the-box, without configurations, like:

import 'react-dat-gui/dist/index.css';