Can't use styled components as selectors

[tpict]

I'm having an issue where my compiled JS throws an error if I attempt to use components as selectors: Component selectors can only be used in conjunction with babel-plugin-emotion. My ts-loader configuration looks like this:

      {
        test: /\.tsx?/,
        use: [
          {
            loader: "ts-loader",
            options: {
              transpileOnly: true,
              getCustomTransformers: () => ({
                before: [
                  createEmotionPlugin({
                    sourcemap: true,
                    autoLabel: true,
                    labelFormat: "[local]",
                    autoInject: true,
                  }),
                ],
              }),
              compilerOptions: {
                jsxFactory: "jsx",
              },

              onlyCompileBundledFiles: true,
            },
          },
        ],
      },

I can use the css prop without including the jsx pragma, so it seems like the code transform is occurring, but Emotion itself doesn't seem satisfied. I'm using versions:

    "@emotion/core": "^10.0.22",
    "@emotion/styled": "^10.0.23",

Any ideas what I'm doing incorrectly?

[tpict]

Okay, turns out it's an issue with binding an interface for your theme to styled as documented. If I replace my calls to styled with the default export from @emotion/styled, it works, but the typechecker gets very upset with me. Is it possible to have a configuration option to drop in a custom path for styled?

For now, I've resolved the issue on my end by updating my tsconfig.json:

    "paths": {
      "@emotion/styled": ["theme/styled"]
    }

and then in theme/styled:

import baseStyled, { CreateStyled } from "../../node_modules/@emotion/styled";
import { Theme } from "./types";

const styled: CreateStyled<Theme> = baseStyled;
export default styled;

and then use import styled from "@emotion/styled" wherever it's required. I'm not wild about this solution but I thought I'd leave it here in case anybody else really, really wants to have component selectors, but can't use Babel for whatever reason–thanks so much for building this plugin, I was really beginning to miss them 😄

[Brooooooklyn]

@runjuu have you met the same problem?

[runjuu]

@Brooooooklyn Seems like a bug of emotion-ts-plugin.

styled('button') can transform to styled('button', { target: 'className' }), but styled.button not.

[tpict]

I noticed that too, but I think that’s a separate problem. In the issue I described above, you get an error thrown about requiring the babel plugin that stops rendering altogether; with the fix, using styled.button doesn’t throw an error, but does result in NO_COMPONENT_SELECTOR being injected if you try to target it.

[runjuu]

@tpict After #37 (comment) , you get NO_COMPONENT_SELECTOR as your selector right?

with the fix, using styled.button doesn’t throw an error, but does result in NO_COMPONENT_SELECTOR being injected if you try to target it.

The reason you didn't get an error after #37 (comment), is because emotion thinks that you are in production environment. Check this out 👉 https://github.com/emotion-js/emotion/blob/ca95f385f7ce3da6d53de1a652b3b219f11434c4/packages/serialize/src/index.js#L133

[Brooooooklyn]

try v0.5.0

[tpict]

@runjuu I'm still not certain about the behaviour I was seeing before as I was definitely using a dev build. I've tried to reproduce it today but haven't been able to, I guess it was a unique webpack misconfiguration.

@Brooooooklyn thanks so much for the quick turnaround on these tweaks, this is going to be really helpful for me :)

[Alex-Bond]

@Brooooooklyn maybe I'm stupid but I'm getting the same error on 0.5.3.
Any additional guidance?