(fix): change plugin order to make styled-components/macro work (jare…

…dpalmer#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

@@ -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',
         },

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 }],
   ]
 }

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 */

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', () => {