parcel-bundler / parcel

The zero configuration build tool for the web. 📦🚀
https://parceljs.org
MIT License
43.49k stars 2.27k forks source link

Css modules `:export` not working in 2.4.0 #7859

Closed terebentina closed 2 years ago

terebentina commented 2 years ago

🐛 bug report

The css modules specs has a section for interop with js or other css modules. More precisely, it defines an :export keyword that exports strings/variables (not css variables), functionally equivalent to this js:

module.exports = {
  "exportedKey": "exportedValue"
}

I am using it like this:

// cssVars.module.scss:

:export {
  playReqs: #f5bc62;
  playReqsBar: #faca7d;
}

// file.js:

import * as cssVars from './cssVars.module.scss';
console.log(cssVars.playReqs);

More details: https://github.com/css-modules/icss/blob/master/README.md#export

This works in parcel 2.3.2 but it doesn't in parcel 2.4.0.

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

package.json deps :

    "@parcel/packager-raw-url": "2.4.0",
    "@parcel/transformer-html": "2.4.0",
    "@parcel/transformer-posthtml": "2.4.0",
    "@parcel/transformer-sass": "2.4.0",
    "@parcel/transformer-webmanifest": "2.4.0",
    "parcel-reporter-static-files-copy": "1.3.4",
    "parcel": "2.4.0",
    "autoprefixer": "10.4.4",
    "postcss": "8.4.12",
    "postcss-modules": "4.3.1",
    "tailwindcss": "3.0.23",

.parcelrc

{
  "extends": ["@parcel/config-default"],
  "reporters":  ["...", "parcel-reporter-static-files-copy"],
  "transformers": {
    "jsx:*.svg": ["...", "@parcel/transformer-svg-react"]
  }
}

.postcssrc

{
  "plugins": {
    "tailwindcss": {}
  }
}

🤔 Expected Behavior

console.log(cssVars.playReqs); above should output the value for playReqs defined in the css module file. It does so with parcel 2.3.2 (and all the other parcel deps on 2.3.2)

😯 Current Behavior

The above console log returns undefined.

devongovett commented 2 years ago

hmm I'm surprised that this is being used directly in code, I thought it was more of an intermediary representation used by the css modules compiler.

I guess we can just fall back to postcss-modules when these are seen like we already do for e.g. @value. I don't have plans to support that syntax in the new CSS compiler however, so this will not be optimized performance wise.