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

Remove component selectors #334

Merged
merged 8 commits into from
Sep 25, 2017
Merged

Remove component selectors #334

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3248747
Remove component selectors
emmatown Sep 25, 2017
509e41e
Remove tests for component as selector closes #329
Sep 25, 2017
94c6db4
Merge remote-tracking branch 'origin/remove-component-selectors' into…
Sep 25, 2017
6bd3cee
Remove reference to component selectors
emmatown Sep 25, 2017
654d706
Merge branch 'remove-component-selectors' of https://github.com/emoti…
emmatown Sep 25, 2017
2601c00
Update snapshots
emmatown Sep 25, 2017
f6b63ed
Merge branch 'master' into remove-component-selectors
emmatown Sep 25, 2017
ed686d4
Merge branch 'master' into remove-component-selectors
emmatown Sep 25, 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
102 changes: 3 additions & 99 deletions packages/babel-plugin-emotion/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
// @flow weak
import fs from 'fs'
import {
basename,
dirname,
join as pathJoin,
sep as pathSep,
relative
} from 'path'
import { basename } from 'path'
import { touchSync } from 'touch'
import {
getIdentifierName,
Expand Down Expand Up @@ -78,67 +72,6 @@ export function replaceCssWithCallExpression(
}
}

// babel-plugin-styled-components
// https://github.com/styled-components/babel-plugin-styled-components/blob/37a13e9c21c52148ce6e403100df54c0b1561a88/src/visitors/displayNameAndId.js#L49-L93

const findModuleRoot = filename => {
if (!filename || filename === 'unknown') {
return null
}
let dir = dirname(filename)
if (fs.existsSync(pathJoin(dir, 'package.json'))) {
return dir
} else if (dir !== filename) {
return findModuleRoot(dir)
} else {
return null
}
}

const FILE_HASH = 'emotion-file-hash'
const COMPONENT_POSITION = 'emotion-component-position'

const getFileHash = state => {
const { file } = state
// hash calculation is costly due to fs operations, so we'll cache it per file.
if (file.get(FILE_HASH)) {
return file.get(FILE_HASH)
}
const filename = file.opts.filename
// find module root directory
const moduleRoot = findModuleRoot(filename)
const filePath =
moduleRoot && relative(moduleRoot, filename).replace(pathSep, '/')
let moduleName = ''
if (moduleRoot) {
const packageJsonContent = fs.readFileSync(
pathJoin(moduleRoot, 'package.json')
)
if (packageJsonContent) {
try {
moduleName = JSON.parse(packageJsonContent.toString()).name
} catch (e) {}
}
}
const code = file.code

const fileHash = hashArray([moduleName, filePath, code])
file.set(FILE_HASH, fileHash)
return fileHash
}

const getNextId = state => {
const id = state.file.get(COMPONENT_POSITION) || 0
state.file.set(COMPONENT_POSITION, id + 1)
return id
}

const getComponentId = (state, prefix: string = 'css') => {
// Prefix the identifier with css- because CSS classes cannot start with a number
// Also in snapshots with jest-glamor-react the hash will be replaced with an index
return `${prefix}-${getFileHash(state)}${getNextId(state)}`
}

export function buildStyledCallExpression(identifier, tag, path, state, t) {
const identifierName = getIdentifierName(path, t)

Expand All @@ -156,12 +89,6 @@ export function buildStyledCallExpression(identifier, tag, path, state, t) {
t.callExpression(identifier, [
tag,
t.objectExpression([
t.objectProperty(
t.identifier('id'),
t.stringLiteral(
getComponentId(state, getName(getIdentifierName(path, t), 'css'))
)
),
t.objectProperty(t.identifier('e'), t.stringLiteral(staticClassName))
])
]),
Expand All @@ -177,17 +104,7 @@ export function buildStyledCallExpression(identifier, tag, path, state, t) {
src = src + addSourceMaps(path.node.quasi.loc.start, state)
}
return t.callExpression(
t.callExpression(identifier, [
tag,
t.objectExpression([
t.objectProperty(
t.identifier('id'),
t.stringLiteral(
getComponentId(state, getName(getIdentifierName(path, t), 'css'))
)
)
])
]),
t.callExpression(identifier, [tag]),
new ASTObject(minify(src), path.node.quasi.expressions, t).toExpressions()
)
}
Expand All @@ -203,20 +120,7 @@ export function buildStyledObjectCallExpression(path, state, identifier, t) {
}
path.addComment('leading', '#__PURE__')

return t.callExpression(
t.callExpression(identifier, [
tag,
t.objectExpression([
t.objectProperty(
t.identifier('id'),
t.stringLiteral(
getComponentId(state, getName(getIdentifierName(path, t), 'css'))
)
)
])
]),
args
)
return t.callExpression(t.callExpression(identifier, [tag]), args)
}

const visited = Symbol('visited')
Expand Down
16 changes: 4 additions & 12 deletions packages/babel-plugin-emotion/test/__snapshots__/macro.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,19 +76,15 @@ const someCls = /*#__PURE__*/_css('display:flex;');"
exports[`babel macro styled object function 1`] = `
"import _styled from './styled';

const SomeComponent = /*#__PURE__*/_styled('div', {
id: 'css-SomeComponent-1f75k080'
})({
const SomeComponent = /*#__PURE__*/_styled('div')({
display: 'flex'
});"
`;

