(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

@@ -24,7 +24,7 @@
     "prepare": "tsc -p tsconfig.json",
     "build": "tsc -p tsconfig.json",
     "lint": "yarn build && yarn lint:post-build",
-    "lint:post-build": "node dist/index.js lint src test --ignore-pattern 'test/e2e/lint'",
+    "lint:post-build": "node dist/index.js lint src test --ignore-pattern 'test/e2e/fixtures/lint'",
     "test": "yarn build && yarn test:post-build",
     "test:post-build": "node dist/index.js test",
     "start": "tsc -p tsconfig.json --watch",
@@ -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/e2e/fixtures/README.md

@@ -3,3 +3,4 @@
 - `build-default` focuses on our zero config defaults
 - `build-invalid` lets us check what happens when we have invalid builds due to type errors
 - `build-withTsconfig` lets us check that `tsconfig.json` options are correctly used
+- `lint` lets us check that lint errors are correctly detected

test/e2e/lint/tsdx-lint.test.js → test/e2e/tsdx-lint.test.js

@@ -1,17 +1,12 @@
-/**
- * @jest-environment node
- */
-'use strict';
-
 const shell = require('shelljs');
-const util = require('../../util');
+const util = require('../util');
 
 shell.config.silent = true;
 
 const testDir = 'e2e';
 const stageName = 'stage-lint';
 
-const lintDir = `test/${testDir}/lint`
+const lintDir = `test/${testDir}/fixtures/lint`;
 
 describe('tsdx lint', () => {
   it('should fail to lint a ts file with errors', () => {

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,51 @@
+const shell = require('shelljs');
+
+const util = require('../util');
+
+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 = shell.exec('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', () => {
+    // the "should be removed" comment shouldn't be there (gets error code)
+    const output = shell.grep(/should be removed/, [
+      'dist/build-withbabel.*.js',
+    ]);
+    expect(output.code).toBe(1);
+  });
+
+  it('should compile files into a dist directory', () => {
+    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();
+  });
+
+  afterAll(() => {
+    util.teardownStage(stageName);
+  });
+});