From 62ad675610eb215b00b3642703cc3a85efec39c4 Mon Sep 17 00:00:00 2001
From: Anton Gilgur <agilgur5@gmail.com>
Date: Thu, 17 Sep 2020 19:48:54 -0400
Subject: [PATCH] (fix): change plugin order to make styled-components/macro
 work (#644)

- if babel-plugin-macros is first, macros get applied first
  - babel-plugin-styled-components says it should be placed first, but
    unfortunately all user plugins are added after TSDX plugins
    - unknown how changing this ordering could impact lots of code out
      there, but could be very breaking.
      - moving to a preset instead would mean this is more in user
        control
  - but we can change it so macros are added first and so one can use
    styled-components/macro instead as a workaround

- based on babel-plugin-styled-component's code, docs, and output in
  detail, I think its ordering conflict may be with
  babel-plugin-annotate-pure-calls, which so happens to be the first
  plugin in babelPluginTsdx
  - maybe this should be last given that other plugins can change
    functions etc

(test): update styled-component template tag test to reflect the
slightly different tag due to the usage of the macro

(fix/test): comment removal should use toBeFalsy, not toBeTruthy,
since it's removed
- this was a bug I introduced when adding the grep helper; just added
  it the same everywhere but this was the one place that was testing
  to get an error code
  - fix the comment so it doesn't say error code anymore either
  - since this test was skipped, I didn't pick up that it was wrong
    until it ran now
---
 src/babelPluginTsdx.ts                            |  4 +---
 .../fixtures/build-withBabel/.babelrc.js          |  1 -
 .../fixtures/build-withBabel/src/styled.tsx       |  2 +-
 test/integration/tsdx-build-withBabel.test.ts     | 15 +++++++++------
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/babelPluginTsdx.ts b/src/babelPluginTsdx.ts
index d23f8b1ea..f4a996e39 100644
--- a/src/babelPluginTsdx.ts
+++ b/src/babelPluginTsdx.ts
@@ -67,6 +67,7 @@ export const babelPluginTsdx = babelPlugin.custom(() => ({
         //   pragma: customOptions.jsx || 'h',
         //   pragmaFrag: customOptions.jsxFragment || 'Fragment',
         // },
+        { name: 'babel-plugin-macros' },
         { name: 'babel-plugin-annotate-pure-calls' },
         { name: 'babel-plugin-dev-expression' },
         customOptions.format !== 'cjs' && {
@@ -86,9 +87,6 @@ export const babelPluginTsdx = babelPlugin.custom(() => ({
           name: '@babel/plugin-transform-regenerator',
           async: false,
         },
-        {
-          name: 'babel-plugin-macros',
-        },
         isTruthy(customOptions.extractErrors) && {
           name: './errors/transformErrorMessages',
         },
diff --git a/test/integration/fixtures/build-withBabel/.babelrc.js b/test/integration/fixtures/build-withBabel/.babelrc.js
index 06ede96cd..a010a8d6b 100644
--- a/test/integration/fixtures/build-withBabel/.babelrc.js
+++ b/test/integration/fixtures/build-withBabel/.babelrc.js
@@ -4,7 +4,6 @@ module.exports = {
     './test-babel-preset'
   ],
   plugins: [
-    'styled-components',
    ['@babel/plugin-transform-runtime', { helpers: false }],
   ]
 }
diff --git a/test/integration/fixtures/build-withBabel/src/styled.tsx b/test/integration/fixtures/build-withBabel/src/styled.tsx
index 12ca9fe94..c0dcbc3b0 100644
--- a/test/integration/fixtures/build-withBabel/src/styled.tsx
+++ b/test/integration/fixtures/build-withBabel/src/styled.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 export const Title = styled.h1`
   /* this comment should be removed */
diff --git a/test/integration/tsdx-build-withBabel.test.ts b/test/integration/tsdx-build-withBabel.test.ts
index 26b037623..17b59e2a7 100644
--- a/test/integration/tsdx-build-withBabel.test.ts
+++ b/test/integration/tsdx-build-withBabel.test.ts
@@ -19,19 +19,22 @@ describe('integration :: tsdx build :: .babelrc.js', () => {
     const output = execWithCache('node ../dist/index.js build');
     expect(output.code).toBe(0);
 
-    // from styled.h1` to styled.h1(
-    const matched = grep(/styled.h1\(/, ['dist/build-withbabel.*.js']);
+    // from styled.h1` to styled.h1.withConfig(
+    const matched = grep(/styled.h1.withConfig\(/, [
+      'dist/build-withbabel.*.js',
+    ]);
     expect(matched).toBeTruthy();
   });
 
-  // TODO: make this test work by allowing customization of plugin order
-  it.skip('should remove comments in the CSS', () => {
+  // TODO: make styled-components work with its Babel plugin and not just its
+  // macro by allowing customization of plugin order
+  it('should remove comments in the CSS', () => {
     const output = execWithCache('node ../dist/index.js build');
     expect(output.code).toBe(0);
 
-    // the "should be removed" comment shouldn't be there (gets error code)
+    // the comment "should be removed" should no longer be there
     const matched = grep(/should be removed/, ['dist/build-withbabel.*.js']);
-    expect(matched).toBeTruthy();
+    expect(matched).toBeFalsy();
   });
 
   it('should add an import of regeneratorRuntime', () => {