From dd38285fd013ac44e6f7261a40dd348147f7bb8c Mon Sep 17 00:00:00 2001 From: Rodrigo Almeida Date: Wed, 6 Mar 2019 15:08:28 -0300 Subject: [PATCH 1/3] WIP: ocn --- runtime/createExports.js | 3 ++- src/babel/plugin.js | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/runtime/createExports.js b/runtime/createExports.js index 87bb7ce..2edd344 100644 --- a/runtime/createExports.js +++ b/runtime/createExports.js @@ -10,7 +10,8 @@ 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; diff --git a/src/babel/plugin.js b/src/babel/plugin.js index ff7c6c2..cc34b2c 100644 --- a/src/babel/plugin.js +++ b/src/babel/plugin.js @@ -47,10 +47,11 @@ 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)) ) ); } From 1a9ba5ff54c8a27e5f335d18fe17916c1347d036 Mon Sep 17 00:00:00 2001 From: Rodrigo Almeida Date: Wed, 6 Mar 2019 15:12:23 -0300 Subject: [PATCH 2/3] updated snapshots --- runtime/createExports.js | 2 +- src/babel/plugin.js | 2 +- tests/babel/__snapshots__/babel.test.js.snap | 14 +++++++------- tests/babel/babel.test.js | 2 +- tests/runtime.test.js | 10 +++++++--- 5 files changed, 17 insertions(+), 13 deletions(-) diff --git a/runtime/createExports.js b/runtime/createExports.js index 2edd344..289f898 100644 --- a/runtime/createExports.js +++ b/runtime/createExports.js @@ -10,7 +10,7 @@ module.exports.createExports = function(options) { create(styles) { const result = {}; for (const key of Object.keys(styles)) { - const originalClassName = ((options && options.addOriginalClassName) !== false) ? `._${key} ` : ''; + const originalClassName = ((options && options.addOriginalClassName) !== false) ? `_${key} ` : ''; result[key] = originalClassName + sheet.process(styles[key], undefined, undefined, options); } browser.insert(sheet.flush()); diff --git a/src/babel/plugin.js b/src/babel/plugin.js index cc34b2c..0815695 100644 --- a/src/babel/plugin.js +++ b/src/babel/plugin.js @@ -47,7 +47,7 @@ module.exports = function plugin(babel) { ); const props = []; for (const key of Object.keys(styles)) { - const originalClassName = (state.opts && state.opts.addOriginalClassName) ? `._${key} ` : ''; + const originalClassName = (state.opts && state.opts.addOriginalClassName) ? `_${key} ` : ''; props.push( t.objectProperty( t.identifier(key), 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"); }); From 2853bac4392d157dcf2fb480fced2c65ab250c9d Mon Sep 17 00:00:00 2001 From: Rodrigo Almeida Date: Wed, 6 Mar 2019 15:14:12 -0300 Subject: [PATCH 3/3] prettier --- runtime/createExports.js | 10 ++++++---- src/babel/plugin.js | 8 ++++++-- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/runtime/createExports.js b/runtime/createExports.js index 289f898..9eee24b 100644 --- a/runtime/createExports.js +++ b/runtime/createExports.js @@ -10,8 +10,11 @@ module.exports.createExports = function(options) { create(styles) { const result = {}; for (const key of Object.keys(styles)) { - const originalClassName = ((options && options.addOriginalClassName) !== false) ? `_${key} ` : ''; - result[key] = originalClassName + 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; @@ -23,5 +26,4 @@ module.exports.createExports = function(options) { }; return exports; -} - +}; diff --git a/src/babel/plugin.js b/src/babel/plugin.js index 0815695..d57a6ee 100644 --- a/src/babel/plugin.js +++ b/src/babel/plugin.js @@ -47,11 +47,15 @@ module.exports = function plugin(babel) { ); const props = []; for (const key of Object.keys(styles)) { - const originalClassName = (state.opts && state.opts.addOriginalClassName) ? `_${key} ` : ''; + const originalClassName = + state.opts && state.opts.addOriginalClassName ? `_${key} ` : ""; props.push( t.objectProperty( t.identifier(key), - t.stringLiteral(originalClassName + sheet.process(styles[key], undefined, undefined, state.opts)) + t.stringLiteral( + originalClassName + + sheet.process(styles[key], undefined, undefined, state.opts) + ) ) ); }