astroturfcss / astroturf

Better Styling through Compiling: CSS-in-JS for those that want it all.
https://astroturfcss.github.io/astroturf/
MIT License
2.28k stars 60 forks source link

Does not work with Parcel and Typescript #588

Open timbasel opened 4 years ago

timbasel commented 4 years ago

Unfortunately I'm unable to get Astroturf working with Parcel and Typescript.

Without Typescript everything works fine. But with it i just get a ReferenceError: css is not defined execption in the browser (Parcel builds fine)

PS: Thank you all for the amazing looking library.

index.tsx

import React, { FunctionComponent } from "react";
import { render} from "react-dom";
import { css } from "astroturf";

const styles = css`
  .parcel {
    color: green;
  }
`

export const IndexPage: FunctionComponent = ({ children }) => {
  return <div className={styles.parcel}>Parcel</div>
}

render(<IndexPage />, document.getElementById("app"));

package.json

  // ...
  "postcss": {
    "modules": true,
    "plugins": [
      "postcss-nested"
    ]
  },
  "babel": {
    "plugins": [
      [ "astroturf/plugin", { "extension": ".module.scss" }]
    ]
  }
taion commented 4 years ago

@jquense perhaps we should add a parcel example here (if/when we fix the issue here)