Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Source Maps 🗺 #320

Merged
merged 40 commits into from
Sep 24, 2017
Merged

Add Source Maps 🗺 #320

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
40 commits
Select commit Hold shift + click to select a range
63644b1
🗺
Sep 21, 2017
a67a8af
remove sheet check
Sep 21, 2017
f287982
merge
Sep 22, 2017
bc57245
This should be working but its not.
Sep 22, 2017
dd4d84a
Revert pretty css changes
Sep 22, 2017
85e64cb
still not working.
Sep 22, 2017
f426600
still not working.
Sep 22, 2017
86f5e95
still not working.
Sep 22, 2017
2d0c75d
Merge branch 'master' of https://github.com/tkh44/emotion into source…
Sep 22, 2017
cdd1d65
Its working!
Sep 22, 2017
726c2ed
Remove changes to site
Sep 22, 2017
cd2f6f2
Add snapshot
Sep 22, 2017
6f3be18
Simplify source map creation
Sep 23, 2017
e3ab374
Fix package.json
Sep 23, 2017
22421fd
Merge branch 'master' into source-maps
emmatown Sep 23, 2017
df47dc6
Merge branch 'master' into source-maps
emmatown Sep 23, 2017
d04ca14
Update snapshots
Sep 23, 2017
998cdbf
Make the runtime smaller
emmatown Sep 23, 2017
588fb43
Move regex into process.env.NODE_ENV !== 'production' check
emmatown Sep 23, 2017
7dc00d3
Remove __emotion_source_map
emmatown Sep 23, 2017
0fc9489
Update snapshots and fix regex
emmatown Sep 23, 2017
7cec46b
Remove all the boilerplate in the App component of the site
emmatown Sep 23, 2017
4bb0fc6
comment out unused examples
Sep 23, 2017
f26d672
Add checks for loc's existance and add a test for the css prop
emmatown Sep 23, 2017
f529d8b
Abstract away source map stuff
emmatown Sep 23, 2017
e6870d5
Don't output tagged template literals because the tagged template lit…
emmatown Sep 23, 2017
d08dbc8
Increase sheet.js coverage
Sep 23, 2017
e5bd91f
Remove console log
Sep 23, 2017
08c9d10
Add snapshots
Sep 23, 2017
684e98d
Update snapshots
Sep 23, 2017
d21467b
Test the illegal rule
Sep 23, 2017
77244ff
Add source maps to objects calls of keyframes, injectGlobal and fontFace
emmatown Sep 23, 2017
590cffb
Add pure comments to object call syntax
emmatown Sep 24, 2017
9a01ff6
Simplify babel macro and add pure comments to object call syntax in b…
emmatown Sep 24, 2017
2ebfb01
Add more tests for StyleSheet
emmatown Sep 24, 2017
2a518f4
Add docs for source maps
Sep 24, 2017
9e28a0e
Add source-maps to site
Sep 24, 2017
640ff07
Update docs
Sep 24, 2017
d6e8eca
Add gif
Sep 24, 2017
f70efe2
Update docs
Sep 24, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Abstract away source map stuff
  • Loading branch information
@emmatown
emmatown committed Sep 23, 2017
commit f529d8b9c494f439ed1f128834f18665f6873aca
64 changes: 7 additions & 57 deletions packages/babel-plugin-emotion/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
} from './babel-utils'

import { hashString, Stylis } from 'emotion-utils'
import { makeSourceMapGenerator, addSourceMaps } from './source-map'
import { addSourceMaps } from './source-map'

