2

Can I use polymode for styled components inside tsx or jsx files? For example:

// MyComponent.tsx

const x = 1;
const y = 2;

const myStyle = css`
  background-color: red;
  padding: ${x + y};
  margin-left: ${y}
`;

I want the stuff inside the css block to be in css-mode, except for the interpolated bits, which I want to be in the host mode (ie typescript-mode).

I can get the css bit working sort of like this:

(define-hostmode poly-css-in-ts-hostmode :mode 'typescript-mode)

(define-innermode poly-css-in-ts-innermode
  :mode 'css-mode
  :head-matcher "css`"
  :tail-matcher "`"
  :head-mode 'host
  :tail-mode 'host
  :init-functions)

(define-polymode poly-css-in-ts-mode
  :hostmode 'poly-css-in-ts-hostmode
  :innermodes '(poly-css-in-ts-innermode))

But I'm not sure how to get the nested ${/* ts or js code */} blocks working.

Drew
  • 75,699
  • 9
  • 109
  • 225

0 Answers0