identifier expected ts-styled-plugin(9999)

[roy-eth-dev]

How to reproduce:

const css = css`
  .${'loader'}:hover{
/* identifier expected error */
    color: red;
  }

It seems like the plugin doesn't count the interpolation string after dot as identifier. When I remove the dot, it doesn't show error.

[osdiab]

Yeah, I think this plugin doesn't handle interpolations very well altogether

I was writing this code to ensure I use CSS variables correctly, but it throws a 9999 error saying } expected:

/**
 * All CSS variables used for color styling
 *
 * Use these when referring to CSS variables in your code
 */
export const cssVariables = {
  text: {
    body: "--textColor",
    secondary: "--textSecondaryColor",
    bodyAccent: "--textBodyAccentColor",
    headingAccent: "--textHeadingAccentColor"
  },
  background: "--backgroundColor"
};

/**
 * Generates the CSS variable values based on the palette provided
 */
function makeTheme({ theme }: { theme: PaletteTheme }): SerializedStyles {
  const palette =
    theme === PaletteTheme.DARK ? PALETTE.darkTheme : PALETTE.lightTheme;
  return css`
    ${cssVariables.text.body}: ${palette.text.body};
    ${cssVariables.text.secondary}: ${palette.text.secondary};
    ${cssVariables.text.bodyAccent}: ${palette.text.bodyAccent};
    ${cssVariables.text.headingAccent}: ${palette.text.headingAccent};
    ${cssVariables.background}: ${palette.background};
  `;
}

[paul-vd]

I have the same problem, I use it for my global css identifiers eg:

const prefixSelect = `${globalPrefix}-select`

const selectStyles = css`
  .${prefixSelect}{
      &-disabled{
         color:${cssvars.disabledColor};
      }
  }
`

[paul-vd]

One solution i found to this problem is wrapping the full classes in template literals, eg:

const prefix = `.${globalPrefix}-menu`

const darkMenu = css`
  ${`&${prefix}`} {
    background: ${cssvars.componentBackground};
  }
  ${`${prefix}-inline${prefix}-sub, &${prefix}-sub`} {
    background: transparent;
  }
`

@osdiab The equivalent to yours would be as follow:

/**
 * All CSS variables used for color styling
 *
 * Use these when referring to CSS variables in your code
 */
export const cssVariables = {
  text: {
    body: "--textColor",
    secondary: "--textSecondaryColor",
    bodyAccent: "--textBodyAccentColor",
    headingAccent: "--textHeadingAccentColor"
  },
  background: "--backgroundColor"
};

/**
 * Generates the CSS variable values based on the palette provided
 */
function makeTheme({ theme }: { theme: PaletteTheme }): SerializedStyles {
  const palette =
    theme === PaletteTheme.DARK ? PALETTE.darkTheme : PALETTE.lightTheme;
  return css`
    ${`${cssVariables.text.body}: ${palette.text.body};`}
    ${`${cssVariables.text.secondary}: ${palette.text.secondary};`}
    ${`${cssVariables.text.bodyAccent}: ${palette.text.bodyAccent};`}
    ${`${cssVariables.text.headingAccent}: ${palette.text.headingAccent};`}
    ${`${cssVariables.background}: ${palette.background};`}
  `;
}

and OP

const css = css`
 ${' .loader:hover'}{
    color: red;
  }

but this is just a bypass and not an actual solution to the original problem.

[andrewowen]

@PaulPCIO I'm working on a gatsby course and wrapping the class name in a template literal saved my life with that error

[mjbvz]

Closing as this package has been deprecated in favor of the official styled-components/typescript-styled-plugin fork

After updating to that fork, follow up in the styled-components repo if this is still an issue