parceljs with bundle-text css import is not working

user_1619620 0
Viewed 303

I am using Parcel to create bundles for my React Typescript application along with Shadow. Below are my configurations,

  ///index.tsx file

  import customCSS from "bundle-text:./assets/antd.scss"

  const appContainer = document
    .getElementById(config.containerId)
    ?.attachShadow({ mode: "open" }) as ShadowRoot

  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    appContainer
  )

  let style = document.createElement("style")
  style.textContent = customCSS
  appContainer.appendChild(style)

And below is app.tsx file

import React, { Suspense } from "react"
import { BrowserRouter, Route, Routes } from "react-router-dom"

import "./app.scss"
import NotFound from "./pages/404"
import HomePage from "./pages/Home"
import Layout from "./pages/Layout"

const Application: React.FC<any> = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <BrowserRouter basename="/">
        <Routes>
          <Route path="*" element={<NotFound />} />
          <Route element={<Layout />}>
            <Route index element={<HomePage />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </Suspense>
  )
}

below is assets/antd.scss file

@import "npm:antd/dist/antd.min.css";

I have added declaration.d.ts file for declaring bundle-text:.

declare module "bundle-text:*" {
  const value: string
  export default value
}

ISSUE: Now issue is that bundle-text is working fine but normal css import is not working. If I comment the bundle-text, then regular CSS import is working fine.

EXPECTED: Both bundle-text and regular CSS import should work properly.

Below is my package.json dependencies,

 "dependencies": {
    "antd": "^4.18.8",
    "history": "^5.2.0",
    "i18next": "^21.6.11",
    "parcel": "2.3.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-i18next": "^11.15.4",
    "react-router-dom": "^6.2.1",
    "typescript": "4.5.5"
  },
  "devDependencies": {
    "@csstools/normalize.css": "^12.0.0",
    "@parcel/transformer-inline-string": "2.3.2",
    "@parcel/transformer-sass": "^2.3.2",
    "@trivago/prettier-plugin-sort-imports": "^3.2.0",
    "@types/react": "^17.0.39",
    "@types/react-dom": "^17.0.11",
    "@typescript-eslint/eslint-plugin": "^5.12.0",
    "@typescript-eslint/parser": "^5.12.0",
    "autoprefixer": "^10.4.2",
    "eslint": "^8.9.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "jest": "^27.5.1",
    "node-sass": "^7.0.1",
    "parcel": "^2.3.2",
    "postcss": "^8.4.6",
    "postcss-modules": "^4.3.0",
    "prettier": "^2.5.1",
    "process": "^0.11.10",
    "sass": "^1.49.8",
    "typescript": "^4.5.5"
  },

Is it something which I am missing here?

Update: I have updated added my code to the sandbox environment - parcel-shadowDOM-react-app

shadow-dom parceljs typescript reactjs css
2 Answers

Unfortunately, I think this a bug in parcel - I created a simplified reproduction here and filed this github issue.

As a workaround that you could use before we fix this, I've found that if you do all your css imports through the bundle-text pipeline, parcel will keep it straight. I.e. you'll want to find places in your app where you do global css imports (e.g. import "./styles.css") with this:

import stylesString from "bundle-text:./styles.css"
let styleElement = document.createElement("style");
styleElement.textContent = stylesString ;
shadowRoot.appendChild(styleElement);
user_47396870

You need use sass-to-string package to transform your scss in css first

user_30424150
Related