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

fix: _JSXStyle is not defined #716

Closed
wants to merge 2 commits into from
Closed

fix: _JSXStyle is not defined #716

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2e56e67
fix: reassign default import from `addDefault`
morrisallison May 20, 2021
df000fd
fix: use traverse instead of splice
morrisallison May 21, 2021
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
1 change: 1 addition & 0 deletions src/_constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
export const GLOBAL_ATTRIBUTE = 'global'
export const STYLE_ATTRIBUTE = 'jsx'
export const STYLE_COMPONENT = '_JSXStyle'
export const STYLE_COMPONENT_IMPORT = '_JSXStyleImport'
export const STYLE_COMPONENT_DYNAMIC = 'dynamic'
export const STYLE_COMPONENT_ID = 'id'
46 changes: 42 additions & 4 deletions src/_utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import path from 'path'
import { addDefault } from '@babel/helper-module-imports';
import { addDefault } from '@babel/helper-module-imports'
import * as t from '@babel/types'
import _hashString from 'string-hash'
import { SourceMapGenerator } from 'source-map'
Expand All @@ -11,7 +11,8 @@ import {
GLOBAL_ATTRIBUTE,
STYLE_COMPONENT_ID,
STYLE_COMPONENT,
STYLE_COMPONENT_DYNAMIC
STYLE_COMPONENT_DYNAMIC,
STYLE_COMPONENT_IMPORT
} from './_constants'

const concat = (a, b) => t.binaryExpression('+', a, b)
Expand Down Expand Up @@ -621,14 +622,51 @@ export const booleanOption = opts => {
return ret
}

