Declare .css in package.json exports

[franxois]

Hello,

We have a project and a internal library. The project runs with react-scripts and I try to make it use vite.

When I run vite, I have an error : Missing "./dist/index.css" export in "XXX" package where XXX is our home made library

Here is the export part in the library :

"exports": {
    "require": "./dist/index.js",
    "import": "./dist/index.modern.js"
},

I guess I should add "./dist/index.css" somewhere in package.json exports {} but I can't find how. If I remove the exports, I don't have the error but I begin to see other issues with commonjs import (?)
How can I make this library compatible with vite / es import ?

[aagamdoshi]

Even I am facing this issue ? Did you find a way to resolve css in exports?

[mariusa]

Fixed by completely removing exports, added

 "files": [
    "dist",
    "src"
  ],

[jeremyjone]

I just encountered the same problem, and its solution is as follows:

In package.json file:

"exports": {
    ".": {
      "import": "./dist/xxx.es.js",
      "require": "./dist/xxx.umd.js"
    },
    "./dist/index.css": {
      "import": "./dist/index.css",
      "require": "./dist/index.css"
    }
  }

It works for me.

[roydukkey]

I'm not a fan of this solution because it add another entry point name. I would rather see Vite updated to infer a new method base of the context.

"exports": {
  "./token": {
    "import": "./dist/xxx.es.js",
    "require": "./dist/xxx.umd.js",
    "scss": "./dist/xxx.scss"
  },
}

This would allow the entry to be the same for both languages:

<template><span>Hello</span></template>

<script lang="ts" setup>
  import { get } from '@my/style-dictionary/token';

  console.log(get('color-font-base'));
</script>

<style lang="scss" scoped>
  @use '@my/style-dictionary/token';

  span {
    color: token.get('color-font-base');
  }
</style>

[andredewaard]

This solution doesnt work anymore. still get the same error

 Internal server error: Missing "./dist/style.css" specifier in "" package

[jurito]

What worked for me was adding the css file and its 'dependencies' to the files array in the lib's package.json, to get them included in the package

 "files": [
    "dist",
    "./index.css",
    "./fonts.css",
    "fonts"
    ...

and importing the css in the project using the package from its node_modules folder, adding an alias ( not really necessary tho ) to vite config for that

alias: {
	'@': path.resolve(__dirname, './src'),
	"~":path.resolve(__dirname, './node_modules'),
...
},

import '~/@my-namespace/my-library/index.css';

[liulinboyi]

"exports": {
    ".": {
      "import": "./dist/xxx.es.js",
      "require": "./dist/xxx.umd.js"
    },
    "./dist/": {
      "import": "./dist/",
      "require": "./dist/"
    }
  }

Or

"exports": {
    ".": {
      "import": "./dist/xxx.es.js",
      "require": "./dist/xxx.umd.js"
    },
    "./dist/*.css": {
      "import": "./dist/*.css",
      "require": "./dist/*.css"
    }
  }

will resolve this Internal server error: Missing "./dist/style.css" specifier in "" package issue.

[liulinboyi]

"exports": {
    ".": {
      "import": "./dist/xxx.es.js",
      "require": "./dist/xxx.umd.js"
    },
    "./dist/": {
      "import": "./dist/",
      "require": "./dist/"
    }
  }

Or

"exports": {
    ".": {
      "import": "./dist/xxx.es.js",
      "require": "./dist/xxx.umd.js"
    },
    "./dist/*.css": {
      "import": "./dist/*.css",
      "require": "./dist/*.css"
    }
  }

will resolve this Internal server error: Missing "./dist/style.css" specifier in "" package issue.

[garydex]

"exports": {
    ".": {
      "import": "./dist/xxx.es.js",
      "require": "./dist/xxx.umd.js"
    },
    "./dist/*.css": {
      "import": "./dist/*.css",
      "require": "./dist/*.css"
    }
  }

I think this can be simplified further, as CSS imports aren't affected by whether you're loading ESM, UMD or CJS. This worked for me:

"exports": {
    ".": {
        "import": "./dist/xxx.es.js",
        "require": "./dist/xxx.umd.js"
    },
    "./dist/*.css": "./dist/*.css"
}

[melMass]

TIL glob in exports but in this case it's probably not what you want as you expose it as mylib/dist/core.css

This seems to work:

"exports": {
    ".": {
        "import": "./dist/xxx.es.js",
        "require": "./dist/xxx.umd.js"
    },
    "./*.css": "./dist/*.css"
}