├── src
    ├── index.css
    ├── andre-spieker-238-unsplash.jpg
    ├── index.js
    ├── App.test.js
    └── App.js
├── public
    ├── favicon.ico
    ├── manifest.json
    └── index.html
├── .gitignore
├── package.json
└── README.md


/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 |   margin: 0;
3 |   padding: 0;
4 |   font-family: sans-serif;
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stereobooster/babel-macro-issue/master/public/favicon.ico


--------------------------------------------------------------------------------
/src/andre-spieker-238-unsplash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stereobooster/babel-macro-issue/master/src/andre-spieker-238-unsplash.jpg


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | 
6 | ReactDOM.render(<App />, document.getElementById('root'));
7 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | 
 5 | it('renders without crashing', () => {
 6 |   const div = document.createElement('div');
 7 |   ReactDOM.render(<App />, div);
 8 |   ReactDOM.unmountComponentAtNode(div);
 9 | });
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | 
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | import coverImage from "./andre-spieker-238-unsplash.jpg";
 4 | import lqip from "lqip.macro";
 5 | const coverLqip = lqip("./andre-spieker-238-unsplash.jpg");
 6 | 
 7 | const App = () => (
 8 |   <div
 9 |     style={{
10 |       backgroundImage: `url(${coverLqip}`,
11 |       backgroundSize: "cover",
12 |       backgroundRepeat: "no-repeat",
13 |       width:"100vw",
14 |       height: "100vh"
15 |     }}
16 |   >
17 |     <img src={coverImage} alt="" width="100%" height="100%" />
18 |   </div>
19 | );
20 | 
21 | export default App;
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "babel-macro-issue",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "lqip.macro": "^0.1.4",
 7 |     "react": "^16.3.2",
 8 |     "react-dom": "^16.3.2",
 9 |     "react-scripts": "2.0.0-next.66cc7a90"
10 |   },
11 |   "scripts": {
12 |     "start": "react-scripts start",
13 |     "build": "react-scripts build",
14 |     "test": "react-scripts test --env=jsdom",
15 |     "test:ci": "CI=true react-scripts test --env=jsdom",
16 |     "test:coverage": "CI=true react-scripts test --env=jsdom --coverage",
17 |     "eject": "react-scripts eject"
18 |   },
19 |   "browserslist": {
20 |     "development": [
21 |       "last 2 chrome versions",
22 |       "last 2 firefox versions",
23 |       "last 2 edge versions"
24 |     ],
25 |     "production": [
26 |       ">1%",
27 |       "last 4 versions",
28 |       "Firefox ESR",
29 |       "not ie < 11"
30 |     ]
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <!--
 8 |       manifest.json provides metadata used when your web app is added to the
 9 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10 |     -->
11 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13 |     <!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 |     <title>React App</title>
23 |   </head>
24 |   <body>
25 |     <noscript>
26 |       You need to enable JavaScript to run this app.
27 |     </noscript>
28 |     <div id="root"></div>
29 |     <!--
30 |       This HTML file is a template.
31 |       If you open it directly in the browser, you will see an empty page.
32 | 
33 |       You can add webfonts, meta tags, or analytics to this file.
34 |       The build step will place the bundled scripts into the <body> tag.
35 | 
36 |       To begin the development, run `npm start` or `yarn start`.
37 |       To create a production bundle, use `npm run build` or `yarn build`.
38 |     -->
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Babel Macro Issue
 2 | 
 3 | ```
 4 | yarn
 5 | 
 6 | yarn test    # Ok
 7 | 
 8 | yarn test:ci # Ok
 9 | 
10 | yarn test:coverage
11 | yarn run v1.5.1
12 | $ CI=true react-scripts test --env=jsdom --coverage
13 | FAIL src/App.test.js
14 |   ● Test suite failed to run
15 | 
16 |     lqip.macro: This is not supported: ``. Please see the lqip.macro documentation Learn more: https://www.npmjs.com/package/lqip.macro
17 | 
18 |       at node_modules/lqip.macro/dist/lqip.macro.js:1:289
19 |           at Array.map (<anonymous>)
20 |       at node_modules/lqip.macro/dist/lqip.macro.js:1:227
21 |       at macroWrapper (node_modules/babel-plugin-macros/dist/index.js:54:12)
22 |       at applyMacros (node_modules/babel-preset-react-app/node_modules/babel-plugin-macros/dist/index.js:164:5)
23 |       at PluginPass.ImportDeclaration (node_modules/babel-preset-react-app/node_modules/babel-plugin-macros/dist/index.js:82:9)
24 |       at newFn (node_modules/@babel/core/node_modules/@babel/traverse/lib/visitors.js:243:21)
25 |       at NodePath._call (node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:65:18)
26 |       at NodePath.call (node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:40:17)
27 |       at NodePath.visit (node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:100:12)
28 | ```
29 | 
30 | 
31 | ```js
32 | if (referencePath.parentPath.type === "CallExpression") {
33 |   requirelqip({ referencePath, state, babel });
34 | } else {
35 |   throw new Error(
36 |     `This is not supported: \`${referencePath
37 |       .findParent(babel.types.isExpression)
38 |       .getSource()}\`. Please see the lqip.macro documentation`,
39 |   );
40 | }
41 | ```
42 | 
43 | Without `--coverage` - `referencePath.parentPath.type === "CallExpression"`
44 | 
45 | With `--coverage` - `referencePath.parentPath.type === "SequenceExpression"`
46 | 


--------------------------------------------------------------------------------