feat: add esm build, separate css modules in /lib

resolves #7927

package.json

@@ -62,6 +62,7 @@
     "jest-environment-jsdom-fourteen": "^1.0.1",
     "jest-serializer-html": "^7.0.0",
     "lerna": "^3.16.2",
+    "mkdirp": "^1.0.4",
     "moment": "^2.27.0",
     "sass": "~1.32.13",
     "sass-loader": "^11.1.0",

packages/vuetify/babel.config.js

@@ -35,6 +35,10 @@ module.exports = {
     lib: {
       plugins: [
         ['babel-plugin-add-import-extension', { extension: 'mjs' }],
+        ['./build/babel-plugin-replace-import-extension', { extMapping: {
+          '.sass': '.css',
+          '.scss': '.css',
+        }}],
       ],
     },
   },

packages/vuetify/build/babel-plugin-replace-import-extension.js

@@ -0,0 +1,60 @@
+function transformExtension(filepath, extMapping) {
+  if (!filepath.startsWith('./') && !filepath.startsWith('../')) {
+    // Package import
+    return filepath;
+  }
+
+  const idx = filepath.lastIndexOf('.');
+  if (idx === -1 || filepath.includes('/', idx)) {
+    // No extension
+    const newExt = extMapping[''];
+    if (newExt) {
+      return filepath + newExt;
+    }
+    return filepath;
+  }
+
+  for (const [origExt, newExt] of Object.entries(extMapping).sort(
+    (a, b) => b[0].length - a[0].length
+  )) {
+    if (filepath.endsWith(origExt)) {
+      return filepath.slice(0, -origExt.length) + newExt;
+    }
+  }
+  return filepath;
+}
+
+function getOption(state, key) {
+  const opts = state.opts || {};
+  return opts[key];
+}
+
+
+module.exports = function ({types: t}) {
+  return {
+    visitor: {
+      ImportDeclaration(path, state) {
+        const extMapping = getOption(state, 'extMapping');
+        if (!extMapping) {
+          return;
+        }
+        const source = path.node.source;
+
+        source.value = transformExtension(source.value, extMapping);
+      },
+      // For re-exporting
+      'ExportNamedDeclaration|ExportAllDeclaration'(path, state) {
+        const extMapping = getOption(state, 'extMapping');
+        if (!extMapping) {
+          return;
+        }
+        const source = path.node.source;
+        if (source == null) {
+          return;
+        }
+
+        source.value = transformExtension(source.value, extMapping);
+      },
+    },
+  };
+}

packages/vuetify/build/rollup.config.js

@@ -1,39 +1,95 @@
 import path from 'path'
-import dts from 'rollup-plugin-dts'
+import mkdirp from 'mkdirp'
+import { writeFile } from 'fs/promises'
+
+import { version } from '../package.json'
+
 import alias from '@rollup/plugin-alias'
+import sass from 'rollup-plugin-sass'
+import { babel } from '@rollup/plugin-babel'
+import { terser } from 'rollup-plugin-terser'
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+
+import autoprefixer from 'autoprefixer'
+import cssnano from 'cssnano'
+import postcss from 'postcss'
 
