fix(playground): fix safari import error (#580)

varletjs · May 24, 2022 · a5c8c99 · a5c8c99
1 parent 3807b8c
commit a5c8c99
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/packages/varlet-cli/src/commands/compile.ts b/packages/varlet-cli/src/commands/compile.ts
@@ -27,8 +27,15 @@ export async function compile(cmd: { noUmd: boolean }) {
   await removeDir()
   await Promise.all([runTask('types', compileTypes), runTask('template highlight', compileTemplateHighlight)])
 
+  process.env.TARGET_MODULE = 'module'
   await runTask('module', compileModule)
+
+  process.env.TARGET_MODULE = 'esm-bundle'
   await runTask('esm bundle', () => compileModule('esm-bundle'))
+
+  process.env.TARGET_MODULE = 'commonjs'
   await runTask('commonjs', () => compileModule('commonjs'))
+
+  process.env.TARGET_MODULE = 'umd'
   !cmd.noUmd && (await runTask('umd', () => compileModule('umd')))
 }
diff --git a/packages/varlet-ui-playground/src/store.ts b/packages/varlet-ui-playground/src/store.ts
@@ -5,14 +5,16 @@ import { compileFile, File } from '@vue/repl'
 import { utoa, atou } from './utils/encode'
 import { Snackbar } from '@varlet/ui'
 
+const publicPath = process.env.NODE_ENV === 'production' ? 'https://varlet-ui-playground.vercel.app/' : './'
+
 const defaultMainFile = 'App.vue'
 const varletReplPlugin = 'varlet-repl-plugin.js'
 const varletImports = {
-  '@varlet/ui': './varlet.esm.js',
-  '@varlet/touch-emulator': './varlet-touch-emulator.js',
-  '@varlet/ui/json/area.json': './varlet-area.js',
+  '@varlet/ui': `${publicPath}varlet.esm.js`,
+  '@varlet/touch-emulator': `${publicPath}varlet-touch-emulator.js`,
+  '@varlet/ui/json/area.json': `${publicPath}varlet-area.js`,
 }
-const varletCss = './varlet.css'
+const varletCss = `${publicPath}varlet.css`
 
 const welcomeCode = `\
 <script setup lang='ts'>

diff --git a/packages/varlet-ui/postcss.config.js b/packages/varlet-ui/postcss.config.js
@@ -1,11 +1,15 @@
-module.exports = {
-  plugins: {
-    'postcss-px-to-viewport': {
+module.exports = () => {
+  const plugins = {}
+
+  if (!process.env.TARGET_MODULE) {
+    plugins['postcss-px-to-viewport'] = {
       viewportWidth: 375,
       unitPrecision: 6,
       unitToConvert: 'px',
       propList: ['*'],
       exclude: [/site\/components\//, /site\/pc/],
-    },
-  },
+    }
+  }
+
+  return { plugins }
 }