Added relative paths support to css and ts plugins

packages/pack/src/plugins/CssPlugin.ts

@@ -46,8 +46,9 @@ class CssPlugin implements Plugin {
     const processor = this.getCssProcessor(context)
     const files = await glob(this.options.src, { cwd: ctx, ignore: this.options.ignore })
     for (const file of files) {
-      const rawContent = await readFile(resolve(ctx, file), 'utf-8')
-      const content = await this.runCssProcessorIfAvailable(rawContent, processor)
+      const filePath = resolve(ctx, file)
+      const rawContent = await readFile(filePath, 'utf-8')
+      const content = await this.runCssProcessorIfAvailable(rawContent, filePath, processor)
       const dirs = this.options.output ? this.options.output : [output]
       for (const dir of dirs) {
         const destPath = resolve(context, dir, file)
@@ -59,9 +60,9 @@ class CssPlugin implements Plugin {
     done()
   }
 
-  private runCssProcessorIfAvailable(rawContent: string, processor?: Processor) {
+  private runCssProcessorIfAvailable(rawContent: string, filePath: string, processor?: Processor) {
     if (this.availableCssProcessor(processor)) {
-      return processor.process(rawContent, { from: '', to: '' }).then((result) => result.css)
+      return processor.process(rawContent, { from: filePath, to: '' }).then((result) => result.css)
     }
 
     return Promise.resolve(rawContent)

packages/pack/src/plugins/TypeScriptPlugin.ts

@@ -24,6 +24,11 @@ type Options = {
    * A map whose keys must be replaced for values.
    */
   replace?: Record<string, string>
+
+  /**
+   * A path to esm output directory
+   */
+  esmOutput?: string
 }
 
 class TypeScriptPlugin implements Plugin {
@@ -37,12 +42,13 @@ class TypeScriptPlugin implements Plugin {
   async onRun(done: OnDone, { context, output }: HookOptions) {
     mark('TypeScriptPlugin::onRun(start)')
     const configPath = this.getConfigPath(context)
+    const esmOutput = this.options.esmOutput || resolve(output, 'esm')
     try {
       this.typescriptResult = await Promise.all([
         // prettier-ignore
         execAsync(`npx tsc -p ${configPath} --listEmittedFiles --module commonjs --outDir ${output}`),
         // prettier-ignore
-        execAsync(`npx tsc -p ${configPath} --listEmittedFiles --module esnext --outDir ${resolve(output, 'esm')}`),
+        execAsync(`npx tsc -p ${configPath} --listEmittedFiles --module esnext --outDir ${esmOutput}`),
       ])
     } catch (error) {
       throw new Error(error.stdout)
@@ -88,11 +94,13 @@ class TypeScriptPlugin implements Plugin {
 
   // TODO: Move this logic to separate plugin.
   private async generateModulePackage(src: string): Promise<void> {
-    const files = await glob('**/index.js', { cwd: src })
+    const files = await glob('**/index.js', { cwd: src, ignore: [`${src}/esm/`] })
+    const esmOutput = this.options.esmOutput || 'esm'
     for (const file of files) {
-      const moduleDirname = dirname(file)
-      const esmModuleDirname = dirname(join('esm', file))
+      const moduleDirname = dirname(join(src, file))
+      const esmModuleDirname = dirname(join(esmOutput, file))
       const packageJsonPath = resolve(src, moduleDirname, 'package.json')
+      const esmPackageJsonPath = resolve(src, esmModuleDirname, 'package.json')
       const json: { sideEffects: string[] | boolean; module?: string } = {
         sideEffects: ['*.css', '*@desktop.js', '*@touch-phone.js', '*@touch-pad.js'],
       }
@@ -104,9 +112,9 @@ class TypeScriptPlugin implements Plugin {
         }
       }
 
-      if (file.match(/^esm/) === null) {
-        json.module = join(relative(moduleDirname, esmModuleDirname), 'index.js')
-      }
+      await writeJson(esmPackageJsonPath, json, { spaces: 2 })
+
+      json.module = join(relative(moduleDirname, esmModuleDirname), 'index.js')
 
       await writeJson(packageJsonPath, json, { spaces: 2 })
     }