feat: support template literals in object properties and jsx props

babel.js

@@ -3,7 +3,6 @@
 module.exports = function linariaBabelPreset(context, opts = {}) {
   return {
     plugins: [
-      [require('./build/babel/hoist-css').default, opts],
       [require('./build/babel/preval-extract').default, opts],
       [require('./build/babel/rewire-imports').default, opts],
     ],

src/babel/__integration-tests__/__utils__/transpile.js

@@ -20,7 +20,7 @@ function transpile(source, options = { pluginOptions: {}, babelOptions: {} }) {
     `,
     Object.assign(
       {
-        presets: ['es2015', 'stage-2'],
+        presets: ['es2015', 'stage-2', 'react'],
         plugins: [[PREVAL_PLUGIN_PATH, options.pluginOptions]],
         sourceMaps: false,
       },

src/babel/__integration-tests__/preval-extract/__snapshots__/errors.spec.js.snap

@@ -17,7 +17,7 @@ SyntaxError: test.js: Linaria css evaluation error:
   5 | \`;
     at File.buildCodeFrameError (<<CWD>>/node_modules/babel-core/lib/transformation/file/index.js:427:15)
     at NodePath.buildCodeFrameError (<<CWD>>/node_modules/babel-traverse/lib/path/index.js:140:26)
-    at resolveSource (<<CWD>>/build/babel/preval-extract/resolveSource.js:33:16)
+    at resolveSource (<<CWD>>/build/babel/preval-extract/resolveSource.js:31:16)
     at Object.Identifier (<<CWD>>/build/babel/preval-extract/index.js:46:48)
     at NodePath._call (<<CWD>>/node_modules/babel-traverse/lib/path/context.js:76:18)
     at NodePath.call (<<CWD>>/node_modules/babel-traverse/lib/path/context.js:48:17)

src/babel/__integration-tests__/preval-extract/__snapshots__/preval-extract.spec.js.snap

@@ -28,7 +28,7 @@ import css from '<<CWD>>/build/css.js';
 const size = 3;
 let color = "#ffffff";
 
-/*linaria-output*/const header = "header__3r30ar";
+const header = /*linaria-output*/"header__3r30ar";
 `;
 
 exports[`preval-extract babel plugin should preval css with classname from another prevaled css 1`] = `

src/babel/__integration-tests__/preval-extract/development.spec.js

@@ -33,10 +33,10 @@ describe('preval-extract babel plugin', () => {
       { filename: path.join(process.cwd(), 'test.js') }
     );
 
-    const classnameWithSlugFromContent = /header = '(header__[a-z0-9]+)'/g.exec(
+    const classnameWithSlugFromContent = /header = \/\*.+\*\/'(header__[a-z0-9]+)'/g.exec(
       codeWithSlugFromContent
     );
-    const classnameWithSlugFromFilename = /header = '(header__[a-z0-9]+)'/g.exec(
+    const classnameWithSlugFromFilename = /header = \/\*.+\*\/'(header__[a-z0-9]+)'/g.exec(
       codeWithSlugFromFilename
     );
 

src/babel/__integration-tests__/preval-extract/preval-extract.spec.js

@@ -48,7 +48,7 @@ describe('preval-extract babel plugin', () => {
     \`;
     `);
 
-    const match = /header = '(header__[a-z0-9]+)'/g.exec(code);
+    const match = /header = \/\*.+\*\/'(header__[a-z0-9]+)'/g.exec(code);
     expect(match).not.toBeNull();
     const css = getCSSForClassName(match[1]);
     expect(css).toMatch('font-size: 3em');
@@ -62,7 +62,7 @@ describe('preval-extract babel plugin', () => {
     \`;
     `);
 
-    const match = /header = "(my-header__[a-z0-9]+)"/g.exec(code);
+    const match = /header = \/\*.+\*\/"(my-header__[a-z0-9]+)"/g.exec(code);
     expect(match).not.toBeNull();
     const css = getCSSForClassName(match[1]);
     expect(css).toMatch('font-size: 3em');
@@ -80,8 +80,8 @@ describe('preval-extract babel plugin', () => {
     \`;
     `);
 
-    const headerMatch = /header = '(header__[a-z0-9]+)'/g.exec(code);
-    const bodyMatch = /body = '(body__[a-z0-9]+)'/g.exec(code);
+    const headerMatch = /header = \/\*.+\*\/'(header__[a-z0-9]+)'/g.exec(code);
+    const bodyMatch = /body = \/\*.+\*\/'(body__[a-z0-9]+)'/g.exec(code);
     expect(headerMatch).not.toBeNull();
     expect(bodyMatch).not.toBeNull();
     const headerStyles = getCSSForClassName(headerMatch[1]);
@@ -97,15 +97,14 @@ describe('preval-extract babel plugin', () => {
     const defaults = {
       fontSize: "3em",
     };
-
     function render() {
       const header = css\`
         font-size: ${'${defaults.fontSize}'};
       \`;
     }
     `);
 
-    const match = /header = "(header__[a-z0-9]+)"/g.exec(code);
+    const match = /header = \/\*.+\*\/"(header__[a-z0-9]+)"/g.exec(code);
     expect(match).not.toBeNull();
     const css = getCSSForClassName(match[1]);
     expect(css).toMatch('font-size: 3em');
@@ -131,7 +130,7 @@ describe('preval-extract babel plugin', () => {
       }
     );
 
-    const match = /header = "(header__[a-z0-9]+)"/g.exec(code);
+    const match = /header = \/\*.+\*\/"(header__[a-z0-9]+)"/g.exec(code);
     expect(match).not.toBeNull();
     const css = getCSSForClassName(match[1]);
     expect(css).toMatch('font-size: 3em');
@@ -154,10 +153,12 @@ describe('preval-extract babel plugin', () => {
     \`;
     `);
 
-    const titleMatch = /title = '(title__[a-z0-9]+)'/g.exec(code);
+    const titleMatch = /title = \/\*.+\*\/'(title__[a-z0-9]+)'/g.exec(code);
     expect(titleMatch).not.toBeNull();
 
-    const containerMatch = /container = '(container__[a-z0-9]+)'/g.exec(code);
+    const containerMatch = /container = \/\*.+\*\/'(container__[a-z0-9]+)'/g.exec(
+      code
+    );
     expect(containerMatch).not.toBeNull();
 
     const css = getCSSForClassName(containerMatch[1]);

src/babel/__integration-tests__/preval-extract/with-common-js-exports.spec.js → src/babel/__integration-tests__/preval-extract/with-common-js-imports.spec.js

@@ -15,14 +15,14 @@ describe('preval-extract babel plugin with commonjs imports', () => {
 
   it('should preval imported constants ', () => {
     const { code, getCSSForClassName } = transpile(dedent`
-      const constants = require("./src/babel/__integration-tests__/__fixtures__/commonjs/constants.js");
+    const constants = require("./src/babel/__integration-tests__/__fixtures__/commonjs/constants.js");
 
-      const header = css\`
-        font-size: ${'${constants.fontSize}'};
-      \`;
-      `);
+    const header = css\`
+      font-size: ${'${constants.fontSize}'};
+    \`;
+    `);
 
-    const match = /header = "(header__[a-z0-9]+)"/g.exec(code);
+    const match = /header = \/\*.+\*\/"(header__[a-z0-9]+)"/g.exec(code);
     expect(match).not.toBeNull();
     const css = getCSSForClassName(match[1]);
     expect(css).toMatch('font-size: 14px');
@@ -31,14 +31,14 @@ describe('preval-extract babel plugin with commonjs imports', () => {
 
   it('should preval imported constants with destructurization', () => {
     const { code, getCSSForClassName } = transpile(dedent`
-      const { fontSize } = require("./src/babel/__integration-tests__/__fixtures__/commonjs/constants.js");
+    const { fontSize } = require("./src/babel/__integration-tests__/__fixtures__/commonjs/constants.js");
 
-      const header = css\`
-        font-size: ${'${fontSize}'};
-      \`;
-      `);
+    const header = css\`
+      font-size: ${'${fontSize}'};
+    \`;
+    `);
 
-    const match = /header = "(header__[a-z0-9]+)"/g.exec(code);
+    const match = /header = \/\*.+\*\/"(header__[a-z0-9]+)"/g.exec(code);
     expect(match).not.toBeNull();
     const css = getCSSForClassName(match[1]);
     expect(css).toMatch('font-size: 14px');

src/babel/__integration-tests__/preval-extract/with-es-exports.spec.js → src/babel/__integration-tests__/preval-extract/with-es-imports.spec.js

@@ -22,7 +22,7 @@ describe('preval-extract babel plugin with ES imports', () => {
       \`;
       `);
 
-    const match = /header = "(header__[a-z0-9]+)"/g.exec(code);
+    const match = /header = \/\*.+\*\/"(header__[a-z0-9]+)"/g.exec(code);
     expect(match).not.toBeNull();
     const css = getCSSForClassName(match[1]);
     expect(css).toMatch('font-size: 14px');
@@ -42,8 +42,8 @@ describe('preval-extract babel plugin with ES imports', () => {
       \`;
       `);
 
-    const headerMatch = /header = "(header__[a-z0-9]+)"/g.exec(code);
-    const bodyMatch = /body = "(body__[a-z0-9]+)"/g.exec(code);
+    const headerMatch = /header = \/\*.+\*\/"(header__[a-z0-9]+)"/g.exec(code);
+    const bodyMatch = /body = \/\*.+\*\/"(body__[a-z0-9]+)"/g.exec(code);
     expect(headerMatch).not.toBeNull();
     expect(bodyMatch).not.toBeNull();
     const headerStyles = getCSSForClassName(headerMatch[1]);
@@ -63,7 +63,7 @@ describe('preval-extract babel plugin with ES imports', () => {
       \`;
       `);
 
-    const match = /header = "(header__[a-z0-9]+)"/g.exec(code);
+    const match = /header = \/\*.+\*\/"(header__[a-z0-9]+)"/g.exec(code);
     expect(match).not.toBeNull();
     const css = getCSSForClassName(match[1]);
     expect(css).toMatch('font-size: 28px');

src/babel/__integration-tests__/preval-extract/with-function-calls.spec.js

@@ -15,15 +15,15 @@ describe('preval-extract babel plugin with function calls', () => {
 
   it('should preval with function call inside an expression', () => {
     const { code, getCSSForClassName } = transpile(dedent`
-      const constants = require("./src/babel/__integration-tests__/__fixtures__/commonjs/constants.js");
-      const utils = require("./src/babel/__integration-tests__/__fixtures__/commonjs/utils.js");
+    const constants = require("./src/babel/__integration-tests__/__fixtures__/commonjs/constants.js");
+    const utils = require("./src/babel/__integration-tests__/__fixtures__/commonjs/utils.js");
 
-      const header = css\`
-        font-size: ${'${utils.multiply(constants.unitless.fontSize)}'}px;
-      \`;
-      `);
+    const header = css\`
+      font-size: ${'${utils.multiply(constants.unitless.fontSize)}'}px;
+    \`;
+    `);
 
-    const match = /header = "(header__[a-z0-9]+)"/g.exec(code);
+    const match = /header = \/\*.+\*\/"(header__[a-z0-9]+)"/g.exec(code);
     expect(match).not.toBeNull();
     const css = getCSSForClassName(match[1]);
     expect(css).toMatch('font-size: 28px');
@@ -32,21 +32,21 @@ describe('preval-extract babel plugin with function calls', () => {
 
   it('should preval multiple function calls inside an expression', () => {
     const { code, getCSSForClassName } = transpile(dedent`
-      const constants = require("./src/babel/__integration-tests__/__fixtures__/commonjs/constants.js");
-      const utils = require("./src/babel/__integration-tests__/__fixtures__/commonjs/utils.js");
+    const constants = require("./src/babel/__integration-tests__/__fixtures__/commonjs/constants.js");
+    const utils = require("./src/babel/__integration-tests__/__fixtures__/commonjs/utils.js");
 
-      function compose(...fns) {
-        return value => fns.reduce((prev, fn) => {
-          return fn(prev);
-        }, value);
-      }
+    function compose(...fns) {
+      return value => fns.reduce((prev, fn) => {
+        return fn(prev);
+      }, value);
+    }
 
-      const header = css\`
-        font-size: ${'${compose(utils.multiply, utils.add5)(constants.unitless.fontSize)}'}px;
-      \`;
-      `);
+    const header = css\`
+      font-size: ${'${compose(utils.multiply, utils.add5)(constants.unitless.fontSize)}'}px;
+    \`;
+    `);
 
-    const match = /header = "(header__[a-z0-9]+)"/g.exec(code);
+    const match = /header = \/\*.+\*\/"(header__[a-z0-9]+)"/g.exec(code);
     expect(match).not.toBeNull();
     const css = getCSSForClassName(match[1]);
     expect(css).toMatch('font-size: 33px');