Integration with typescript

[IIIristraM]

I'm using babel to transpile ES6 made by typescript to ES5. And it looks like this plugin doesn't work at all in this case.

typescript v2.2.2
styled-components v2.0.0-15
awesome-typescript-loader v3.1.2
babel-plugin-styled-components v1.1.4

[kitten]

@IIIristraM The awesome-typescript-loader has support to trigger a babel transpilation as well. The option is called useBabel.

https://github.com/s-panferov/awesome-typescript-loader#usebabel-boolean-defaultfalse

It's not something we can do on our side, since it's a build pipeline problem ;)

[IIIristraM]

Well I found one place where plugin was applied, so at least it takes part in a build process. And I'm going to disagree with you.

This is output from the same file

var LoginButton = styles_1.styled.div(_templateObject, function (props) {
    return props.theme.mainColor;
});
function xxx(styled) {
    var XXX = styled.div.withConfig({
        displayName: "login__XXX"
    })([""]);
}

So the place with import was skipped, while the function where was string like const XXX = styled.div``; was processed. It looks like parsing issue, so I suppose it's responsibility of the plugin.

[kitten]

@IIIristraM Hm, I was thinking maybe TypeScript transpiles the above LoginButton tagged template literal and thus the babel plugin doesn't find any template literals anymore. However, the second one is indeed being transpiled.

Can you provide your .babelrc and a test file, so I can find out what's going on? ;)

[IIIristraM]

.babelrc

{
  "presets": [
    "es2015",
    "stage-0"
  ],
  "plugins": [
    "styled-components"
  ]
}

original file

import { styled } from 'styles';

const LoginButton = styled.div`
  display: block;
  width: 140px;
  height: 48px;
`;

output

var styles_1 = __webpack_require__("./app/scripts/styles/index.tsx");
var LoginButton = styles_1.styled.div(_templateObject, function (props) {
    return props.theme.mainColor;
});

styles file

import * as React from 'react';
import * as styledComponents from 'styled-components';
import { ThemedStyledComponentsModule, ThemeProps } from 'styled-components';
import { Theme } from 'types';

// -------------------------------CONFIG CUSTOM THEME----------------------------------------

const {
    default: styled,
    css,
    injectGlobal,
    keyframes,
    ThemeProvider,
} = styledComponents as ThemedStyledComponentsModule<Theme>;

export { css, injectGlobal, keyframes, ThemeProvider, ThemeProps, styled };

// ------------------------------------HELPERS-----------------------------------------------

export function styledWithProps<TProps>() {
  const Div = styled.div``; // This line will be transpliled correctly

  class Wrap extends React.PureComponent<TProps & React.HTMLProps<{}>, {}> {
    public node: HTMLElement;

    public render() {
      return <Div {...this.props} innerRef={n => this.node = n} />;
    }
  }

  return styled(Wrap);
}

output

var React = __webpack_require__("./node_modules/react/react.js");
var styledComponents = __webpack_require__("./node_modules/styled-components/dist/styled-components.es.js");
// -------------------------------CONFIG CUSTOM THEME----------------------------------------
var styled = styledComponents.default,
    css = styledComponents.css,
    injectGlobal = styledComponents.injectGlobal,
    keyframes = styledComponents.keyframes,
    ThemeProvider = styledComponents.ThemeProvider;

exports.styled = styled;
exports.css = css;
exports.injectGlobal = injectGlobal;
exports.keyframes = keyframes;
exports.ThemeProvider = ThemeProvider;
// ------------------------------------HELPERS-----------------------------------------------
function styledWithProps() {
    var Div = styled.div.withConfig({
        displayName: "styles__Div"
    })([""]);

    var Wrap = function (_React$PureComponent) {
        _inherits(Wrap, _React$PureComponent);

        function Wrap() {
            _classCallCheck(this, Wrap);

            return _possibleConstructorReturn(this, (Wrap.__proto__ || Object.getPrototypeOf(Wrap)).apply(this, arguments));
        }

        _createClass(Wrap, [{
            key: "render",
            value: function render() {
                var _this2 = this;

                return React.createElement(Div, Object.assign({}, this.props, { innerRef: function innerRef(n) {
                        return _this2.node = n;
                    } }));
            }
        }]);

        return Wrap;
    }(React.PureComponent);

    return styled(Wrap);
}
exports.styledWithProps = styledWithProps;

so the only place that had been convered correctly was

export function styledWithProps<TProps>() {
  const Div = styled.div``; // This line will be transpliled correctly
...

[vdanchenkov]

@IIIristraM could you try to change original file to

import * as styles from 'styles';

const styled = styles.styled

const LoginButton = styled.div`
  display: block;
  width: 140px;
  height: 48px;
`;

And make sure you do not import 'styled-components' directly in this file.

If it works, we will know the source of the problem.

[IIIristraM]

Yes, it works

[vdanchenkov]

So the problem is that styled.div was converted to styles_1.styled before it got passed to the plugin. Probably it is done by the typescript, I'm not sure.

As a result, plugin failed to identify styles_1.styled as a styled component helper. We probably need to make the logic more vague, but not too much.

I think that some.name.styled.div should not be considered a styled component. While somename.styled.div could be.

@IIIristraM If you want to look into it, it's in the https://github.com/styled-components/babel-plugin-styled-components/blob/master/src/utils/detectors.js#L16

Currently it correctly identifies following expressions:

styled.div``
styled.div.something``
styled(OtherComponent).something``

[kitten]

@vdanchenkov I think we can solve that with the webpack plugin — once I actually get to writing it — since we want to run our transformations before typescript etc

[raphaelsaunier]

I came to the same conclusions as @vdanchenkov after running into issues when using it with a next.js application.

Since, in this case, the recommendation is to first compile the TypeScript sources before letting Babel apply its transformations, it might be worth tweaking the detector after all?