css import in bundled ES module

[sKopheK]

🐛 bug report

🎛 Configuration

package.json

{
  ...
  "source": "src/App/index.js",
  "module": "dist/output.js",
  "scripts": {
    ...
    "start": "parcel src/index.html --dist-dir debug",
    "build": "parcel build --no-content-hash --no-source-maps"
  },
  "targets": {
    "module": {
      "context": "browser",
      "includeNodeModules": true,
      "optimize": true
    }
  },
  "alias": {
    "process": {
      "global": "{}"
    }
  },
  "dependencies": {
    "@popperjs/core": "^2.11.6",
    "classnames": "^2.3.2",
    "css-loader": "^6.8.1",
    "cytoscape": "^3.25.0",
    "cytoscape-fcose": "^2.2.0",
    "cytoscape-node-html-label": "^1.2.2",
    "cytoscape-popper": "^2.0.0",
    "html2canvas": "^1.4.1",
    "lodash.debounce": "^4.0.8",
    "redux-batched-subscribe": "^0.1.6",
    "redux-saga": "^1.2.3",
    "tippy.js": "^2.6.0",
    "vanjs-core": "^1.2.1"
  },
  "devDependencies": {
    "@parcel/optimizer-data-url": "^2.11.0",
    "@parcel/transformer-inline-string": "^2.11.0",
    "@parcel/transformer-sass": "^2.11.0",
    "@reduxjs/toolkit": "^1.9.5",
    "@types/cytoscape": "^3.19.11",
    "@types/cytoscape-fcose": "^2.2.4",
    "@types/redux-batched-subscribe": "^0.1.4",
    "parcel": "^2.11.0",
    "process": "^0.11.10"
  }
}

tsconfig.json

{
    "compilerOptions": {
        "baseUrl": "./src",
        "target": "ES2019",
        "module": "ES2020",
        "allowJs": true,
        "checkJs": true,
        "moduleResolution": "node",
        "paths": {
            "/*": [
                "../*"
            ],
        }
    },
    "exclude": [
        "dist",
        "debug",
        "public/example",
        "node_modules"
    ]
}

🤔 Expected Behavior

css should not be imported into JS bundle

😯 Current Behavior

After build is done, i get following output in dist/output.js:

