Add Source Maps 🗺 #320
Add Source Maps 🗺 #320
Conversation
|
I still need to document this, but I do want to get it into the |
|
|
Codecov Report
@@ Coverage Diff @@
## master #320 +/- ##
=========================================
+ Coverage 96.53% 97.3% +0.76%
=========================================
Files 16 17 +1
Lines 577 593 +16
Branches 138 142 +4
=========================================
+ Hits 557 577 +20
+ Misses 15 12 -3
+ Partials 5 4 -1
Continue to review full report at Codecov.
|
package.json
Outdated
| "dependencies": { | ||
| "convert-source-map": "^1.5.0", | ||
| "source-map": "^0.5.7" | ||
| }, |
There was a problem hiding this comment.
Should these be in babel-plugin-emotion's package.json?
packages/emotion/src/index.js
Outdated
| currentSourceMap = '' | ||
| } | ||
| } | ||
|
|
There was a problem hiding this comment.
Maybe instead of putting the source map inside of the styles we could make an object the first argument to createStyles if there is a source map and do something like this.
let sourceMap = ''
function createStyles(strings, ...interpolations) {
if (process.env.NODE_ENV !== 'production') {
if (strings !== undefined && strings.sourceMap !== undefined) {
sourceMap = strings
return createStyles(...interpolations)
}
}
let stringMode = true
let styles = ''
if (
(strings !== undefined && strings.raw === undefined) ||
strings === undefined
) {
stringMode = false
styles = handleInterpolation(strings, false)
} else {
styles = strings[0]
}
interpolations.forEach((interpolation, i) => {
styles += handleInterpolation(interpolation, isLastCharDot(styles))
if (stringMode === true && strings[i + 1] !== undefined) {
styles += strings[i + 1]
}
})
return styles
}There was a problem hiding this comment.
This is close to what I did.
…eral transform includes two copies of the strings
- fix undefined showing up as source map
|
|
What:
Add sourcemaps like styled-jsx has.
Only one sourcemap is allowed per style tag so we make each insert use a new tag. The rough plan is to insert the sourcemap for the user with the babel plugin in dev mode. I am not sure how to do this process for dev and the current process for production. I've never seen a babel plugin that checks NODE_ENV. Is this a thing?
Checklist:
closes #15