exports[`babel macro styled object member 1`] = `
"import _styled from './styled';

const SomeComponent = /*#__PURE__*/_styled('div', {
id: 'css-SomeComponent-1jnr57b0'
})({
const SomeComponent = /*#__PURE__*/_styled('div')({
display: 'flex'
});"
`;
Expand All @@ -102,15 +98,11 @@ const someOtherVar = _thisDoesNotExist;"
exports[`babel macro styled tagged template literal function 1`] = `
"import _styled from './styled';

const SomeComponent = /*#__PURE__*/_styled('div', {
id: 'css-SomeComponent-1sczqp40'
})('display:flex;');"
const SomeComponent = /*#__PURE__*/_styled('div')('display:flex;');"
`;

exports[`babel macro styled tagged template literal member 1`] = `
"import _styled from './styled';

const SomeComponent = /*#__PURE__*/_styled('div', {
id: 'css-SomeComponent-1rq85zx0'
})('display:flex;');"
const SomeComponent = /*#__PURE__*/_styled('div')('display:flex;');"
`;
10 changes: 2 additions & 8 deletions 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 @@ -18,9 +18,7 @@ fontFace(\\"font-family:MyHelvetica;src:local(\\\\\\"Helvetica Neue Bold\\\\\\")

exports[`source maps styled object styles source map 1`] = `
"
/*#__PURE__*/styled('div', {
id: 'css-139b3nl0'
})({
/*#__PURE__*/styled('div')({
color: 'blue',
'&:hover': {
'& .name': {
Expand All @@ -37,8 +35,4 @@ exports[`source maps styled object styles source map 1`] = `
}, '/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1uZXN0ZWQuc291cmNlLW1hcC50ZXN0LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNNIiwiZmlsZSI6ImNzcy1uZXN0ZWQuc291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgICBzdHlsZWQoJ2RpdicpKHtcbiAgICAgICAgY29sb3I6ICdibHVlJyxcbiAgICAgICAgJyY6aG92ZXInOiB7XG4gICAgICAgICAgJyYgLm5hbWUnOiB7XG4gICAgICAgICAgICBjb2xvcjogJ2FtZXRoeXN0JyxcbiAgICAgICAgICAgICcmOmZvY3VzJzoge1xuICAgICAgICAgICAgICBjb2xvcjogJ2J1cmx5d29vZCcsXG4gICAgICAgICAgICAgIFttcVswXV06IHtcbiAgICAgICAgICAgICAgICBjb2xvcjogJ3JlYmVjY2FwdXJwbGUnXG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cbiAgICAgICAgICB9LFxuICAgICAgICAgIGNvbG9yOiAnZ3JlZW4nXG4gICAgICAgIH1cbiAgICAgIH0pXG4gICAgIl19 */\\\\n/*@ sourceURL=css-nested.source-map.test.js */');"
`;

exports[`source maps styled source map 1`] = `
"const Avatar = /*#__PURE__*/styled('img', {
id: 'css-Avatar-1xslkpx0'
})('width:96px;height:96px;border-radius:', props => props.theme.borderRadius, ';border:1px solid ', props => props.theme.borderColor, ';/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZC5zb3VyY2UtbWFwLnRlc3QuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQTRCIiwiZmlsZSI6InN0eWxlZC5zb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJjb25zdCBBdmF0YXIgPSBzdHlsZWQoJ2ltZycpYFxuICAgICAgICB3aWR0aDogOTZweDtcbiAgICAgICAgaGVpZ2h0OiA5NnB4O1xuXG4gICAgICAgIGJvcmRlci1yYWRpdXM6ICR7cHJvcHMgPT5cbiAgICAgICAgICBwcm9wcy50aGVtZS5ib3JkZXJSYWRpdXN9O1xuXG4gICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICR7cHJvcHMgPT5cbiAgICAgICAgICBwcm9wcy50aGVtZS5ib3JkZXJDb2xvcn07XG4gICAgICBgIl19 */\\\\n/*@ sourceURL=styled.source-map.test.js */');"
`;
exports[`source maps styled source map 1`] = `"const Avatar = /*#__PURE__*/styled('img')('width:96px;height:96px;border-radius:', props => props.theme.borderRadius, ';border:1px solid ', props => props.theme.borderColor, ';/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZC5zb3VyY2UtbWFwLnRlc3QuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQTRCIiwiZmlsZSI6InN0eWxlZC5zb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJjb25zdCBBdmF0YXIgPSBzdHlsZWQoJ2ltZycpYFxuICAgICAgICB3aWR0aDogOTZweDtcbiAgICAgICAgaGVpZ2h0OiA5NnB4O1xuXG4gICAgICAgIGJvcmRlci1yYWRpdXM6ICR7cHJvcHMgPT5cbiAgICAgICAgICBwcm9wcy50aGVtZS5ib3JkZXJSYWRpdXN9O1xuXG4gICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICR7cHJvcHMgPT5cbiAgICAgICAgICBwcm9wcy50aGVtZS5ib3JkZXJDb2xvcn07XG4gICAgICBgIl19 */\\\\n/*@ sourceURL=styled.source-map.test.js */');"`;
Loading