import"./pcr.css";function t(t,e,n,r){Object.defineProperty(t,e,{get:n,set:r...

which obviously does not work in browser:
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec. is given for the import of pcr.css

💁 Possible Solution

not sure if my configuration is correct (was not really straightforward and took my a while to find proper settings in both parcel docs, github issues and stackoverflow), but generally, there's no reason to include CSS in browser context

🔦 Context

export an app as a ES module that can be included in a webpage

💻 Code Sample

using (s)css modules in my JS, vanJS and redux, but not any opinionated framework such as React

...
import * as cssTab from './Components/ControlPanel/Tab/styles.module.scss';
import * as cssTabItem from './Components/ControlPanel/TabMenu/Item/styles.module.scss';

import * as style from 'bundle-text:scss/cytoscape.scss';

import 'scss/index.scss';
...

🌍 Your Environment

Software	Version(s)
Parcel	2.11
Node	18.17.0
npm/Yarn	9.6.7
Operating System	Win11 x64

[mischnic]

1. Don't use "module" as the target name unless you're literally building some JS library to publish to npm/.... Call it "app" or anything other than module/main/browser
2. You imported CSS in your JS source file, so of course the Parcel output also contains the CSS import. Why don't use import the CSS in that src/index.html file?

[sKopheK]

hi, thanks for the answer

1. even when i had "library" there, it did the same output. the only difference was, i was able to set "outputFormat" which is disabled and auto-set for "module"
2. as OP states, I'm using (S)CSS modules, so the imported pcr.css goes as follows:

._4EfISG_heading{letter-spacing:.0225rem;margin-top:0;margin-bottom:.625rem;font-size:1.125rem;font-weight:700}...

the only thing is the css import in the ES module really, it seems that context setting "browser" does not seem to be considered during build. when i remove the above mentioned CSS import, the result is exactly what i want

[phaux]

@mischnic I am actually building a React library and wanted to use CSS modules so the class names don't clash with user's styles:

src/MyComponent.tsx

import { myClass } from "./MyComponent.module.css"

export function MyComponent() {
  return <div className={myClass} />
}

src/MyComponent.module.css

.myClass {
  border: 3px solid hotpink;
}

The user is supposed to import the js and css separately as described in this SO answer:

import "my-react-library/dist/style.css"
import { MyComponent } from "my-react-library"

I tried building it like that:

{
  "name": "my-react-library",
  "version": "1.0.0",
  "type": "module",
  "source": "src/MyComponent.tsx",
  "main": "dist/module.js",
  "types": "dist/types.d.ts",
  "style": "dist/style.css", // this is ignored and uses the same name as js :( but that's ok
  "scripts": {
    "prepare": "parcel build",
  },
  "devDependencies": {
    "@parcel/packager-ts": "^2.12.0",
    "@parcel/transformer-typescript-types": "^2.12.0",
    "parcel": "^2.12.0"
  }
}

This almost works but includes the css import in js. It makes sense, because they're part of the same target with one entry point and one output js file.

It would be nice if there was a way to disable it for library mode and simply not include the css import. Even better if the style key in package.json was considered a separate target which collects all the styles and ouputs a css bundle only.

[phaux]

I also just tried similar thing without CSS modules:

src/MyComponent.tsx

export function MyComponent() {
  return <div className="myHopefullyUniqueClass" />
}

src/MyComponent.css

.myHopefullyUniqueClass {
  border: 3px solid hotpink;
}

package.json

{
  "source": "src/MyComponent.tsx",
  "main": "dist/module.js",
  "types": "dist/types.d.ts",
  "style": "dist/style.css",
  "targets": {
    "main": {},
    "types": {},
    "style": {
      "source": "src/MyComponent.css",
    }
  }
}

But I get an error from parcel:

Error: Expected content key 5777301ba3af460e to exist

Edit: nvm I cleared parcel cache and it worked. Also it doesn't work when target name is "style" but works if I change to "styles" for some reason.

[phaux]

bump

[blutorange]

This was at least confusing to me when you're used to other bundlers that extract the CSS file and remove it from the bundle JavaScript file. Otherwise the bundle won't work unless it's processed again by some tool. My expectation for a bundler would have been that it can produce a file that works in a runtime such as node or the browser.

From what I've tried, it also doesn't seem to be limited to ESM modules, it happens with CommonJS as well. Setting the library target to browser results in a bundle that contains require calls to the CSS file.

The documentation for CSS also says at the very beginning "To add a CSS file, either [...] or import it from a JavaScript file: import './index.css'". If the current behavior regarding leaving the CSS import in is intended, it would in my opinion be helpful to point that out in the docs.

For reference, this issue has also been brought up here

• Extract CSS from the bundle #5590
• How to exclude css modules from being bundled in js? #5246
• Remove css Imports from Esm Output #9263

Why don't use import the CSS in that src/index.html file?

• That's only possible if you actually have an index.html file. If you're using parcel e.g. to bundle the frontend resources for another framework such as Jakarta Faces, there's no such file.
• Some dependencies such as @fullcalendar/common include a CSS import. It would be useful to be able to extract that when bundling.

[davenquinn]

This causes major issues with using Parcel to bundle "standard" Javascript libraries designed to work in multiple environments. Having CSS imports in modules requires, e.g., custom webpack loaders to be used to strip out these invalid modules.

[davenquinn]

Just FYI, we are set to completely drop Parcel as a bundler over this and UW-Macrostrat/web-components#76, and head to some lower level solution. Unfortunate to be sure, given our successful history with the tool, but we're having to jump through hoops downstream because our packages are incorrectly formatted for use in many environments.

[devongovett]

I'm not sure what's surprising here. If you imported a CSS file in your source JavaScript file, why would it be removed from the output bundled JavaScript? If you want the CSS file to be imported separately from the JS in the output, then why not also do the same in the source? You could make both the JS and the CSS entries to your parcel build instead of importing the CSS.

parcel module.js style.css

[davenquinn]

Thanks for the response @devongovett. The main problem here arises when using CSS modules. For a lot of our code we have the following pattern, approximately, which handles the creation of namespaced classes.

import styles from "./style.module.css"

const DemoComponent = () => {
  return <div className={styles.testStyle}>Test style</div>
}

But the goal is to have the styles with prefixes used in Javascript be the same as in the CSS export.
I'm not sure how to implement this without CSS imports.

Perhaps there's a way to tune the CSS modules functionality here? I guess I could also manually scope the CSS. But this seems unnecessary when we have a system that already produces usable styles and code, just with a few extra imports scattered around.