/**
* Adds an import declaration for the `JSXStyle` component
*
* ```
* import _JSXStyleImport from 'styled-jsx/style';
* var _JSXStyle = _JSXStyleImport;
* ```
*/
export const createReactComponentImportDeclaration = state => {
addDefault(
// The import identifier name can be `_JSXStyleImport`, `_JSXStyleImport2`, etc.
const importIdentifier = addDefault(
state.file.path,
typeof state.opts.styleModule === 'string'
? state.opts.styleModule
: 'styled-jsx/style',
{ nameHint: STYLE_COMPONENT}
{ nameHint: STYLE_COMPONENT_IMPORT }
)
// var _JSXStyle = _JSXStyleImport;
const variableDeclaration = t.variableDeclaration('var', [
t.variableDeclarator(t.identifier(STYLE_COMPONENT), importIdentifier)
])

// Insert the variable declaration after the import declaration
state.file.path.traverse({
// Handle CommonJS style imports
VariableDeclarator(path) {
if (
t.isIdentifier(path.node.id) &&
path.node.id.name === importIdentifier.name
) {
path.parentPath.insertAfter(variableDeclaration)
}
},
// Handle ES6 style imports
ImportDeclaration(path) {
const firstSpecifier = path.node.specifiers[0]

if (
firstSpecifier &&
firstSpecifier.local.name === importIdentifier.name
) {
path.insertAfter(variableDeclaration)
}
}
})
}

export const setStateOptions = state => {
Expand Down
6 changes: 4 additions & 2 deletions test/babel6/snapshots/attribute.js.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from 'styled-jsx/style';␊
`import _JSXStyleImport from 'styled-jsx/style';␊
var _JSXStyle = _JSXStyleImport;␊
import styles from './styles';␊
␊
const styles2 = require('./styles2');␊
Expand Down Expand Up @@ -106,10 +107,11 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from "styled-jsx/style";␊
`import _JSXStyleImport from "styled-jsx/style";␊
␊
var _this = this;␊
␊
var _JSXStyle = _JSXStyleImport;␊
export default (() => {␊
const Element = 'div';␊
return <div className={"jsx-2886504620"}>␊
Expand Down
Binary file modified test/babel6/snapshots/attribute.js.snap
View file
Open in desktop
Binary file not shown.
21 changes: 14 additions & 7 deletions test/babel6/snapshots/external.js.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from 'styled-jsx/style';␊
`import _JSXStyleImport from 'styled-jsx/style';␊
var _JSXStyle = _JSXStyleImport;␊
␊
import colors, { size } from './constants';␊
const color = 'red';␊
Expand Down Expand Up @@ -98,7 +99,8 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from 'styled-jsx/style';␊
`import _JSXStyleImport from 'styled-jsx/style';␊
var _JSXStyle = _JSXStyleImport;␊
␊
␊
function test() {␊
Expand All @@ -112,7 +114,8 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from 'styled-jsx/style';␊
`import _JSXStyleImport from 'styled-jsx/style';␊
var _JSXStyle = _JSXStyleImport;␊
␊
import colors, { size } from './constants';␊
const color = 'red';␊
Expand Down Expand Up @@ -168,7 +171,8 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from "styled-jsx/style";␊
`import _JSXStyleImport from "styled-jsx/style";␊
var _JSXStyle = _JSXStyleImport;␊
import styles from './styles2';␊
␊
export default (({ level = 1 }) => {␊
Expand All @@ -184,7 +188,8 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from 'styled-jsx/style';␊
`import _JSXStyleImport from 'styled-jsx/style';␊
var _JSXStyle = _JSXStyleImport;␊
import styles from './styles';␊
const styles2 = require('./styles2');␊
import { foo as styles3 } from './styles';␊
Expand All @@ -211,7 +216,8 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from 'styled-jsx/style';␊
`import _JSXStyleImport from 'styled-jsx/style';␊
var _JSXStyle = _JSXStyleImport;␊
import styles, { foo as styles3 } from './styles';␊
␊
const styles2 = require('./styles2');␊
Expand All @@ -229,7 +235,8 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from 'styled-jsx/style';␊
`import _JSXStyleImport from 'styled-jsx/style';␊
var _JSXStyle = _JSXStyleImport;␊
import styles from './styles';␊
␊
export default (() => <div className={`jsx-${styles.__hash}`}>␊
Expand Down
Binary file modified test/babel6/snapshots/external.js.snap
View file
Open in desktop
Binary file not shown.
42 changes: 28 additions & 14 deletions test/babel6/snapshots/index.js.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from 'styled-jsx/style';␊
`import _JSXStyleImport from 'styled-jsx/style';␊
var _JSXStyle = _JSXStyleImport;␊
export default (() => <div className={"jsx-2743241663"}>␊
<p className={"jsx-2743241663"}>test</p>␊
<p className={"jsx-2743241663"}>woot</p>␊
Expand All @@ -28,7 +29,8 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from 'styled-jsx/style';␊
`import _JSXStyleImport from 'styled-jsx/style';␊
var _JSXStyle = _JSXStyleImport;␊
export default (() => <div className={"jsx-2743241663"}>␊
<p className={"jsx-2743241663"}>test</p>␊
<p className={"jsx-2743241663"}>woot</p>␊
Expand All @@ -40,7 +42,8 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from 'styled-jsx/style';␊
`import _JSXStyleImport from 'styled-jsx/style';␊
var _JSXStyle = _JSXStyleImport;␊
const Test = () => <_JSXStyle id={"2743241663"}>{"p{color:red;}"}</_JSXStyle>;␊
␊
export default (() => <div className={"jsx-2673076688"}>␊
Expand All @@ -53,7 +56,8 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from 'styled-jsx/style';␊
`import _JSXStyleImport from 'styled-jsx/style';␊
var _JSXStyle = _JSXStyleImport;␊
const color = 'red';␊
const otherColor = 'green';␊
␊
Expand All @@ -76,7 +80,8 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from "styled-jsx/style";␊
`import _JSXStyleImport from "styled-jsx/style";␊
var _JSXStyle = _JSXStyleImport;␊
const Test = () => <div className={"jsx-2529315885"}>␊
<span className={"jsx-2529315885"}>test</span>␊
<Component />␊
Expand All @@ -87,7 +92,8 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from "styled-jsx/style";␊
`import _JSXStyleImport from "styled-jsx/style";␊
var _JSXStyle = _JSXStyleImport;␊
export default class {␊
␊
render() {␊
Expand All @@ -103,7 +109,8 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from 'styled-jsx/style';␊
`import _JSXStyleImport from 'styled-jsx/style';␊
var _JSXStyle = _JSXStyleImport;␊
␊
␊
export default (({ children }) => <div className={`jsx-${styles.__hash}`}>␊
Expand All @@ -127,7 +134,8 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from "styled-jsx/style";␊
`import _JSXStyleImport from "styled-jsx/style";␊
var _JSXStyle = _JSXStyleImport;␊
export default (({ level = 1 }) => {␊
const Element = `h${level}`;␊
␊
Expand Down Expand Up @@ -158,7 +166,8 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from 'styled-jsx/style';␊
`import _JSXStyleImport from 'styled-jsx/style';␊
var _JSXStyle = _JSXStyleImport;␊
export default class {␊
render() {␊
const Element = 'div';␊
Expand All @@ -184,7 +193,8 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from 'styled-jsx/style';␊
`import _JSXStyleImport from 'styled-jsx/style';␊
var _JSXStyle = _JSXStyleImport;␊
const darken = c => c;␊
const color = 'red';␊
const otherColor = 'green';␊
Expand Down Expand Up @@ -215,7 +225,8 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from 'styled-jsx/style';␊
`import _JSXStyleImport from 'styled-jsx/style';␊
var _JSXStyle = _JSXStyleImport;␊
const Test = () => <div className={"jsx-2209073070"}>␊
<_JSXStyle id={"2209073070"}>{"body{color:red;}:hover{color:red;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-animation:foo 1s ease-out;animation:foo 1s ease-out;}div a{display:none;}[data-test]>div{color:red;}"}</_JSXStyle>␊
</div>;␊
Expand All @@ -226,7 +237,8 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from "styled-jsx/style";␊
`import _JSXStyleImport from "styled-jsx/style";␊
var _JSXStyle = _JSXStyleImport;␊
const attrs = {␊
id: 'test'␊
};␊
Expand Down Expand Up @@ -257,7 +269,8 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from 'styled-jsx/style';␊
`import _JSXStyleImport from 'styled-jsx/style';␊
var _JSXStyle = _JSXStyleImport;␊
export default (() => <div className={"jsx-2743241663"}>␊
<p className={"jsx-2743241663"}>woot</p>␊
<style dangerouslySetInnerHTML={{ __html: `body { margin: 0; }` }}></style>␊
Expand All @@ -268,7 +281,8 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from 'styled-jsx/style';␊
`import _JSXStyleImport from 'styled-jsx/style';␊
var _JSXStyle = _JSXStyleImport;␊
export default (() => <div className={"jsx-2743241663"}>␊
<p className={"jsx-2743241663"}>test</p>␊
<p className={"jsx-2743241663"}>woot</p>␊
Expand Down
Binary file modified test/babel6/snapshots/index.js.snap
View file
Open in desktop
Binary file not shown.
9 changes: 6 additions & 3 deletions test/babel6/snapshots/macro.js.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from 'styled-jsx/style';␊
`import _JSXStyleImport from 'styled-jsx/style';␊
var _JSXStyle = _JSXStyleImport;␊
␊
␊
({␊
Expand All @@ -20,7 +21,8 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from 'styled-jsx/style';␊
`import _JSXStyleImport from 'styled-jsx/style';␊
var _JSXStyle = _JSXStyleImport;␊
␊
␊
function test() {␊
Expand All @@ -34,7 +36,8 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from 'styled-jsx/style';␊
`import _JSXStyleImport from 'styled-jsx/style';␊
var _JSXStyle = _JSXStyleImport;␊
␊
␊
const { className, styles } = {␊
Expand Down
Binary file modified test/babel6/snapshots/macro.js.snap
View file
Open in desktop
Binary file not shown.
6 changes: 4 additions & 2 deletions test/babel6/snapshots/plugins.js.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from 'styled-jsx/style';␊
`import _JSXStyleImport from 'styled-jsx/style';␊
var _JSXStyle = _JSXStyleImport;␊
import styles from './styles';␊
const color = 'red';␊
␊
Expand Down Expand Up @@ -39,7 +40,8 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from 'styled-jsx/style';␊
`import _JSXStyleImport from 'styled-jsx/style';␊
var _JSXStyle = _JSXStyleImport;␊
import styles from './styles';␊
const color = 'red';␊
␊
Expand Down
Binary file modified test/babel6/snapshots/plugins.js.snap
View file
Open in desktop
Binary file not shown.
6 changes: 4 additions & 2 deletions test/snapshots/attribute.js.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from "styled-jsx/style";␊
`import _JSXStyleImport from "styled-jsx/style";␊
var _JSXStyle = _JSXStyleImport;␊
import styles from './styles';␊
␊
const styles2 = require('./styles2'); // external only␊
Expand Down Expand Up @@ -112,7 +113,8 @@ Generated by [AVA](https://ava.li).

> Snapshot 1

`import _JSXStyle from "styled-jsx/style";␊
`import _JSXStyleImport from "styled-jsx/style";␊
var _JSXStyle = _JSXStyleImport;␊
export default (() => {␊
const Element = 'div';␊
return <div className={"jsx-2886504620"}>␊
Expand Down
Binary file modified test/snapshots/attribute.js.snap
View file
Open in desktop
Binary file not shown.
Loading