Optionally adding original class name to ease debug and reporting on Sentry

runtime/createExports.js

@@ -10,7 +10,11 @@ module.exports.createExports = function(options) {
     create(styles) {
       const result = {};
       for (const key of Object.keys(styles)) {
-        result[key] = sheet.process(styles[key], undefined, undefined, options);
+        const originalClassName =
+          (options && options.addOriginalClassName) !== false ? `_${key} ` : "";
+        result[key] =
+          originalClassName +
+          sheet.process(styles[key], undefined, undefined, options);
       }
       browser.insert(sheet.flush());
       return result;
@@ -22,5 +26,4 @@ module.exports.createExports = function(options) {
   };
 
   return exports;
-}
-
+};

src/babel/plugin.js

@@ -47,10 +47,15 @@ module.exports = function plugin(babel) {
           );
           const props = [];
           for (const key of Object.keys(styles)) {
+            const originalClassName =
+              state.opts && state.opts.addOriginalClassName ? `_${key} ` : "";
             props.push(
               t.objectProperty(
                 t.identifier(key),
-                t.stringLiteral(sheet.process(styles[key], undefined, undefined, state.opts))
+                t.stringLiteral(
+                  originalClassName +
+                    sheet.process(styles[key], undefined, undefined, state.opts)
+                )
               )
             );
           }

tests/babel/__snapshots__/babel.test.js.snap

@@ -49,7 +49,7 @@ function getGreen() {
 }
 
 const styles = {
-  bgGreen: \\"gkp15_backgroundColor_green\\"
+  bgGreen: \\"_bgGreen gkp15_backgroundColor_green\\"
 };"
 `;
 
@@ -94,7 +94,7 @@ const styles = StyleSheet.create({
 
 import * as Colors from \\"./imports/colors.es\\";
 const styles = {
-  bgGreen: \\"gkp15_backgroundColor_green\\"
+  bgGreen: \\"_bgGreen gkp15_backgroundColor_green\\"
 };"
 `;
 
@@ -149,8 +149,8 @@ const styles = StyleSheet.create({
 
 import { GREEN, RED } from \\"./imports/colors.es\\";
 const styles = {
-  bgGreen: \\"gkp15_backgroundColor_green\\",
-  bgRed: \\"gkp15_backgroundColor_red\\"
+  bgGreen: \\"_bgGreen gkp15_backgroundColor_green\\",
+  bgRed: \\"_bgRed gkp15_backgroundColor_red\\"
 };"
 `;
 
@@ -197,7 +197,7 @@ const styles = StyleSheet.create({
 const colors = require(\\"./imports/colors.cjs\\");
 
 const styles = {
-  bgGreen: \\"gkp15_backgroundColor_green\\"
+  bgGreen: \\"_bgGreen gkp15_backgroundColor_green\\"
 };"
 `;
 
@@ -240,7 +240,7 @@ const styles = StyleSheet.create({
 
 const green = \\"green\\";
 const styles = {
-  bgGreen: \\"gkp15_backgroundColor_green\\"
+  bgGreen: \\"_bgGreen gkp15_backgroundColor_green\\"
 };"
 `;
 
@@ -277,6 +277,6 @@ exports[`static.js: prettyCompiled 1`] = `
       ↓ ↓ ↓ ↓ ↓ ↓
 
 const styles = {
-  bgGreen: \\"gkp15_backgroundColor_green\\"
+  bgGreen: \\"_bgGreen gkp15_backgroundColor_green\\"
 };"
 `;

tests/babel/babel.test.js

@@ -47,7 +47,7 @@ fs.readdirSync(path.resolve(__dirname, "fixtures")).forEach(filename => {
     sheet.reset();
     const { code: prettyCode } = babel.transform(source, {
       filename: realpath,
-      plugins: [[ plugin, { prettyClassNames: true } ]],
+      plugins: [[ plugin, { prettyClassNames: true, addOriginalClassName: true } ]],
     });
     expect(source + separator + prettyCode).toMatchSnapshot("prettyCompiled");
   });

tests/runtime.test.js

@@ -9,7 +9,7 @@ const ReactDOM = require("react-dom");
 const ReactTestUtils = require("react-dom/test-utils");
 
 const { StyleSheet, classnames: cn, reset } = require("../runtime");
-const { StyleSheet : PrettyStyleSheet } = require("../runtime/pretty");
+const { StyleSheet: PrettyStyleSheet } = require("../runtime/pretty");
 
 function childStyle(node, p = null) {
   return window.getComputedStyle(node.childNodes[0], p);
@@ -40,7 +40,9 @@ test("works", () => {
     container
   );
 
-  expect(node.getAttribute("class")).toMatchInlineSnapshot(`"gk0_bf54id"`);
+  expect(node.getAttribute("class")).toMatchInlineSnapshot(
+    `"_bgGreen gk0_bf54id"`
+  );
   expect(window.getComputedStyle(node).backgroundColor).toEqual("green");
 });
 
@@ -56,6 +58,8 @@ test("works [pretty]", () => {
     container
   );
 
-  expect(node.getAttribute("class")).toMatchInlineSnapshot(`"gkp15_backgroundColor_green"`);
+  expect(node.getAttribute("class")).toMatchInlineSnapshot(
+    `"_bgGreen gkp15_backgroundColor_green"`
+  );
   expect(window.getComputedStyle(node).backgroundColor).toEqual("green");
 });