diff --git a/runtime/createExports.js b/runtime/createExports.js index 87bb7ce..9eee24b 100644 --- a/runtime/createExports.js +++ b/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; -} - +}; diff --git a/src/babel/plugin.js b/src/babel/plugin.js index ff7c6c2..d57a6ee 100644 --- a/src/babel/plugin.js +++ b/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) + ) ) ); } diff --git a/tests/babel/__snapshots__/babel.test.js.snap b/tests/babel/__snapshots__/babel.test.js.snap index dfccc9d..1113993 100644 --- a/tests/babel/__snapshots__/babel.test.js.snap +++ b/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\\" };" `; diff --git a/tests/babel/babel.test.js b/tests/babel/babel.test.js index fbbe11d..9b8ab5a 100644 --- a/tests/babel/babel.test.js +++ b/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"); }); diff --git a/tests/runtime.test.js b/tests/runtime.test.js index e2a45dd..990dd2f 100644 --- a/tests/runtime.test.js +++ b/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"); });