parceljs with bundle-text css import is not working - css

Question

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

Answer 1

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);

Answer 2

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