fix(react-styles): support esm import and export (#7084)

* fix(react-styles): support esm import and export The previous version are using `require()`, which is not fully support esm Add esm only output to support some pure esm project like vite or snowpack * fix(build): add inlineDynamicImports to rollup config
patternfly · Apr 11, 2022 · b66ea14 · b66ea14
1 parent 15786a5
commit b66ea14
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/packages/react-styles/scripts/writeClassMaps.js b/packages/react-styles/scripts/writeClassMaps.js
@@ -15,6 +15,15 @@ exports.default = ${JSON.stringify(classMap, null, 2)};
 `.trim()
   );
 
+const writeESMExport = (file, classMap) =>
+  outputFileSync(
+    join(outDir, file.replace(/.css$/, '.mjs')),
+    `
+import('./${basename(file, '.css.js')}');
+export default ${JSON.stringify(classMap, null, 2)};
+`.trim()
+  );
+
 const writeDTSExport = (file, classMap) =>
   outputFileSync(
     join(outDir, file.replace(/.css$/, '.d.ts')),
@@ -36,6 +45,7 @@ function writeClassMaps(classMaps) {
 
     writeCJSExport(outPath, classMap);
     writeDTSExport(outPath, classMap);
+    writeESMExport(outPath, classMap);
     copyFileSync(file, join(outDir, outPath));
   });
 

diff --git a/packages/rollup.base.js b/packages/rollup.base.js
@@ -23,6 +23,7 @@ module.exports = ({ packageName, name }) => ({
   output: {
     file: `dist/umd/${packageName}${isProduction ? '.min' : ''}.js`,
     format: 'umd',
+    inlineDynamicImports: true,
     name,
     globals: {
       react: 'React',