CSS file that's imported from JS file is not being included in the manifest about parcel-reporter-bundle-manifest

[dudo]

@lukyth that was it! I was importing the main css file from my js entrypoint. Removing that in favor of including the link tag properly includes index.css as a key in the manifest.

Thanks!!

[lukyth]

@dudo Is it possible to share the setup that reproduce this?

[dudo]

// package.json
{
  "name": "browse_app",
  "version": "0.1.0",
  "private": true,
  "description": "",
  "scripts": {
    "start": "parcel serve ./src/index.html -p 1264 --hmr-port 1265",
    "build": "parcel build ./src/index.html"
  },
  "dependencies": {
    "@babel/runtime": "^7.12.1",
    "body-scroll-lock": "^3.1.5",
    "framer-motion": "^2.9.4",
    "json-api-serializer": "^2.5.0",
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-router-dom": "^5.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/plugin-transform-react-jsx": "^7.12.1",
    "@babel/plugin-transform-runtime": "^7.12.1",
    "@babel/preset-env": "^7.12.1",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.12.1",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "parcel": "^2.0.0-nightly.433",
    "parcel-reporter-bundle-manifest": "^0.3.1"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

// .babelrc
{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ],
    [
      "@babel/plugin-transform-react-jsx",
      {
        "runtime": "automatic"
      }
    ]
  ]
}

// .parcelrc
{
  "extends": "@parcel/config-default",
  "reporters": ["...", "parcel-reporter-bundle-manifest"]
}

Setup was pretty straight forward... thanks for taking a look =)

[lukyth]

@dudo And the CSS file is being imported from ./src/index.html with something like <link rel="stylesheet" href="./styles.css" /> right? Would it be possible to share a minimal setup that could reproduce this via CodeSandbox?

[lukyth]

I see. Thanks for the confirmation! I think it should include that CSS file in the generated manifest as well so I'm gonna reopen this issue until it's resolved. And thanks for reporting btw! 👍

[lukyth]

@dudo Which version of Parcel 2/this plugin/Node.js that you are using? With those info, I might be able to reproduce the issue and help you with it.

I tried to build with a CSS file imported from JS file, and I could see the CSS file in the manifest as well:

The setup I tested with is at https://github.com/autifyhq/parcel-reporter-bundle-manifest/tree/main/tests/fixtures/parcel-beta, with the JS import CSS added in 34a0690.

[dudo]

"dependencies": {
  "@babel/runtime": "^7.12.1",
  "react": "^17.0.0",
  "react-dom": "^17.0.0",
  "react-router-dom": "^5.2.0"
},
"devDependencies": {
  "@babel/core": "^7.12.3",
  "@babel/plugin-transform-react-jsx": "^7.12.1",
  "@babel/plugin-transform-runtime": "^7.12.1",
  "@babel/preset-env": "^7.12.1",
  "babel-eslint": "^10.1.0",
  "eslint": "^7.12.1",
  "eslint-plugin-react": "^7.21.5",
  "eslint-plugin-react-hooks": "^4.2.0",
  "parcel": "^2.0.0-nightly.433",
  "parcel-reporter-bundle-manifest": "^0.3.1"
},

FROM node:14

LABEL maintainer="[email protected]"

WORKDIR /usr/src/app

ENV PATH ./node_modules/.bin:$PATH

# install and cache app dependencies
ADD package*.json ./
RUN npm install --silent

ADD . ./

EXPOSE 1264

# start app
ENTRYPOINT [ "npm" ]
CMD [ "start" ]

[lukyth]

@dudo This should be fixed in v0.3.2 now. Let me know if you still find any problem! 😃