Parcel: Importing a CSS file in a Javascript file returns an empty object.

Created on 17 Feb 2018 · 2Comments · Source: parcel-bundler/parcel

Choose one: is this a 🐛 bug report or 🙋 feature request?

This is either a bug report or just confusion on my part.

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

I have no .babelrc.

package.json

{
  "name": "parcel-playground",
  "version": "0.1.0",
  "devDependencies": {
    "parcel-bundler": "^1.6.1"
  }
}

🤔 Expected Behavior

When a CSS file is imported in a JS file as a named import, I'd expect _something_ to be there given the example at https://parceljs.org/. Why would you import something and then log it to the console if it's just going to be undefined?

😯 Current Behavior

The exported function in main.js prints undefined to the console in the web browser.

🔦 Context

I was just kicking the tires on parcel, so to speak. I thought I'd start with the example given on the main page of https://parceljs.org/. To my surprise, the console.log statement in the function in main.js just prints out undefined. That was unexpected to me since the example implied something more would be imported as it referenced the main class specifically.

Curious, I tried logging the imported classes to the console and found it to be an empty JS object.

To be fair, the example never states what exactly is supposed to be imported from the CSS file or what is supposed to be logged. But I inferred it to be more than just an empty object. Either there's a bug in the default configuration or it's a misleading example.

💻 Code Sample

index.html

<html>
<body>
  <script src="./index.js"></script>
</body>
</html>

main.css

.main {
  /* Reference an image file */
  background: url('./images/background.png');
  color: red;
}

I used this file for background.png just so it wouldn't throw a missing file error.

index.js

import main from './main';

main();

main.js

// import a CSS module
import classes from './main.css';

export default () => {
  console.log(classes.main);
};

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.5.1 |
| Node | 8.9.4 |
| Yarn | 1.3.2 |
| Operating System | Ubuntu 16.04 |

Source

JayAndCatchFire

Most helpful comment

Ah, sorry. I should have searched first.

Perhaps that info should be mentioned in that example on the website. Or perhaps a better example that shows what parcel is capable of without requiring any configuration should be considered. Otherwise the "zero configuration" part of the Github repo description is a bit misleading.

JayAndCatchFire on 17 Feb 2018

👍6