-const externalsPlugin = () => ({
-  resolveId (source, importer) {
-    if (importer && (source.endsWith('.sass') || source.endsWith('.scss'))) {
-      return {
-        id: source,
-        external: true,
-        moduleSideEffects: false,
-      }
+const extensions = ['.ts', '.tsx', '.js', '.jsx', '.es6', '.es', '.mjs']
+const banner = `/*!
+* Vuetify v${version}
+* Forged by John Leider
+* Released under the MIT License.
+*/\n`
+
+export default {
+  input: 'src/entry-bundler.ts',
+  output: [
+    {
+      file: 'dist/vuetify.esm.js',
+      format: 'es',
+      sourcemap: true,
+      banner,
+    },
+    {
+      file: 'dist/vuetify.js',
+      name: 'Vuetify',
+      format: 'umd',
+      globals: { vue: 'Vue' },
+      sourcemap: true,
+      banner,
+    },
+    {
+      file: 'dist/vuetify.min.js',
+      name: 'Vuetify',
+      format: 'umd',
+      globals: { vue: 'Vue' },
+      plugins: [terser({
+        output: { comments: /^!/ }
+      })],
+      sourcemap: true,
+      banner,
     }
-  }
-})
+  ],
+  external: ['vue'],
+  plugins: [
+    nodeResolve({ extensions }),
+    babel({
+      extensions,
+      babelHelpers: 'inline'
+    }),
+    sass({
+      output(styles, styleNodes) {
+        // Complete CSS bundle
+        mkdirp(path.resolve(__dirname, '../dist')).then(() => {
+          return Promise.all([
+            postcss([autoprefixer]).process(styles, { from: 'src' }),
+            postcss([autoprefixer, cssnano({
+              preset: 'default',
+              postcssZindex: false,
+              reduceIdents: false
+            })]).process(styles, { from: 'src' })
+          ])
+        }).then(result => {
+          writeFile(path.resolve(__dirname, '../dist/vuetify.css'), banner + result[0].css, 'utf8')
+          writeFile(path.resolve(__dirname, '../dist/vuetify.min.css'), banner + result[1].css, 'utf8')
+        })
 
-function createConfig (input, output) {
-  return {
-    input: 'types-temp/' + input,
-    output: [{ file: output, format: 'es' }],
-    plugins: [
-      dts(),
-      externalsPlugin(),
-      alias({
-        entries: [
-          { find: /^@\/(.*)/, replacement: path.resolve(__dirname, '../types-temp/$1') },
-        ]
-      })
-    ],
-  }
+        // Individual CSS files
+        for (const { id, content } of styleNodes) {
+          const out = path.parse(id.replace(
+            path.resolve(__dirname, '../src'),
+            path.resolve(__dirname, '../lib')
+          ))
+          mkdirp(out.dir).then(() => {
+            writeFile(path.join(out.dir, out.name + '.css'), content, 'utf8')
+          })
+        }
+      },
+    }),
+    alias({
+      entries: [
+        { find: /^@\/(.*)/, replacement: path.resolve(__dirname, '../src/$1') },
+      ]
+    })
+  ],
 }
-
-export default [
-  createConfig('entry.d.ts', 'lib/entry.d.ts'),
-  createConfig('framework.d.ts', 'lib/framework.d.ts'),
-  createConfig('entry-bundler.d.ts', 'dist/vuetify.d.ts'),
-  createConfig('components/index.d.ts', 'lib/components/index.d.ts'),
-  createConfig('directives/index.d.ts', 'lib/directives/index.d.ts'),
-]

packages/vuetify/build/rollup.types.config.js

@@ -0,0 +1,40 @@
+import path from 'path'
+
+import dts from 'rollup-plugin-dts'
+import alias from '@rollup/plugin-alias'
+
+const externalsPlugin = () => ({
+  resolveId (source, importer) {
+    if (importer && (source.endsWith('.sass') || source.endsWith('.scss'))) {
+      return {
+        id: source,
+        external: true,
+        moduleSideEffects: false,
+      }
+    }
+  }
+})
+
+function createTypesConfig (input, output) {
+  return {
+    input: 'types-temp/' + input,
+    output: [{ file: output, format: 'es' }],
+    plugins: [
+      dts(),
+      externalsPlugin(),
+      alias({
+        entries: [
+          { find: /^@\/(.*)/, replacement: path.resolve(__dirname, '../types-temp/$1') },
+        ]
+      })
+    ],
+  }
+}
+
+export default [
+  createTypesConfig('entry.d.ts', 'lib/entry.d.ts'),
+  createTypesConfig('framework.d.ts', 'lib/framework.d.ts'),
+  createTypesConfig('entry-bundler.d.ts', 'dist/vuetify.d.ts'),
+  createTypesConfig('components/index.d.ts', 'lib/components/index.d.ts'),
+  createTypesConfig('directives/index.d.ts', 'lib/directives/index.d.ts'),
+]