Support css imports in CRA (codesandbox#3837)

* Support css imports in CRA

* Fix absolute paths

* Make PostCSS its own processor

Author: CompuIves

packages/app/src/sandbox/eval/presets/create-react-app/v3.ts

@@ -11,6 +11,7 @@ import rawTranspiler from '../../transpilers/raw';
 import svgrTranspiler from '../../transpilers/svgr';
 import sassTranspiler from '../../transpilers/sass';
 import refreshTranspiler from '../../transpilers/react/refresh-transpiler';
+import styleProcessor from '../../transpilers/postcss';
 import {
   hasRefresh,
   aliases,
@@ -190,6 +191,7 @@ export default function initialize() {
             module => /\.module\.s[c|a]ss$/.test(module.path),
             [
               { transpiler: sassTranspiler },
+              { transpiler: styleProcessor },
               {
                 transpiler: stylesTranspiler,
                 options: { module: true, hmrEnabled: isRefresh },
@@ -199,6 +201,7 @@ export default function initialize() {
           preset.registerTranspiler(
             module => /\.module\.css$/.test(module.path),
             [
+              { transpiler: styleProcessor },
               {
                 transpiler: stylesTranspiler,
                 options: { module: true, hmrEnabled: isRefresh },
@@ -207,13 +210,15 @@ export default function initialize() {
           );
 
           preset.registerTranspiler(module => /\.css$/.test(module.path), [
+            { transpiler: styleProcessor },
             {
               transpiler: stylesTranspiler,
               options: { hmrEnabled: isRefresh },
             },
           ]);
           preset.registerTranspiler(module => /\.s[c|a]ss$/.test(module.path), [
             { transpiler: sassTranspiler },
+            { transpiler: styleProcessor },
             {
               transpiler: stylesTranspiler,
               options: { hmrEnabled: isRefresh },

packages/app/src/sandbox/eval/transpilers/postcss/index.ts

@@ -0,0 +1,23 @@
+import Transpiler from '..';
+import { LoaderContext } from '../../transpiled-module';
+
+/**
+ * Mainly responsible for inlining css imports
+ */
+class PostCSSCompiler extends Transpiler {
+  constructor() {
+    super('postcss-compiler');
+  }
+
+  doTranspilation(code: string, loaderContext: LoaderContext) {
+    return import(
+      /* webpackChunkName: 'postcss-compiler' */ './loader'
+    ).then(loader => loader.default(code, loaderContext));
+  }
+}
+
+const transpiler = new PostCSSCompiler();
+
+export { PostCSSCompiler };
+
+export default transpiler;

packages/app/src/sandbox/eval/transpilers/postcss/loader.ts

@@ -0,0 +1,96 @@
+import postcss, { ProcessOptions } from 'postcss';
+import postcssImportPlugin from 'postcss-import';
+import { join } from 'path';
+import { isDependencyPath } from 'sandbox/eval/utils/is-dependency-path';
+
+import TranspiledModule, { LoaderContext } from '../../transpiled-module';
+
+async function resolveCSSFile(
+  loaderContext: LoaderContext,
+  path: string,
+  basePath: string
+): Promise<TranspiledModule> {
+  const isDependency = isDependencyPath(path);
+
+  if (isDependency) {
+    // First try to resolve the package.json, in case it has a style field
+    try {
+      const pkgJson = await loaderContext.resolveTranspiledModuleAsync(
+        join(path, 'package.json')
+      );
+      const parsedPkg = JSON.parse(pkgJson.module.code);
+
+      if (parsedPkg.style) {
+        const fullPath = join(path, parsedPkg.style);
+
+        return loaderContext.resolveTranspiledModuleAsync(fullPath);
+      }
+    } catch (e) {
+      /* Move to step 2 */
+    }
+
+    return loaderContext.resolveTranspiledModuleAsync(path);
+  }
+
+  const fullPath = path.charAt(0) === '/' ? path : join(basePath, path);
+  return loaderContext.resolveTranspiledModuleAsync(fullPath);
+}
+
+export default function(
+  code: string,
+  loaderContext: LoaderContext
+): Promise<{ transpiledCode: string; sourceMap: any }> {
+  return new Promise((resolve, reject) => {
+    const plugins = [
+      postcssImportPlugin({
+        resolve: async (id: string, root: string) => {
+          try {
+            const result = await resolveCSSFile(loaderContext, id, root);
+
+            return result.module.path;
+          } catch (e) {
+            return null;
+          }
+        },
+        load: async (filename: string) => {
+          const tModule = await loaderContext.resolveTranspiledModuleAsync(
+            filename
+          );
+
+          return tModule.module.code;
+        },
+      }),
+    ];
+
+    const options: ProcessOptions = {
+      to: loaderContext.path,
+      from: loaderContext.path,
+      map: {
+        inline: true,
+        annotation: true,
+      },
+    };
+
+    return (
+      postcss(plugins)
+        // Explcitly give undefined if code is null, otherwise postcss crashses
+        .process(code === null ? undefined : code, options)
+        .then(result => {
+          if (result.messages) {
+            const messages = result.messages as any[];
+            messages.forEach(m => {
+              if (m.type === 'dependency') {
+                loaderContext.addDependency(m.file);
+              }
+            });
+          }
+
+          const map = result.map && result.map.toJSON();
+          resolve({ transpiledCode: result.css, sourceMap: map });
+
+          return null; // silence bluebird warning
+        })
+        .catch(err => reject(err))
+    );
+  });
+}

packages/app/src/sandbox/eval/transpilers/vue/style-compiler/loader.ts

@@ -1,11 +1,44 @@
 import postcss, { ProcessOptions } from 'postcss';
 import postcssImportPlugin from 'postcss-import';
+import { join } from 'path';
+import { isDependencyPath } from 'sandbox/eval/utils/is-dependency-path';
 
-import { LoaderContext } from '../../../transpiled-module';
+import TranspiledModule, { LoaderContext } from '../../../transpiled-module';
 
 import trim from './plugins/trim';
 import scopeId from './plugins/scope-id';
 
+async function resolveCSSFile(
+  loaderContext: LoaderContext,
+  path: string,
+  basePath: string
+): Promise<TranspiledModule> {
+  const isDependency = isDependencyPath(path);
+
+  if (isDependency) {
+    // First try to resolve the package.json, in case it has a style field
+    try {
+      const pkgJson = await loaderContext.resolveTranspiledModuleAsync(
+        join(path, 'package.json')
+      );
+      const parsedPkg = JSON.parse(pkgJson.module.code);
+
+      if (parsedPkg.style) {
+        const fullPath = join(path, parsedPkg.style);
+
+        return loaderContext.resolveTranspiledModuleAsync(fullPath);
+      }
+    } catch (e) {
+      /* Move to step 2 */
+    }
+
+    return loaderContext.resolveTranspiledModuleAsync(path);
+  }
+
+  const fullPath = path.charAt(0) === '/' ? path : join(basePath, path);
+  return loaderContext.resolveTranspiledModuleAsync(fullPath);
+}
+
 export default function(
   code: string,
   loaderContext: LoaderContext
@@ -24,9 +57,9 @@ export default function(
     // TODO autoprefixer
     const plugins = [
       postcssImportPlugin({
-        resolve: async (id: string) => {
+        resolve: async (id: string, root: string) => {
           try {
-            const result = await loaderContext.resolveTranspiledModuleAsync(id);
+            const result = await resolveCSSFile(loaderContext, id, root);
 
             return result.module.path;
           } catch (e) {

packages/app/src/sandbox/eval/utils/is-dependency-path.ts

@@ -0,0 +1 @@
+export const isDependencyPath = (p: string) => /^(\w|@\w)/.test(p);