lukechilds
/
styled-jsx
mirror of https://github.com/lukechilds/styled-jsx.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Fix nested style tags breaking compilation

fix-nested-style-tags
Giuseppe Gurgone 7 years ago
parent
70a0b28385
commit
570fbe907f
5 changed files with 104 additions and 15 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      src/babel.js
  2. 26
      test/__snapshots__/index.js.snap
  3. 55
      test/fixtures/nested-style-tags.js
  4. 5
      test/index.js
  5. 26
      yarn.lock

7
src/babel.js
View File

@ -254,14 +254,17 @@ export default function({ types: t }) {
},
exit(path, state) {
const isGlobal = isGlobalEl(path.node.openingElement)
if (state.hasJSXStyle && !--state.ignoreClosing && !isGlobal) {
state.hasJSXStyle = null
state.jsxId = null
state.externalJsxId = null
}
if (!state.hasJSXStyle || !isStyledJsx(path)) {
if (
!state.hasJSXStyle ||
!isStyledJsx(path) ||
state.ignoreClosing > 1
) {
return
}

26
test/__snapshots__/index.js.snap
View File

@ -1,5 +1,31 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`does not transpile nested style tags 1`] = `
"import _JSXStyle from \\"styled-jsx/style\\";
export default (() => <div data-jsx={1535297024}>
<span data-jsx={1535297024}>test
<style jsx>
{\`div { color: red }\`} {/* this should not be transpiled */}
</style>
</span>
<_JSXStyle styleId={1535297024} css={\\"span[data-jsx=\\\\\\"1535297024\\\\\\"]{color:red}\\"} />
</div>);
const Test = () => <div data-jsx={1535297024}>
<span data-jsx={1535297024}>test
<style jsx>
{\`div { color: red }\`} {/* this should not be transpiled */}
</style>
<Component>
<style jsx>
{\`div { color: red }\`} {/* this should not be transpiled */}
</style>
</Component>
</span>
<_JSXStyle styleId={1535297024} css={\\"span[data-jsx=\\\\\\"1535297024\\\\\\"]{color:red}\\"} />
</div>;"
`;
exports[`generates source maps 1`] = `
"import _JSXStyle from 'styled-jsx/style';
export default (() => <div data-jsx={188072295}>

55
test/fixtures/nested-style-tags.js
View File

@ -0,0 +1,55 @@
import styles from './styles'
export default () =>
<div>
<span>
test
<style jsx>
{`
div {
color: red;
}
`}{' '}
{/* this should not be transpiled */}
</style>
</span>
<style jsx>{`
span {
color: red;
}
`}</style>
</div>
export const Test = () =>
<div>
<span>
test
<style jsx>
{`
div {
color: red;
}
`}{' '}
{/* this should not be transpiled */}
</style>
<Component>
<style jsx>
{`
div {
color: red;
}
`}{' '}
{/* this should not be transpiled */}
</style>
<style jsx>{styles}</style> {/* this should not be transpiled */}
</Component>
</span>
<style jsx>{`
span {
color: red;
}
`}</style>
<style jsx>
{styles}
</style>
</div>

5
test/index.js
View File

@ -105,6 +105,11 @@ test('works with external stylesheets (global only)', async t => {
t.snapshot(code)
})
test('does not transpile nested style tags', async t => {
const { code } = await transform('./fixtures/nested-style-tags.js')
t.snapshot(code)
})
test('server rendering', t => {
function App() {
const color = 'green'

26
yarn.lock
View File

@ -1048,7 +1048,7 @@ babel-template@^6.16.0, babel-template@^6.24.1:
babylon "^6.11.0"
lodash "^4.2.0"
babel-traverse@6.21.0:
babel-traverse@6.21.0, babel-traverse@^6.18.0:
version "6.21.0"
resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.21.0.tgz#69c6365804f1a4f69eb1213f85b00a818b8c21ad"
dependencies:
@ -1062,7 +1062,7 @@ babel-traverse@6.21.0:
invariant "^2.2.0"
lodash "^4.2.0"
babel-traverse@^6.18.0, babel-traverse@^6.24.1:
babel-traverse@^6.24.1:
version "6.24.1"
resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.24.1.tgz#ab36673fd356f9a0948659e7b338d5feadb31695"
dependencies:
@ -1076,7 +1076,7 @@ babel-traverse@^6.18.0, babel-traverse@^6.24.1:
invariant "^2.2.0"
lodash "^4.2.0"
babel-types@6.23.0:
babel-types@6.23.0, babel-types@^6.18.0, babel-types@^6.21.0:
version "6.23.0"
resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.23.0.tgz#bb17179d7538bad38cd0c9e115d340f77e7e9acf"
dependencies:
@ -1085,7 +1085,7 @@ babel-types@6.23.0:
lodash "^4.2.0"
to-fast-properties "^1.0.1"
babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.21.0, babel-types@^6.24.1:
babel-types@^6.19.0, babel-types@^6.24.1:
version "6.24.1"
resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.24.1.tgz#a136879dc15b3606bda0d90c1fc74304c2ff0975"
dependencies:
@ -1094,11 +1094,11 @@ babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.21.0, babel-types@^6.24
lodash "^4.2.0"
to-fast-properties "^1.0.1"
babylon@6.14.1:
babylon@6.14.1, babylon@^6.1.0, babylon@^6.11.0:
version "6.14.1"
resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.14.1.tgz#956275fab72753ad9b3435d7afe58f8bf0a29815"
babylon@^6.1.0, babylon@^6.11.0, babylon@^6.15.0:
babylon@^6.15.0:
version "6.17.1"
resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.17.1.tgz#17f14fddf361b695981fe679385e4f1c01ebd86f"
@ -1803,7 +1803,7 @@ escope@^3.6.0:
esrecurse "^4.1.0"
estraverse "^4.1.1"
eslint-config-prettier@^2.1.0:
eslint-config-prettier@2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-2.1.1.tgz#ab3923fb704eebecab6960906b7d0d6e801cde58"
dependencies:
@ -4086,7 +4086,7 @@ preserve@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
prettier@^1.5.2:
prettier@1.5.2:
version "1.5.2"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.5.2.tgz#7ea0751da27b93bfb6cecfcec509994f52d83bb3"
@ -4479,14 +4479,14 @@ semver-diff@^2.0.0:
dependencies:
semver "^5.0.3"
"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.3.0:
version "5.3.0"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
semver@^4.1.0:
"semver@2 || 3 || 4 || 5", semver@^4.1.0:
version "4.3.6"
resolved "https://registry.yarnpkg.com/semver/-/semver-4.3.6.tgz#300bc6e0e86374f7ba61068b5b1ecd57fc6532da"
semver@^5.0.3, semver@^5.1.0, semver@^5.3.0:
version "5.3.0"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
sequencify@~0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/sequencify/-/sequencify-0.0.7.tgz#90cff19d02e07027fd767f5ead3e7b95d1e7380c"

Write Preview
Loading…
Cancel
Save