postcss-bundler: conditional style exports support

[pascalduez]

What would you want to propose?

Greetings,

I'm currently trying to use postcss-bundler to import styles coming from a package declaring entry points and conditional exports: https://nodejs.org/api/packages.html#conditional-exports

The package exports:

"name": "@org/tokens",
"type": "module",
"main": "./dist/tokens.cjs",
"module": "./dist/tokens.js",
"style": "./dist/tokens.css",
"exports": {
  ".": {
    "import": "./dist/tokens.js",
    "require": "./dist/tokens.cjs",
    "types": "./dist/tokens.d.ts",
    "sass": "./dist/tokens.scss",
    "style": "./dist/tokens.css"
  },
},

The CSS file importing from the package:

@import url('node_modules:@org/tokens') layer(base);

Currently resulting in a CSSSyntaxError because it picks up the commonjs file ./dist/tokens.cjs.
I understand though that the style condition is not yet "standardized"?
Sass already honor the sass one though.

Suggested solution

Not exactly sure yet, will dive more into the code. Happy to get advises.
But given that postcss-bundler is aimed at CSS, supporting the style condition seems like a good addition.
Alternatively just add support for the style key at package.json root. (like postcss-import).

Additional context

Some references:

• https://webpack.js.org/guides/package-exports/#reference-syntax
• doc: add style/sass/less export conditions nodejs/node#46994

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• I'm willing to open a PR

[romainmenke]

Hi @pascalduez,

This has to be added upstream in node.
Re-implementing node require purely for this feature is beyond the scope of postcss-bundler. Re-implementing node require from scratch is needed because node does not expose the building blocks needed to override these conditions (as far as I know, please correct me if this does exist).

Conditional exports work fine and are supported but only in so far as node itself supports these. And as you say the style condition isn't supported yet in node.

You can however write:

"type": "module",
"main": "dist/tokens.cjs",
"module": "dist/tokens.js",
"style": "./dist/tokens.css",
"exports": {
  ".": {
    "import": "./dist/tokens.js",
    "require": "./dist/tokens.cjs",
    "types": "./dist/tokens.d.ts",
    "sass": "./dist/tokens.scss"
  },
  "./css": {
    "default": "./dist/tokens.css"
  }
},

Allowing you to write: @import url('node_modules:@org/tokens/css') layer(base);

---

Edit:

It might be worth it if you opened an issue in node to detail your use case.
This might accelerate the adoption of the style condition.

[romainmenke]

This issue also seems relevant: nodejs/node#51855
If that does ever ship I will update postcss-bundler to make use of the proposed features.