@parcel/transformer-sass failed to compile mdc-checkbox

[ch3sn3k]

🐛 bug report

I want to use Parcel to build a custom version of the MDC Checkbox components using SASS.
parcel build index.html fails to compile sass.

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

babel.rc - none

package.json

{
  "name": "parcel-mdc-checkbox",
  "scripts": {
    "build": "parcel build index.html",
    "sass": "sass style.scss --load-path=node_modules"
  },
  "devDependencies": {
    "@parcel/transformer-sass": "^2.8.3",
    "parcel": "^2.8.3"
  },
  "dependencies": {
    "@material/checkbox": "^15.0.0-canary.684e33d25.0",
    "@material/form-field": "^15.0.0-canary.684e33d25.0"
  }
}

🤔 Expected Behavior

Using npm run build I expect to compile the style.scss to style.css using parcel transformer

😯 Current Behavior

npm run build or parcel build index.html fails
npm run sass or sass style.scss --load-path=node_module works

> parcel build index.html

🚨 Build failed.

@parcel/transformer-sass: expected "{".
   ╷
23 │ export * from './adapter';
   │                          ^
   ╵
  node_modules\@material\checkbox\index.js 23:26  @use
  style.scss 1:1                                  root stylesheet

  Error: expected "{".
     ╷
  23 │ export * from './adapter';
     │                          ^
     ╵
    node_modules\@material\checkbox\index.js 23:26  @use
    style.scss 1:1                                  root stylesheet

💻 Code Sample

npm ci
npm run build
npm run sass

parcel-mdc-checkbox.zip

🌍 Your Environment

Software	Version(s)
Parcel	2.8.3
Node	18.13.0
npm	8.19.3
OS	Windows 11 or Debian 11 in WSL

[mischnic]

@use "@material/checkbox"; resolves to node_modules/@material/checkbox/index.js which is of course not SASS.

#8844 could improve this if material adds an exports field to package.json declaring what @use "@material/checkbox"; should resolve to, like https://unpkg.com/browse/@depict-ai/[email protected]/package.json

[ch3sn3k]

I don't think that I would be able to convince @Material developers to do that for this version. Is there any configuration option for the parcel to substitute the lack of an export field in the material package.json?

[mischnic]

One easy workaround would be to specify the file you want to import @use "@material/checkbox/mdc-checkbox.scss"; (not even sure which one it should be).

You could also write a Parcel resolver plugin that does this (something like "if the parent file is SCSS and you're importing something from @material/*, then append xyz/some other logic").

[danieltroger]

You can also simply create an automatically applied patch to @material/checkbox's package.json if you switch to use yarn 3 - but it might not be worth the hassle. See https://itnext.io/patch-an-npm-dependency-with-yarn-ddde2e194576

[ch3sn3k]

@mischnic @danieltroger Thank you for your help, and I will probably try the direct import solution.