From 091b02e334495ddcde2f16badb9c1719f9ab1831 Mon Sep 17 00:00:00 2001 From: Melvin Groenhoff Date: Wed, 30 May 2018 12:04:42 +0200 Subject: [PATCH 1/2] Do not include source maps when generating hash --- packages/create-emotion/src/index.js | 12 +++++++++- .../__snapshots__/source-map.test.js.snap | 22 +++++++++---------- 2 files changed, 22 insertions(+), 12 deletions(-) diff --git a/packages/create-emotion/src/index.js b/packages/create-emotion/src/index.js index 0c1e0e15f..1cbcd64e5 100644 --- a/packages/create-emotion/src/index.js +++ b/packages/create-emotion/src/index.js @@ -259,7 +259,17 @@ function createEmotion( identifierName += `-${p1}` return '' }) - name = hashString(styles + identifierName) + identifierName + if (process.env.NODE_ENV !== 'production') { + name = + hashString( + styles.replace( + /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g, + '' + ) + identifierName + ) + identifierName + } else { + name = hashString(styles + identifierName) + identifierName + } return styles } diff --git a/packages/emotion/test/source-map/__snapshots__/source-map.test.js.snap b/packages/emotion/test/source-map/__snapshots__/source-map.test.js.snap index 2dfedb6d7..8c8b0eaa2 100644 --- a/packages/emotion/test/source-map/__snapshots__/source-map.test.js.snap +++ b/packages/emotion/test/source-map/__snapshots__/source-map.test.js.snap @@ -15,13 +15,13 @@ exports[`css css prop with merge 1`] = ` `; exports[`css css prop with merge 2`] = ` -".css-rw1e5a { +".css-13o7eu2 { display: block; } /*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtRGtEIiwiZmlsZSI6InNvdXJjZS1tYXAudGVzdC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCByZW5kZXJlciBmcm9tICdyZWFjdC10ZXN0LXJlbmRlcmVyJ1xuaW1wb3J0IHsgY3NzLCBzaGVldCwgZmx1c2ggfSBmcm9tICdlbW90aW9uJ1xuXG5kZXNjcmliZSgnY3NzJywgKCkgPT4ge1xuICBhZnRlckVhY2goKCkgPT4gZmx1c2goKSlcbiAgdGVzdCgnc291cmNlLW1hcCBuZXN0ZWQgc3R5bGVzJywgKCkgPT4ge1xuICAgIGNvbnN0IG1xID0gW1xuICAgICAgJ0BtZWRpYShtaW4td2lkdGg6IDQyMHB4KScsXG4gICAgICAnQG1lZGlhKG1pbi13aWR0aDogNjQwcHgpJyxcbiAgICAgICdAbWVkaWEobWluLXdpZHRoOiA5NjBweCknXG4gICAgXVxuXG4gICAgY3NzKHtcbiAgICAgIGNvbG9yOiAnYmx1ZScsXG4gICAgICAnJjpob3Zlcic6IHtcbiAgICAgICAgJyYgLm5hbWUnOiB7XG4gICAgICAgICAgY29sb3I6ICdhbWV0aHlzdCcsXG4gICAgICAgICAgJyY6Zm9jdXMnOiB7XG4gICAgICAgICAgICBjb2xvcjogJ2J1cmx5d29vZCcsXG4gICAgICAgICAgICBbbXFbMF1dOiB7XG4gICAgICAgICAgICAgIGNvbG9yOiAncmViZWNjYXB1cnBsZSdcbiAgICAgICAgICAgIH1cbiAgICAgICAgICB9XG4gICAgICAgIH0sXG4gICAgICAgIGNvbG9yOiAnZ3JlZW4nXG4gICAgICB9XG4gICAgfSlcbiAgICBleHBlY3Qoc2hlZXQpLnRvTWF0Y2hTbmFwc2hvdCgpXG4gIH0pXG5cbiAgdGVzdCgnc291cmNlLW1hcCBuZXN0ZWQgbWVkaWEgcXVlcmllcycsICgpID0+IHtcbiAgICBjc3NgXG4gICAgICBAbWVkaWEgKG1heC13aWR0aDogNjAwcHgpIHtcbiAgICAgICAgaDEge1xuICAgICAgICAgIGZvbnQtc2l6ZTogMS40cmVtO1xuICAgICAgICB9XG4gICAgICB9XG5cbiAgICAgIEBtZWRpYSAobWF4LXdpZHRoOiA0MDBweCksIChtYXgtaGVpZ2h0OiA0MjBweCkge1xuICAgICAgICBoMSB7XG4gICAgICAgICAgZm9udC1zaXplOiAxLjFyZW07XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICBgXG5cbiAgICBleHBlY3Qoc2hlZXQpLnRvTWF0Y2hTbmFwc2hvdCgpXG4gIH0pXG4gIHRlc3QoJ2NzcyBwcm9wIHdpdGggbWVyZ2UnLCAoKSA9PiB7XG4gICAgY29uc3QgdHJlZSA9IHJlbmRlcmVyXG4gICAgICAuY3JlYXRlKFxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT17Y3NzKHsgZGlzcGxheTogJ2ZsZXgnIH0pfSBjc3M9e3sgZGlzcGxheTogJ2Jsb2NrJyB9fSAvPlxuICAgICAgKVxuICAgICAgLnRvSlNPTigpXG4gICAgZXhwZWN0KHRyZWUpLnRvTWF0Y2hTbmFwc2hvdCgpXG4gICAgZXhwZWN0KHNoZWV0KS50b01hdGNoU25hcHNob3QoKVxuICB9KVxuICB0ZXN0KCdjc3Mgd2l0aG91dCBuZXdsaW5lIG9yIHNlbWljb2xvbicsICgpID0+IHtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmVcbiAgICBjb25zdCBjbHMgPSBjc3NgY29sb3I6IGhvdHBpbmtgXG4gICAgZXhwZWN0KHNoZWV0KS50b01hdGNoU25hcHNob3QoKVxuICB9KVxufSlcbiJdfQ== */ -.css-1qz4mje { +.css-k008qs { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -30,7 +30,7 @@ exports[`css css prop with merge 2`] = ` /*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtRHdCIiwiZmlsZSI6InNvdXJjZS1tYXAudGVzdC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCByZW5kZXJlciBmcm9tICdyZWFjdC10ZXN0LXJlbmRlcmVyJ1xuaW1wb3J0IHsgY3NzLCBzaGVldCwgZmx1c2ggfSBmcm9tICdlbW90aW9uJ1xuXG5kZXNjcmliZSgnY3NzJywgKCkgPT4ge1xuICBhZnRlckVhY2goKCkgPT4gZmx1c2goKSlcbiAgdGVzdCgnc291cmNlLW1hcCBuZXN0ZWQgc3R5bGVzJywgKCkgPT4ge1xuICAgIGNvbnN0IG1xID0gW1xuICAgICAgJ0BtZWRpYShtaW4td2lkdGg6IDQyMHB4KScsXG4gICAgICAnQG1lZGlhKG1pbi13aWR0aDogNjQwcHgpJyxcbiAgICAgICdAbWVkaWEobWluLXdpZHRoOiA5NjBweCknXG4gICAgXVxuXG4gICAgY3NzKHtcbiAgICAgIGNvbG9yOiAnYmx1ZScsXG4gICAgICAnJjpob3Zlcic6IHtcbiAgICAgICAgJyYgLm5hbWUnOiB7XG4gICAgICAgICAgY29sb3I6ICdhbWV0aHlzdCcsXG4gICAgICAgICAgJyY6Zm9jdXMnOiB7XG4gICAgICAgICAgICBjb2xvcjogJ2J1cmx5d29vZCcsXG4gICAgICAgICAgICBbbXFbMF1dOiB7XG4gICAgICAgICAgICAgIGNvbG9yOiAncmViZWNjYXB1cnBsZSdcbiAgICAgICAgICAgIH1cbiAgICAgICAgICB9XG4gICAgICAgIH0sXG4gICAgICAgIGNvbG9yOiAnZ3JlZW4nXG4gICAgICB9XG4gICAgfSlcbiAgICBleHBlY3Qoc2hlZXQpLnRvTWF0Y2hTbmFwc2hvdCgpXG4gIH0pXG5cbiAgdGVzdCgnc291cmNlLW1hcCBuZXN0ZWQgbWVkaWEgcXVlcmllcycsICgpID0+IHtcbiAgICBjc3NgXG4gICAgICBAbWVkaWEgKG1heC13aWR0aDogNjAwcHgpIHtcbiAgICAgICAgaDEge1xuICAgICAgICAgIGZvbnQtc2l6ZTogMS40cmVtO1xuICAgICAgICB9XG4gICAgICB9XG5cbiAgICAgIEBtZWRpYSAobWF4LXdpZHRoOiA0MDBweCksIChtYXgtaGVpZ2h0OiA0MjBweCkge1xuICAgICAgICBoMSB7XG4gICAgICAgICAgZm9udC1zaXplOiAxLjFyZW07XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICBgXG5cbiAgICBleHBlY3Qoc2hlZXQpLnRvTWF0Y2hTbmFwc2hvdCgpXG4gIH0pXG4gIHRlc3QoJ2NzcyBwcm9wIHdpdGggbWVyZ2UnLCAoKSA9PiB7XG4gICAgY29uc3QgdHJlZSA9IHJlbmRlcmVyXG4gICAgICAuY3JlYXRlKFxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT17Y3NzKHsgZGlzcGxheTogJ2ZsZXgnIH0pfSBjc3M9e3sgZGlzcGxheTogJ2Jsb2NrJyB9fSAvPlxuICAgICAgKVxuICAgICAgLnRvSlNPTigpXG4gICAgZXhwZWN0KHRyZWUpLnRvTWF0Y2hTbmFwc2hvdCgpXG4gICAgZXhwZWN0KHNoZWV0KS50b01hdGNoU25hcHNob3QoKVxuICB9KVxuICB0ZXN0KCdjc3Mgd2l0aG91dCBuZXdsaW5lIG9yIHNlbWljb2xvbicsICgpID0+IHtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmVcbiAgICBjb25zdCBjbHMgPSBjc3NgY29sb3I6IGhvdHBpbmtgXG4gICAgZXhwZWN0KHNoZWV0KS50b01hdGNoU25hcHNob3QoKVxuICB9KVxufSlcbiJdfQ== */ -.css-7z3lz3 { +.css-1v83fon { display: block; display: -webkit-box; display: -webkit-flex; @@ -42,7 +42,7 @@ exports[`css css prop with merge 2`] = ` `; exports[`css css without newline or semicolon 1`] = ` -".css-xr717q { +".css-3sn2xs { color: hotpink; } @@ -51,7 +51,7 @@ exports[`css css without newline or semicolon 1`] = ` exports[`css source-map nested media queries 1`] = ` "@media (max-width:600px) { - .css-1oa5r2 h1 { + .css-acogag h1 { font-size: 1.4rem; } } @@ -59,7 +59,7 @@ exports[`css source-map nested media queries 1`] = ` /*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQ08iLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHJlbmRlcmVyIGZyb20gJ3JlYWN0LXRlc3QtcmVuZGVyZXInXG5pbXBvcnQgeyBjc3MsIHNoZWV0LCBmbHVzaCB9IGZyb20gJ2Vtb3Rpb24nXG5cbmRlc2NyaWJlKCdjc3MnLCAoKSA9PiB7XG4gIGFmdGVyRWFjaCgoKSA9PiBmbHVzaCgpKVxuICB0ZXN0KCdzb3VyY2UtbWFwIG5lc3RlZCBzdHlsZXMnLCAoKSA9PiB7XG4gICAgY29uc3QgbXEgPSBbXG4gICAgICAnQG1lZGlhKG1pbi13aWR0aDogNDIwcHgpJyxcbiAgICAgICdAbWVkaWEobWluLXdpZHRoOiA2NDBweCknLFxuICAgICAgJ0BtZWRpYShtaW4td2lkdGg6IDk2MHB4KSdcbiAgICBdXG5cbiAgICBjc3Moe1xuICAgICAgY29sb3I6ICdibHVlJyxcbiAgICAgICcmOmhvdmVyJzoge1xuICAgICAgICAnJiAubmFtZSc6IHtcbiAgICAgICAgICBjb2xvcjogJ2FtZXRoeXN0JyxcbiAgICAgICAgICAnJjpmb2N1cyc6IHtcbiAgICAgICAgICAgIGNvbG9yOiAnYnVybHl3b29kJyxcbiAgICAgICAgICAgIFttcVswXV06IHtcbiAgICAgICAgICAgICAgY29sb3I6ICdyZWJlY2NhcHVycGxlJ1xuICAgICAgICAgICAgfVxuICAgICAgICAgIH1cbiAgICAgICAgfSxcbiAgICAgICAgY29sb3I6ICdncmVlbidcbiAgICAgIH1cbiAgICB9KVxuICAgIGV4cGVjdChzaGVldCkudG9NYXRjaFNuYXBzaG90KClcbiAgfSlcblxuICB0ZXN0KCdzb3VyY2UtbWFwIG5lc3RlZCBtZWRpYSBxdWVyaWVzJywgKCkgPT4ge1xuICAgIGNzc2BcbiAgICAgIEBtZWRpYSAobWF4LXdpZHRoOiA2MDBweCkge1xuICAgICAgICBoMSB7XG4gICAgICAgICAgZm9udC1zaXplOiAxLjRyZW07XG4gICAgICAgIH1cbiAgICAgIH1cblxuICAgICAgQG1lZGlhIChtYXgtd2lkdGg6IDQwMHB4KSwgKG1heC1oZWlnaHQ6IDQyMHB4KSB7XG4gICAgICAgIGgxIHtcbiAgICAgICAgICBmb250LXNpemU6IDEuMXJlbTtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIGBcblxuICAgIGV4cGVjdChzaGVldCkudG9NYXRjaFNuYXBzaG90KClcbiAgfSlcbiAgdGVzdCgnY3NzIHByb3Agd2l0aCBtZXJnZScsICgpID0+IHtcbiAgICBjb25zdCB0cmVlID0gcmVuZGVyZXJcbiAgICAgIC5jcmVhdGUoXG4gICAgICAgIDxkaXYgY2xhc3NOYW1lPXtjc3MoeyBkaXNwbGF5OiAnZmxleCcgfSl9IGNzcz17eyBkaXNwbGF5OiAnYmxvY2snIH19IC8+XG4gICAgICApXG4gICAgICAudG9KU09OKClcbiAgICBleHBlY3QodHJlZSkudG9NYXRjaFNuYXBzaG90KClcbiAgICBleHBlY3Qoc2hlZXQpLnRvTWF0Y2hTbmFwc2hvdCgpXG4gIH0pXG4gIHRlc3QoJ2NzcyB3aXRob3V0IG5ld2xpbmUgb3Igc2VtaWNvbG9uJywgKCkgPT4ge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZVxuICAgIGNvbnN0IGNscyA9IGNzc2Bjb2xvcjogaG90cGlua2BcbiAgICBleHBlY3Qoc2hlZXQpLnRvTWF0Y2hTbmFwc2hvdCgpXG4gIH0pXG59KVxuIl19 */ @media (max-width:400px),(max-height:420px) { - .css-1oa5r2 h1 { + .css-acogag h1 { font-size: 1.1rem; } } @@ -68,32 +68,32 @@ exports[`css source-map nested media queries 1`] = ` `; exports[`css source-map nested styles 1`] = ` -".css-o3knr9 { +".css-s7aswl { color: blue; } /*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhSSIsImZpbGUiOiJzb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgcmVuZGVyZXIgZnJvbSAncmVhY3QtdGVzdC1yZW5kZXJlcidcbmltcG9ydCB7IGNzcywgc2hlZXQsIGZsdXNoIH0gZnJvbSAnZW1vdGlvbidcblxuZGVzY3JpYmUoJ2NzcycsICgpID0+IHtcbiAgYWZ0ZXJFYWNoKCgpID0+IGZsdXNoKCkpXG4gIHRlc3QoJ3NvdXJjZS1tYXAgbmVzdGVkIHN0eWxlcycsICgpID0+IHtcbiAgICBjb25zdCBtcSA9IFtcbiAgICAgICdAbWVkaWEobWluLXdpZHRoOiA0MjBweCknLFxuICAgICAgJ0BtZWRpYShtaW4td2lkdGg6IDY0MHB4KScsXG4gICAgICAnQG1lZGlhKG1pbi13aWR0aDogOTYwcHgpJ1xuICAgIF1cblxuICAgIGNzcyh7XG4gICAgICBjb2xvcjogJ2JsdWUnLFxuICAgICAgJyY6aG92ZXInOiB7XG4gICAgICAgICcmIC5uYW1lJzoge1xuICAgICAgICAgIGNvbG9yOiAnYW1ldGh5c3QnLFxuICAgICAgICAgICcmOmZvY3VzJzoge1xuICAgICAgICAgICAgY29sb3I6ICdidXJseXdvb2QnLFxuICAgICAgICAgICAgW21xWzBdXToge1xuICAgICAgICAgICAgICBjb2xvcjogJ3JlYmVjY2FwdXJwbGUnXG4gICAgICAgICAgICB9XG4gICAgICAgICAgfVxuICAgICAgICB9LFxuICAgICAgICBjb2xvcjogJ2dyZWVuJ1xuICAgICAgfVxuICAgIH0pXG4gICAgZXhwZWN0KHNoZWV0KS50b01hdGNoU25hcHNob3QoKVxuICB9KVxuXG4gIHRlc3QoJ3NvdXJjZS1tYXAgbmVzdGVkIG1lZGlhIHF1ZXJpZXMnLCAoKSA9PiB7XG4gICAgY3NzYFxuICAgICAgQG1lZGlhIChtYXgtd2lkdGg6IDYwMHB4KSB7XG4gICAgICAgIGgxIHtcbiAgICAgICAgICBmb250LXNpemU6IDEuNHJlbTtcbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICBAbWVkaWEgKG1heC13aWR0aDogNDAwcHgpLCAobWF4LWhlaWdodDogNDIwcHgpIHtcbiAgICAgICAgaDEge1xuICAgICAgICAgIGZvbnQtc2l6ZTogMS4xcmVtO1xuICAgICAgICB9XG4gICAgICB9XG4gICAgYFxuXG4gICAgZXhwZWN0KHNoZWV0KS50b01hdGNoU25hcHNob3QoKVxuICB9KVxuICB0ZXN0KCdjc3MgcHJvcCB3aXRoIG1lcmdlJywgKCkgPT4ge1xuICAgIGNvbnN0IHRyZWUgPSByZW5kZXJlclxuICAgICAgLmNyZWF0ZShcbiAgICAgICAgPGRpdiBjbGFzc05hbWU9e2Nzcyh7IGRpc3BsYXk6ICdmbGV4JyB9KX0gY3NzPXt7IGRpc3BsYXk6ICdibG9jaycgfX0gLz5cbiAgICAgIClcbiAgICAgIC50b0pTT04oKVxuICAgIGV4cGVjdCh0cmVlKS50b01hdGNoU25hcHNob3QoKVxuICAgIGV4cGVjdChzaGVldCkudG9NYXRjaFNuYXBzaG90KClcbiAgfSlcbiAgdGVzdCgnY3NzIHdpdGhvdXQgbmV3bGluZSBvciBzZW1pY29sb24nLCAoKSA9PiB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lXG4gICAgY29uc3QgY2xzID0gY3NzYGNvbG9yOiBob3RwaW5rYFxuICAgIGV4cGVjdChzaGVldCkudG9NYXRjaFNuYXBzaG90KClcbiAgfSlcbn0pXG4iXX0= */ -.css-o3knr9:hover { +.css-s7aswl:hover { color: green; } /*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhSSIsImZpbGUiOiJzb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgcmVuZGVyZXIgZnJvbSAncmVhY3QtdGVzdC1yZW5kZXJlcidcbmltcG9ydCB7IGNzcywgc2hlZXQsIGZsdXNoIH0gZnJvbSAnZW1vdGlvbidcblxuZGVzY3JpYmUoJ2NzcycsICgpID0+IHtcbiAgYWZ0ZXJFYWNoKCgpID0+IGZsdXNoKCkpXG4gIHRlc3QoJ3NvdXJjZS1tYXAgbmVzdGVkIHN0eWxlcycsICgpID0+IHtcbiAgICBjb25zdCBtcSA9IFtcbiAgICAgICdAbWVkaWEobWluLXdpZHRoOiA0MjBweCknLFxuICAgICAgJ0BtZWRpYShtaW4td2lkdGg6IDY0MHB4KScsXG4gICAgICAnQG1lZGlhKG1pbi13aWR0aDogOTYwcHgpJ1xuICAgIF1cblxuICAgIGNzcyh7XG4gICAgICBjb2xvcjogJ2JsdWUnLFxuICAgICAgJyY6aG92ZXInOiB7XG4gICAgICAgICcmIC5uYW1lJzoge1xuICAgICAgICAgIGNvbG9yOiAnYW1ldGh5c3QnLFxuICAgICAgICAgICcmOmZvY3VzJzoge1xuICAgICAgICAgICAgY29sb3I6ICdidXJseXdvb2QnLFxuICAgICAgICAgICAgW21xWzBdXToge1xuICAgICAgICAgICAgICBjb2xvcjogJ3JlYmVjY2FwdXJwbGUnXG4gICAgICAgICAgICB9XG4gICAgICAgICAgfVxuICAgICAgICB9LFxuICAgICAgICBjb2xvcjogJ2dyZWVuJ1xuICAgICAgfVxuICAgIH0pXG4gICAgZXhwZWN0KHNoZWV0KS50b01hdGNoU25hcHNob3QoKVxuICB9KVxuXG4gIHRlc3QoJ3NvdXJjZS1tYXAgbmVzdGVkIG1lZGlhIHF1ZXJpZXMnLCAoKSA9PiB7XG4gICAgY3NzYFxuICAgICAgQG1lZGlhIChtYXgtd2lkdGg6IDYwMHB4KSB7XG4gICAgICAgIGgxIHtcbiAgICAgICAgICBmb250LXNpemU6IDEuNHJlbTtcbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICBAbWVkaWEgKG1heC13aWR0aDogNDAwcHgpLCAobWF4LWhlaWdodDogNDIwcHgpIHtcbiAgICAgICAgaDEge1xuICAgICAgICAgIGZvbnQtc2l6ZTogMS4xcmVtO1xuICAgICAgICB9XG4gICAgICB9XG4gICAgYFxuXG4gICAgZXhwZWN0KHNoZWV0KS50b01hdGNoU25hcHNob3QoKVxuICB9KVxuICB0ZXN0KCdjc3MgcHJvcCB3aXRoIG1lcmdlJywgKCkgPT4ge1xuICAgIGNvbnN0IHRyZWUgPSByZW5kZXJlclxuICAgICAgLmNyZWF0ZShcbiAgICAgICAgPGRpdiBjbGFzc05hbWU9e2Nzcyh7IGRpc3BsYXk6ICdmbGV4JyB9KX0gY3NzPXt7IGRpc3BsYXk6ICdibG9jaycgfX0gLz5cbiAgICAgIClcbiAgICAgIC50b0pTT04oKVxuICAgIGV4cGVjdCh0cmVlKS50b01hdGNoU25hcHNob3QoKVxuICAgIGV4cGVjdChzaGVldCkudG9NYXRjaFNuYXBzaG90KClcbiAgfSlcbiAgdGVzdCgnY3NzIHdpdGhvdXQgbmV3bGluZSBvciBzZW1pY29sb24nLCAoKSA9PiB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lXG4gICAgY29uc3QgY2xzID0gY3NzYGNvbG9yOiBob3RwaW5rYFxuICAgIGV4cGVjdChzaGVldCkudG9NYXRjaFNuYXBzaG90KClcbiAgfSlcbn0pXG4iXX0= */ -.css-o3knr9:hover .name { +.css-s7aswl:hover .name { color: amethyst; } /*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhSSIsImZpbGUiOiJzb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgcmVuZGVyZXIgZnJvbSAncmVhY3QtdGVzdC1yZW5kZXJlcidcbmltcG9ydCB7IGNzcywgc2hlZXQsIGZsdXNoIH0gZnJvbSAnZW1vdGlvbidcblxuZGVzY3JpYmUoJ2NzcycsICgpID0+IHtcbiAgYWZ0ZXJFYWNoKCgpID0+IGZsdXNoKCkpXG4gIHRlc3QoJ3NvdXJjZS1tYXAgbmVzdGVkIHN0eWxlcycsICgpID0+IHtcbiAgICBjb25zdCBtcSA9IFtcbiAgICAgICdAbWVkaWEobWluLXdpZHRoOiA0MjBweCknLFxuICAgICAgJ0BtZWRpYShtaW4td2lkdGg6IDY0MHB4KScsXG4gICAgICAnQG1lZGlhKG1pbi13aWR0aDogOTYwcHgpJ1xuICAgIF1cblxuICAgIGNzcyh7XG4gICAgICBjb2xvcjogJ2JsdWUnLFxuICAgICAgJyY6aG92ZXInOiB7XG4gICAgICAgICcmIC5uYW1lJzoge1xuICAgICAgICAgIGNvbG9yOiAnYW1ldGh5c3QnLFxuICAgICAgICAgICcmOmZvY3VzJzoge1xuICAgICAgICAgICAgY29sb3I6ICdidXJseXdvb2QnLFxuICAgICAgICAgICAgW21xWzBdXToge1xuICAgICAgICAgICAgICBjb2xvcjogJ3JlYmVjY2FwdXJwbGUnXG4gICAgICAgICAgICB9XG4gICAgICAgICAgfVxuICAgICAgICB9LFxuICAgICAgICBjb2xvcjogJ2dyZWVuJ1xuICAgICAgfVxuICAgIH0pXG4gICAgZXhwZWN0KHNoZWV0KS50b01hdGNoU25hcHNob3QoKVxuICB9KVxuXG4gIHRlc3QoJ3NvdXJjZS1tYXAgbmVzdGVkIG1lZGlhIHF1ZXJpZXMnLCAoKSA9PiB7XG4gICAgY3NzYFxuICAgICAgQG1lZGlhIChtYXgtd2lkdGg6IDYwMHB4KSB7XG4gICAgICAgIGgxIHtcbiAgICAgICAgICBmb250LXNpemU6IDEuNHJlbTtcbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICBAbWVkaWEgKG1heC13aWR0aDogNDAwcHgpLCAobWF4LWhlaWdodDogNDIwcHgpIHtcbiAgICAgICAgaDEge1xuICAgICAgICAgIGZvbnQtc2l6ZTogMS4xcmVtO1xuICAgICAgICB9XG4gICAgICB9XG4gICAgYFxuXG4gICAgZXhwZWN0KHNoZWV0KS50b01hdGNoU25hcHNob3QoKVxuICB9KVxuICB0ZXN0KCdjc3MgcHJvcCB3aXRoIG1lcmdlJywgKCkgPT4ge1xuICAgIGNvbnN0IHRyZWUgPSByZW5kZXJlclxuICAgICAgLmNyZWF0ZShcbiAgICAgICAgPGRpdiBjbGFzc05hbWU9e2Nzcyh7IGRpc3BsYXk6ICdmbGV4JyB9KX0gY3NzPXt7IGRpc3BsYXk6ICdibG9jaycgfX0gLz5cbiAgICAgIClcbiAgICAgIC50b0pTT04oKVxuICAgIGV4cGVjdCh0cmVlKS50b01hdGNoU25hcHNob3QoKVxuICAgIGV4cGVjdChzaGVldCkudG9NYXRjaFNuYXBzaG90KClcbiAgfSlcbiAgdGVzdCgnY3NzIHdpdGhvdXQgbmV3bGluZSBvciBzZW1pY29sb24nLCAoKSA9PiB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lXG4gICAgY29uc3QgY2xzID0gY3NzYGNvbG9yOiBob3RwaW5rYFxuICAgIGV4cGVjdChzaGVldCkudG9NYXRjaFNuYXBzaG90KClcbiAgfSlcbn0pXG4iXX0= */ -.css-o3knr9:hover .name:focus { +.css-s7aswl:hover .name:focus { color: burlywood; } /*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhSSIsImZpbGUiOiJzb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgcmVuZGVyZXIgZnJvbSAncmVhY3QtdGVzdC1yZW5kZXJlcidcbmltcG9ydCB7IGNzcywgc2hlZXQsIGZsdXNoIH0gZnJvbSAnZW1vdGlvbidcblxuZGVzY3JpYmUoJ2NzcycsICgpID0+IHtcbiAgYWZ0ZXJFYWNoKCgpID0+IGZsdXNoKCkpXG4gIHRlc3QoJ3NvdXJjZS1tYXAgbmVzdGVkIHN0eWxlcycsICgpID0+IHtcbiAgICBjb25zdCBtcSA9IFtcbiAgICAgICdAbWVkaWEobWluLXdpZHRoOiA0MjBweCknLFxuICAgICAgJ0BtZWRpYShtaW4td2lkdGg6IDY0MHB4KScsXG4gICAgICAnQG1lZGlhKG1pbi13aWR0aDogOTYwcHgpJ1xuICAgIF1cblxuICAgIGNzcyh7XG4gICAgICBjb2xvcjogJ2JsdWUnLFxuICAgICAgJyY6aG92ZXInOiB7XG4gICAgICAgICcmIC5uYW1lJzoge1xuICAgICAgICAgIGNvbG9yOiAnYW1ldGh5c3QnLFxuICAgICAgICAgICcmOmZvY3VzJzoge1xuICAgICAgICAgICAgY29sb3I6ICdidXJseXdvb2QnLFxuICAgICAgICAgICAgW21xWzBdXToge1xuICAgICAgICAgICAgICBjb2xvcjogJ3JlYmVjY2FwdXJwbGUnXG4gICAgICAgICAgICB9XG4gICAgICAgICAgfVxuICAgICAgICB9LFxuICAgICAgICBjb2xvcjogJ2dyZWVuJ1xuICAgICAgfVxuICAgIH0pXG4gICAgZXhwZWN0KHNoZWV0KS50b01hdGNoU25hcHNob3QoKVxuICB9KVxuXG4gIHRlc3QoJ3NvdXJjZS1tYXAgbmVzdGVkIG1lZGlhIHF1ZXJpZXMnLCAoKSA9PiB7XG4gICAgY3NzYFxuICAgICAgQG1lZGlhIChtYXgtd2lkdGg6IDYwMHB4KSB7XG4gICAgICAgIGgxIHtcbiAgICAgICAgICBmb250LXNpemU6IDEuNHJlbTtcbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICBAbWVkaWEgKG1heC13aWR0aDogNDAwcHgpLCAobWF4LWhlaWdodDogNDIwcHgpIHtcbiAgICAgICAgaDEge1xuICAgICAgICAgIGZvbnQtc2l6ZTogMS4xcmVtO1xuICAgICAgICB9XG4gICAgICB9XG4gICAgYFxuXG4gICAgZXhwZWN0KHNoZWV0KS50b01hdGNoU25hcHNob3QoKVxuICB9KVxuICB0ZXN0KCdjc3MgcHJvcCB3aXRoIG1lcmdlJywgKCkgPT4ge1xuICAgIGNvbnN0IHRyZWUgPSByZW5kZXJlclxuICAgICAgLmNyZWF0ZShcbiAgICAgICAgPGRpdiBjbGFzc05hbWU9e2Nzcyh7IGRpc3BsYXk6ICdmbGV4JyB9KX0gY3NzPXt7IGRpc3BsYXk6ICdibG9jaycgfX0gLz5cbiAgICAgIClcbiAgICAgIC50b0pTT04oKVxuICAgIGV4cGVjdCh0cmVlKS50b01hdGNoU25hcHNob3QoKVxuICAgIGV4cGVjdChzaGVldCkudG9NYXRjaFNuYXBzaG90KClcbiAgfSlcbiAgdGVzdCgnY3NzIHdpdGhvdXQgbmV3bGluZSBvciBzZW1pY29sb24nLCAoKSA9PiB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lXG4gICAgY29uc3QgY2xzID0gY3NzYGNvbG9yOiBob3RwaW5rYFxuICAgIGV4cGVjdChzaGVldCkudG9NYXRjaFNuYXBzaG90KClcbiAgfSlcbn0pXG4iXX0= */ @media (min-width:420px) { - .css-o3knr9:hover .name:focus { + .css-s7aswl:hover .name:focus { color: rebeccapurple; } } From 90871505a3a891bece8f7147492ca56be93dc416 Mon Sep 17 00:00:00 2001 From: Melvin Groenhoff Date: Wed, 11 Jul 2018 12:31:20 +0200 Subject: [PATCH 2/2] Move to own function to prevent having to check for env every time --- packages/create-emotion/src/index.js | 32 ++++++++++++++++------------ 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/packages/create-emotion/src/index.js b/packages/create-emotion/src/index.js index 1cbcd64e5..66a18e702 100644 --- a/packages/create-emotion/src/index.js +++ b/packages/create-emotion/src/index.js @@ -229,6 +229,23 @@ function createEmotion( const labelPattern = /label:\s*([^\s;\n{]+)\s*;/g + let createClassName = (styles, identifierName) => { + return hashString(styles + identifierName) + identifierName + } + if (process.env.NODE_ENV !== 'production') { + const oldCreateClassName = createClassName + const sourceMappingUrlPattern = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g + createClassName = (styles, identifierName) => { + return oldCreateClassName( + styles.replace(sourceMappingUrlPattern, sourceMap => { + currentSourceMap = sourceMap + return '' + }), + identifierName + ) + } + } + const createStyles: CreateStyles = function( strings: Interpolation | string[], ...interpolations: Interpolation[] @@ -259,26 +276,13 @@ function createEmotion( identifierName += `-${p1}` return '' }) - if (process.env.NODE_ENV !== 'production') { - name = - hashString( - styles.replace( - /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g, - '' - ) + identifierName - ) + identifierName - } else { - name = hashString(styles + identifierName) + identifierName - } + name = createClassName(styles, identifierName) return styles } if (process.env.NODE_ENV !== 'production') { - const sourceMapRegEx = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\// const oldStylis = stylis stylis = (selector, styles) => { - const result = sourceMapRegEx.exec(styles) - currentSourceMap = result ? result[0] : '' oldStylis(selector, styles) currentSourceMap = '' }