import cssProps from './css-prop'
import ASTObject from './ast-object'
Expand Down Expand Up @@ -56,20 +56,8 @@ export function replaceCssWithCallExpression(
path.addComment('leading', '#__PURE__')
}
if (state.opts.sourceMap === true && path.node.quasi.loc !== undefined) {
const generator = makeSourceMapGenerator(state.file)
const filename = state.file.opts.sourceFileName
const offset = path.node.quasi.loc.start
generator.addMapping({
generated: {
line: 1,
column: 0
},
source: filename,
original: offset
})

path.node.quasi = new ASTObject(
minify(addSourceMaps(src, generator, filename)),
minify(src + addSourceMaps(path.node.quasi.loc.start, state)),
path.node.quasi.expressions,
t
).toTemplateLiteral()
Expand Down Expand Up @@ -194,21 +182,8 @@ export function buildStyledCallExpression(identifier, tag, path, state, t) {

let templateLiteral
if (state.opts.sourceMap === true && path.node.quasi.loc !== undefined) {
const generator = makeSourceMapGenerator(state.file)
const filename = state.file.opts.sourceFileName
const offset = path.node.quasi.loc.start

generator.addMapping({
generated: {
line: 1,
column: 0
},
source: filename,
original: offset
})

templateLiteral = new ASTObject(
minify(addSourceMaps(src, generator, filename)),
minify(src + addSourceMaps(path.node.quasi.loc.start, state)),
path.node.quasi.expressions,
t
).toTemplateLiteral()
Expand Down Expand Up @@ -248,20 +223,7 @@ export function buildStyledObjectCallExpression(path, state, identifier, t) {

let args = path.node.arguments
if (state.opts.sourceMap === true && path.node.loc !== undefined) {
const generator = makeSourceMapGenerator(state.file)
const filename = state.file.opts.sourceFileName
const offset = path.node.loc.start

generator.addMapping({
generated: {
line: 1,
column: 0
},
source: filename,
original: offset
})

args.push(t.stringLiteral(addSourceMaps('', generator, filename)))
args.push(t.stringLiteral(addSourceMaps(path.node.loc.start, state)))
}

return t.callExpression(
Expand Down Expand Up @@ -379,21 +341,9 @@ export default function(babel) {
try {
if (path.node.callee.name === state.importedNames.css) {
if (state.opts.sourceMap === true && path.node.loc !== undefined) {
let args = path.node.arguments
const generator = makeSourceMapGenerator(state.file)
const filename = state.file.opts.sourceFileName
const offset = path.node.loc.start

generator.addMapping({
generated: {
line: 1,
column: 0
},
source: filename,
original: offset
})

args.push(t.stringLiteral(addSourceMaps('', generator, filename)))
path.node.arguments.push(
t.stringLiteral(addSourceMaps(path.node.loc.start, state))
)
}
}

Expand Down
14 changes: 11 additions & 3 deletions packages/babel-plugin-emotion/src/source-map.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,18 @@ export function makeSourceMapGenerator(file) {
return generator
}

export function addSourceMaps(code, generator, filename) {
export function addSourceMaps(offset, state) {
const generator = makeSourceMapGenerator(state.file)
generator.addMapping({
generated: {
line: 1,
column: 0
},
source: state.file.opts.sourceFileName,
original: offset
})
return [
code,
convert.fromObject(generator).toComment({ multiline: true }),
`/*@ sourceURL=${filename} */`
`/*@ sourceURL=${state.file.opts.sourceFileName} */`
].join('\n')
}
2 changes: 1 addition & 1 deletion packages/babel-plugin-emotion/test/__snapshots__/source-map.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ styled('div', {
},
color: 'green'
}
}, '\\\\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1uZXN0ZWQuc291cmNlLW1hcC50ZXN0LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNNIiwiZmlsZSI6ImNzcy1uZXN0ZWQuc291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgICBzdHlsZWQoJ2RpdicpKHtcbiAgICAgICAgY29sb3I6ICdibHVlJyxcbiAgICAgICAgJyY6aG92ZXInOiB7XG4gICAgICAgICAgJyYgLm5hbWUnOiB7XG4gICAgICAgICAgICBjb2xvcjogJ2FtZXRoeXN0JyxcbiAgICAgICAgICAgICcmOmZvY3VzJzoge1xuICAgICAgICAgICAgICBjb2xvcjogJ2J1cmx5d29vZCcsXG4gICAgICAgICAgICAgIFttcVswXV06IHtcbiAgICAgICAgICAgICAgICBjb2xvcjogJ3JlYmVjY2FwdXJwbGUnXG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cbiAgICAgICAgICB9LFxuICAgICAgICAgIGNvbG9yOiAnZ3JlZW4nXG4gICAgICAgIH1cbiAgICAgIH0pXG4gICAgIl19 */\\\\n/*@ sourceURL=css-nested.source-map.test.js */');"
}, '/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1uZXN0ZWQuc291cmNlLW1hcC50ZXN0LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNNIiwiZmlsZSI6ImNzcy1uZXN0ZWQuc291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgICBzdHlsZWQoJ2RpdicpKHtcbiAgICAgICAgY29sb3I6ICdibHVlJyxcbiAgICAgICAgJyY6aG92ZXInOiB7XG4gICAgICAgICAgJyYgLm5hbWUnOiB7XG4gICAgICAgICAgICBjb2xvcjogJ2FtZXRoeXN0JyxcbiAgICAgICAgICAgICcmOmZvY3VzJzoge1xuICAgICAgICAgICAgICBjb2xvcjogJ2J1cmx5d29vZCcsXG4gICAgICAgICAgICAgIFttcVswXV06IHtcbiAgICAgICAgICAgICAgICBjb2xvcjogJ3JlYmVjY2FwdXJwbGUnXG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cbiAgICAgICAgICB9LFxuICAgICAgICAgIGNvbG9yOiAnZ3JlZW4nXG4gICAgICAgIH1cbiAgICAgIH0pXG4gICAgIl19 */\\\\n/*@ sourceURL=css-nested.source-map.test.js */');"
`;

exports[`source maps styled source map 1`] = `
Expand Down
10 changes: 5 additions & 5 deletions packages/emotion/test/source-map/__snapshots__/source-map.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,31 +23,31 @@ exports[`css source-map nested media queries 1`] = `
`;

exports[`css source-map nested styles 1`] = `
".css-axrct4 {
".css-d367bo {
color: blue;
}

/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXSSIsImZpbGUiOiJzb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIHNoZWV0LCBmbHVzaCB9IGZyb20gJ2Vtb3Rpb24nXG5cbmRlc2NyaWJlKCdjc3MnLCAoKSA9PiB7XG4gIGFmdGVyRWFjaCgoKSA9PiBmbHVzaCgpKVxuICB0ZXN0KCdzb3VyY2UtbWFwIG5lc3RlZCBzdHlsZXMnLCAoKSA9PiB7XG4gICAgY29uc3QgbXEgPSBbXG4gICAgICAnQG1lZGlhKG1pbi13aWR0aDogNDIwcHgpJyxcbiAgICAgICdAbWVkaWEobWluLXdpZHRoOiA2NDBweCknLFxuICAgICAgJ0BtZWRpYShtaW4td2lkdGg6IDk2MHB4KSdcbiAgICBdXG5cbiAgICBjc3Moe1xuICAgICAgY29sb3I6ICdibHVlJyxcbiAgICAgICcmOmhvdmVyJzoge1xuICAgICAgICAnJiAubmFtZSc6IHtcbiAgICAgICAgICBjb2xvcjogJ2FtZXRoeXN0JyxcbiAgICAgICAgICAnJjpmb2N1cyc6IHtcbiAgICAgICAgICAgIGNvbG9yOiAnYnVybHl3b29kJyxcbiAgICAgICAgICAgIFttcVswXV06IHtcbiAgICAgICAgICAgICAgY29sb3I6ICdyZWJlY2NhcHVycGxlJ1xuICAgICAgICAgICAgfVxuICAgICAgICAgIH1cbiAgICAgICAgfSxcbiAgICAgICAgY29sb3I6ICdncmVlbidcbiAgICAgIH1cbiAgICB9KVxuICAgIGV4cGVjdChzaGVldCkudG9NYXRjaFNuYXBzaG90KClcbiAgfSlcblxuICB0ZXN0KCdzb3VyY2UtbWFwIG5lc3RlZCBtZWRpYSBxdWVyaWVzJywgKCkgPT4ge1xuICAgIGNzc2BcbiAgICAgIEBtZWRpYSAobWF4LXdpZHRoOiA2MDBweCkge1xuICAgICAgICBoMSB7XG4gICAgICAgICAgZm9udC1zaXplOiAxLjRyZW07XG4gICAgICAgIH1cbiAgICAgIH1cblxuICAgICAgQG1lZGlhIChtYXgtd2lkdGg6IDQwMHB4KSwgKG1heC1oZWlnaHQ6IDQyMHB4KSB7XG4gICAgICAgIGgxIHtcbiAgICAgICAgICBmb250LXNpemU6IDEuMXJlbTtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIGBcblxuICAgIGV4cGVjdChzaGVldCkudG9NYXRjaFNuYXBzaG90KClcbiAgfSlcbn0pXG4iXX0= */

/*@ sourceURL=source-map.test.js */

.css-axrct4:hover {
.css-d367bo:hover {
color: green;
}

/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXSSIsImZpbGUiOiJzb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIHNoZWV0LCBmbHVzaCB9IGZyb20gJ2Vtb3Rpb24nXG5cbmRlc2NyaWJlKCdjc3MnLCAoKSA9PiB7XG4gIGFmdGVyRWFjaCgoKSA9PiBmbHVzaCgpKVxuICB0ZXN0KCdzb3VyY2UtbWFwIG5lc3RlZCBzdHlsZXMnLCAoKSA9PiB7XG4gICAgY29uc3QgbXEgPSBbXG4gICAgICAnQG1lZGlhKG1pbi13aWR0aDogNDIwcHgpJyxcbiAgICAgICdAbWVkaWEobWluLXdpZHRoOiA2NDBweCknLFxuICAgICAgJ0BtZWRpYShtaW4td2lkdGg6IDk2MHB4KSdcbiAgICBdXG5cbiAgICBjc3Moe1xuICAgICAgY29sb3I6ICdibHVlJyxcbiAgICAgICcmOmhvdmVyJzoge1xuICAgICAgICAnJiAubmFtZSc6IHtcbiAgICAgICAgICBjb2xvcjogJ2FtZXRoeXN0JyxcbiAgICAgICAgICAnJjpmb2N1cyc6IHtcbiAgICAgICAgICAgIGNvbG9yOiAnYnVybHl3b29kJyxcbiAgICAgICAgICAgIFttcVswXV06IHtcbiAgICAgICAgICAgICAgY29sb3I6ICdyZWJlY2NhcHVycGxlJ1xuICAgICAgICAgICAgfVxuICAgICAgICAgIH1cbiAgICAgICAgfSxcbiAgICAgICAgY29sb3I6ICdncmVlbidcbiAgICAgIH1cbiAgICB9KVxuICAgIGV4cGVjdChzaGVldCkudG9NYXRjaFNuYXBzaG90KClcbiAgfSlcblxuICB0ZXN0KCdzb3VyY2UtbWFwIG5lc3RlZCBtZWRpYSBxdWVyaWVzJywgKCkgPT4ge1xuICAgIGNzc2BcbiAgICAgIEBtZWRpYSAobWF4LXdpZHRoOiA2MDBweCkge1xuICAgICAgICBoMSB7XG4gICAgICAgICAgZm9udC1zaXplOiAxLjRyZW07XG4gICAgICAgIH1cbiAgICAgIH1cblxuICAgICAgQG1lZGlhIChtYXgtd2lkdGg6IDQwMHB4KSwgKG1heC1oZWlnaHQ6IDQyMHB4KSB7XG4gICAgICAgIGgxIHtcbiAgICAgICAgICBmb250LXNpemU6IDEuMXJlbTtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIGBcblxuICAgIGV4cGVjdChzaGVldCkudG9NYXRjaFNuYXBzaG90KClcbiAgfSlcbn0pXG4iXX0= */

/*@ sourceURL=source-map.test.js */

.css-axrct4:hover .name {
.css-d367bo:hover .name {
color: amethyst;
}

/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXSSIsImZpbGUiOiJzb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIHNoZWV0LCBmbHVzaCB9IGZyb20gJ2Vtb3Rpb24nXG5cbmRlc2NyaWJlKCdjc3MnLCAoKSA9PiB7XG4gIGFmdGVyRWFjaCgoKSA9PiBmbHVzaCgpKVxuICB0ZXN0KCdzb3VyY2UtbWFwIG5lc3RlZCBzdHlsZXMnLCAoKSA9PiB7XG4gICAgY29uc3QgbXEgPSBbXG4gICAgICAnQG1lZGlhKG1pbi13aWR0aDogNDIwcHgpJyxcbiAgICAgICdAbWVkaWEobWluLXdpZHRoOiA2NDBweCknLFxuICAgICAgJ0BtZWRpYShtaW4td2lkdGg6IDk2MHB4KSdcbiAgICBdXG5cbiAgICBjc3Moe1xuICAgICAgY29sb3I6ICdibHVlJyxcbiAgICAgICcmOmhvdmVyJzoge1xuICAgICAgICAnJiAubmFtZSc6IHtcbiAgICAgICAgICBjb2xvcjogJ2FtZXRoeXN0JyxcbiAgICAgICAgICAnJjpmb2N1cyc6IHtcbiAgICAgICAgICAgIGNvbG9yOiAnYnVybHl3b29kJyxcbiAgICAgICAgICAgIFttcVswXV06IHtcbiAgICAgICAgICAgICAgY29sb3I6ICdyZWJlY2NhcHVycGxlJ1xuICAgICAgICAgICAgfVxuICAgICAgICAgIH1cbiAgICAgICAgfSxcbiAgICAgICAgY29sb3I6ICdncmVlbidcbiAgICAgIH1cbiAgICB9KVxuICAgIGV4cGVjdChzaGVldCkudG9NYXRjaFNuYXBzaG90KClcbiAgfSlcblxuICB0ZXN0KCdzb3VyY2UtbWFwIG5lc3RlZCBtZWRpYSBxdWVyaWVzJywgKCkgPT4ge1xuICAgIGNzc2BcbiAgICAgIEBtZWRpYSAobWF4LXdpZHRoOiA2MDBweCkge1xuICAgICAgICBoMSB7XG4gICAgICAgICAgZm9udC1zaXplOiAxLjRyZW07XG4gICAgICAgIH1cbiAgICAgIH1cblxuICAgICAgQG1lZGlhIChtYXgtd2lkdGg6IDQwMHB4KSwgKG1heC1oZWlnaHQ6IDQyMHB4KSB7XG4gICAgICAgIGgxIHtcbiAgICAgICAgICBmb250LXNpemU6IDEuMXJlbTtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIGBcblxuICAgIGV4cGVjdChzaGVldCkudG9NYXRjaFNuYXBzaG90KClcbiAgfSlcbn0pXG4iXX0= */

/*@ sourceURL=source-map.test.js */

.css-axrct4:hover .name:focus {
.css-d367bo:hover .name:focus {
color: burlywood;
}

Expand All @@ -56,7 +56,7 @@ exports[`css source-map nested styles 1`] = `
/*@ sourceURL=source-map.test.js */

@media (min-width:420px) {
.css-axrct4:hover .name:focus {
.css-d367bo:hover .name:focus {
color: rebeccapurple;
}
}
Expand Down