我已经将styled-jsx添加到我的Preact（使用此TS template设置）项目中，并且可以通过<style>标记对内容进行内联样式设置，没有任何问题，例如：

<div>
      <h1>Hello{name && `, ${name}`}!</h1>
      <form onSubmit={handleNameSubmit}>
        <input type="text" value={input} onInput={handleInput} />
        <button type="submit" className="test">
          Update {input && `as ${input}`}
        </button>
      </form>
      <style jsx>
        {`
          h1 {
            color: red;
          }

          .test {
            color: blue;
          }
        `}
      </style>
    </div>

但是如果我按照他们的指示将该样式提取到一个单独的css变量中（在同一个文件中或外部），我会得到以下错误：

if you are getting this error it means that your `css` tagged template literals were not transpiled.

在SO和Github上有一些答案/解决方案，但它们都涉及到更改webpack配置--而我没有webpack配置。看起来preact-cli没有现成的webpack配置。我已经按照建议将babel规则添加到我的babelrc中：

{
  "presets": ["preact-cli/babel"],
  "plugins": [["styled-jsx/babel", { "optimizeForSpeed": true }]]
}

但是，我没有安装任何额外的macros或babel插件，因为styled-jsx自述文件中的原始说明中没有这一点。