add support for dojo theming (codesandbox#804)

For dojo themes to work properly a special " _key" property should exist
on the CSS module JS file that's value is the package name plus the name
of the css file.

This commit makes the following changes:

- add a custom styles transpiler for dojo that adds the " _key" property
- Update the dojo preset to use the new styles transpiler
- split out the `classesToDefinition` method into its own utility module and import it into the existing and dojo style transpilers

Author: nicknisi

packages/app/src/sandbox/eval/presets/dojo/index.js

@@ -5,6 +5,7 @@ import typescriptTranspiler from '../../transpilers/typescript';
 import rawTranspiler from '../../transpilers/raw';
 import jsonTranspiler from '../../transpilers/json';
 import stylesTranspiler from '../../transpilers/style';
+import dojoStylesTranspiler from './transpilers/style';
 import babelTranspiler from '../../transpilers/babel';
 
 export default function initialize() {
@@ -47,7 +48,7 @@ export default function initialize() {
   ]);
 
   preset.registerTranspiler(module => /\.m\.css$/.test(module.path), [
-    { transpiler: stylesTranspiler, options: { module: true } },
+    { transpiler: dojoStylesTranspiler },
   ]);
 
   preset.registerTranspiler(module => /\.css$/.test(module.path), [

packages/app/src/sandbox/eval/presets/dojo/transpilers/style.js

@@ -0,0 +1,31 @@
+// @flow
+import { dispatch } from 'codesandbox-api';
+import { StyleTranspiler } from '../../../transpilers/style';
+import { type LoaderContext } from '../../../transpiled-module';
+import insertCss from '../../../transpilers/style/utils/insert-css';
+import toDefinition from '../../../transpilers/style/utils/to-definition';
+import getModules from '../../../transpilers/style/get-modules';
+
+const getStyleId = id => id + '-css';
+
+class DojoStyleTranspiler extends StyleTranspiler {
+  async doTranspilation(code: string, loaderContext: LoaderContext) {
+    const id = getStyleId(loaderContext._module.getId());
+    const { path } = loaderContext;
+    const { code: packageJson } = loaderContext.getModules().find(module => module.path === '/package.json');
+    const { name: packageName } = JSON.parse(packageJson);
+    const [, baseName ] = /\/([^/.]*)[^/]*$/.exec(path);
+    const key = `${packageName}/${baseName}`;
+    const { css, exportTokens } = await getModules(code, loaderContext);
+    let result = insertCss(id, css);
+    result += `\nmodule.exports=${JSON.stringify({ ' _key': key, ...exportTokens  })};`
+    dispatch({ type: 'add-extra-lib', path, code: toDefinition(exportTokens) });
+    return { transpiledCode: result };
+  }
+}
+
+const transpiler = new DojoStyleTranspiler();
+
+export { DojoStyleTranspiler as StyleTranspiler };
+
+export default transpiler;

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

@@ -4,17 +4,11 @@ import Transpiler from '../';
 import { type LoaderContext } from '../../transpiled-module';
 
 import insertCss from './utils/insert-css';
+import toDefinition from './utils/to-definition';
 import getModules from './get-modules';
 
 const getStyleId = id => id + '-css'; // eslint-disable-line
 
-function classesToDefinition(classes): string {
-  return Object.keys(classes).reduce(
-    (previous, className) => previous + `export const ${className}: string;\n`,
-    ''
-  );
-}
-
 class StyleTranspiler extends Transpiler {
   constructor() {
     super('style-loader');
@@ -42,7 +36,7 @@ class StyleTranspiler extends Transpiler {
         dispatch({
           type: 'add-extra-lib',
           path,
-          code: classesToDefinition(exportTokens),
+          code: toDefinition(exportTokens),
         });
         return Promise.resolve({ transpiledCode: result });
       });

packages/app/src/sandbox/eval/transpilers/style/utils/to-definition.js

@@ -0,0 +1,8 @@
+// @flow
+
+export default function toDefinition(classes): string {
+  return Object.keys(classes).reduce(
+    (previous, className) => previous + `export const ${className}: string;\n`,
+    ''
+  );
+}