Fix preact css loading (codesandbox#308)

Author: CompuIves

package.json

@@ -9,7 +9,7 @@
       "lerna run build --scope app --scope homepage --parallel && gulp",
     "build:dependents":
       "lerna run build --ignore app --ignore homepage --parallel",
-    "start": "lerna run start",
+    "start": "lerna run start --parallel",
     "start:test": "lerna run start:test --scope app --stream",
     "test": "lerna run test",
     "test:integrations": "lerna run test:integrations --scope app --stream",

packages/app/src/sandbox/eval/presets/preact-cli/index.js

@@ -50,25 +50,43 @@ preactPreset.registerTranspiler(module => /\.jsx?$/.test(module.path), [
   },
 ]);
 
-preactPreset.registerTranspiler(module => /\.s[a|c]ss/.test(module.path), [
-  { transpiler: sassTranspiler },
-  { transpiler: stylesTranspiler },
-]);
+// For these routes we need to enable css modules
+const cssModulesPaths = [
+  '/src/components',
+  '/components',
+  '/src/routes',
+  '/routes',
+];
 
-preactPreset.registerTranspiler(module => /\.less/.test(module.path), [
-  { transpiler: lessTranspiler },
-  { transpiler: stylesTranspiler },
-]);
+const cssModulesRegex = extension =>
+  new RegExp(`^(${cssModulesPaths.join('|')})\/.*\.${extension}$`);
+
+const cssTypes = {
+  css: [],
+  's[a|c]ss': [sassTranspiler],
+  less: [lessTranspiler],
+  styl: [stylusTranspiler],
+};
+
+Object.keys(cssTypes).forEach(cssType => {
+  preactPreset.registerTranspiler(
+    module => cssModulesRegex(cssType).test(module.path),
+    [
+      ...cssTypes[cssType],
+      { transpiler: stylesTranspiler, options: { module: true } },
+    ]
+  );
+
+  preactPreset.registerTranspiler(
+    module => new RegExp(`\.${cssType}$`).test(module.path),
+    [...cssTypes[cssType], { transpiler: stylesTranspiler }]
+  );
+});
 
 preactPreset.registerTranspiler(module => /\.json/.test(module.path), [
   { transpiler: jsonTranspiler },
 ]);
 
-preactPreset.registerTranspiler(module => /\.styl/.test(module.path), [
-  { transpiler: stylusTranspiler },
-  { transpiler: stylesTranspiler },
-]);
-
 // Support for !async statements
 preactPreset.registerTranspiler(
   () => false /* never load without explicit statement */,

packages/app/src/sandbox/eval/transpilers/css/index.js

@@ -28,7 +28,7 @@ class StyleTranspiler extends Transpiler {
     if (loaderContext.options.module) {
       return getModules(code, loaderContext).then(({ css, exportTokens }) => {
         let result = insertCss(id, css);
-        result += `\nexports=${JSON.stringify(exportTokens)};`;
+        result += `\nmodule.exports=${JSON.stringify(exportTokens)};`;
 
         return Promise.resolve({ transpiledCode: result });
       });

packages/codesandbox-api/package.json

@@ -22,7 +22,8 @@
     "build:clean": "tsc && rollup -c",
     "build":
       "tsc && rollup -c && rimraf compiled && typedoc --out dist/docs --target es6 --theme minimal src",
-    "start": "nodemon -e ts --exec \"npm run build:clean\"",
+    "start":
+      "nodemon --watch \"src/**/*.ts\" -e ts --exec \"npm run build:clean\"",
     "test": "echo TODO",
     "test:watch": "jest --watch",
     "test:prod": "npm run lint && npm run test -- --coverage --no-cache",