Template literal not accepted about babel-plugin-styled-components-css-namespace HOT 2 OPEN

Hi, here an example of code

export const AnchorWrapper = styled.div<{ selected: boolean }> box-sizing: border-box; width: fit-content;

${({ selected, theme: { colors, mediaQueries } }) => mediaQueries?.isMobile ? cssdisplay: flex; flex-direction: row; align-items: center; padding: ${pxToRem(8)} 0 ${pxToRem(8)} ${pxToRem(16)}; border-left: ${pxToRem(3)} solid ${selected ? colors.lightAccentDefault : colors.neutral300}; : cssheight: ${pxToRem(56)}; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: ${pxToRem(21)} 0 ${pxToRem(14)}; gap: ${pxToRem(4)};} ;

and this is the error on returned

`ERROR in ../ui/build/src/atoms/Anchor/styles.js Module build failed (from ../../node_modules/babel-loader/lib/index.js): Error: prj/ui.frontend/packages/ui/build/src/atoms/Anchor/styles.js: There was a problem adding namespaces to this CSS in the file prj/ui.frontend/packages/ui/build/src/atoms/Anchor/styles.js. Error: :6:3: Unknown word CSS: box-sizing: border-box; width: fit-content;

fake-element-placeholder-0 `

any known solution?

+1

from babel-plugin-styled-components-css-namespace.

could be an incorrect syntax error on your css
might want to check that

looks like your style component is missing braces:
Here's how you should wrap your CSS block inside the styled-component template literal:

export const AnchorWrapper = styled.div<{ selected: boolean }>`
  /* CSS styles go here */
`;

Check for any syntax errors within the CSS block, such as missing semicolons (;), curly braces ({ }), or incorrect CSS property names.

from babel-plugin-styled-components-css-namespace.