(test): ensure styled-components works with TSDX

- well, babel-plugin-styled-components fails... but we have a TODO to
  make it work at least!

- ensure styled template tags get converted to regular functions

- add a build-withBabel fixture

(deps): add styled-components
- and it has peerDeps on react-dom and react-is
- add @types/styled-components for TS usage

package.json

@@ -112,6 +112,7 @@
     "@types/rollup-plugin-sourcemaps": "^0.4.2",
     "@types/sade": "^1.6.0",
     "@types/semver": "^7.1.0",
+    "@types/styled-components": "^5.0.1",
     "autoprefixer": "^9.7.4",
     "cssnano": "^4.1.10",
     "doctoc": "^1.4.0",
@@ -120,8 +121,11 @@
     "pretty-quick": "^2.0.0",
     "ps-tree": "^1.2.0",
     "react": "^16.8.6",
+    "react-dom": "^16.13.0",
+    "react-is": "^16.13.0",
     "rollup-plugin-postcss": "^2.5.0",
     "semver": "^7.1.1",
+    "styled-components": "^5.0.1",
     "tiny-invariant": "^1.1.0",
     "tiny-warning": "^1.0.3"
   },

test/integration/fixtures/README.md

@@ -2,3 +2,4 @@
 
 - `build-options` lets us check that TSDX's flags work as expected
 - `build-withConfig` lets us check that `tsdx.config.js` works as expected
+- `build-withBabel` lets us check that `.babelrc` works as expected

test/integration/fixtures/build-withBabel/.babelrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    'styled-components'
+  ]
+}

test/integration/fixtures/build-withBabel/package.json

@@ -0,0 +1,7 @@
+{
+  "scripts": {
+    "build": "tsdx build"
+  },
+  "name": "build-withbabel",
+  "license": "MIT"
+}

test/integration/fixtures/build-withBabel/src/index.ts

@@ -0,0 +1,8 @@
+export { Title } from './styled';
+
+export const sum = (a: number, b: number) => {
+  if ('development' === process.env.NODE_ENV) {
+    console.log('fuck');
+  }
+  return a + b;
+};

test/integration/fixtures/build-withBabel/src/styled.tsx

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+export const Title = styled.h1`
+  /* this comment should be removed */
+  font-size: 1.5em;
+  text-align: center;
+  color: palevioletred;
+`;

test/integration/fixtures/build-withBabel/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "module": "ESNext",
+    "lib": ["dom", "esnext"],
+    "declaration": true,
+    "sourceMap": true,
+    "rootDir": "./src",
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictPropertyInitialization": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "baseUrl": "./",
+    "paths": {
+      "*": ["src/*", "node_modules/*"]
+    },
+    "jsx": "react",
+    "esModuleInterop": true
+  },
+  "include": ["src", "types"],
+}

test/integration/tsdx-build-withBabel.test.js

@@ -0,0 +1,57 @@
+const shell = require('shelljs');
+
+const util = require('../utils/fixture');
+const { execWithCache } = require('../utils/shell');
+
+shell.config.silent = false;
+
+const testDir = 'integration';
+const fixtureName = 'build-withBabel';
+const stageName = `stage-integration-${fixtureName}`;
+
+describe('integration :: tsdx build :: .babelrc.js', () => {
+  beforeAll(() => {
+    util.teardownStage(stageName);
+    util.setupStageWithFixture(testDir, stageName, fixtureName);
+  });
+
+  it('should convert styled-components template tags', () => {
+    let output = execWithCache('node ../dist/index.js build');
+    expect(output.code).toBe(0);
+
+    // from styled.h1` to styled.h1(
+    output = shell.grep(/styled.h1\(/, ['dist/build-withbabel.*.js']);
+    expect(output.code).toBe(0);
+  });
+
+  // TODO: make this test work by allowing customization of plugin order
+  it.skip('should remove comments in the CSS', () => {
+    let output = execWithCache('node ../dist/index.js build');
+    expect(output.code).toBe(0);
+
+    // the "should be removed" comment shouldn't be there (gets error code)
+    output = shell.grep(/should be removed/, ['dist/build-withbabel.*.js']);
+    expect(output.code).toBe(1);
+  });
+
+  it('should compile files into a dist directory', () => {
+    const output = execWithCache('node ../dist/index.js build');
+
+    expect(shell.test('-f', 'dist/index.js')).toBeTruthy();
+    expect(
+      shell.test('-f', 'dist/build-withbabel.cjs.development.js')
+    ).toBeTruthy();
+    expect(
+      shell.test('-f', 'dist/build-withbabel.cjs.production.min.js')
+    ).toBeTruthy();
+    expect(shell.test('-f', 'dist/build-withbabel.esm.js')).toBeTruthy();
+
+    expect(shell.test('-f', 'dist/index.d.ts')).toBeTruthy();
+
+    expect(output.code).toBe(0);
+  });
+
+  afterAll(() => {
+    util.teardownStage(stageName);
+  });
+});