Add transpilation of the css prop for simple cases (#78)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Luca Schneider <luca.schneider@digitecgalaxus.ch>
Co-authored-by: Jan Nicklas <j.nicklas@me.com>

packages/docs/docs/pages/features.md

@@ -1,6 +1,17 @@
 # Features
 next-yak is a featured packed static CSS-in-JS framework with a minimal runtime aspect.
 
+## Table of contents
+1. [Static CSS](#static-css)
+2. [Dynamic styles](#dynamic-styles)
+3. [Compatible with utility-first CSS frameworks (e.g. Tailwind)](#compatible-with-utility-first-css-frameworks-eg-tailwind)
+4. [Animations](#animations)
+5. [Mixins](#mixins)
+6. [Automatic CSS variables](#automatic-css-variables)
+7. [Theming](#theming)
+8. [CSS Prop](#css-prop)
+
+
 ## Static CSS
 
 At the heart of next-yak lies the extraction of static CSS. 
@@ -497,3 +508,45 @@ const Button = styled.button`
         `}
 `;
 ```
+
+:::
+
+## CSS Prop
+
+We support out of the box the `css` prop which is a shorthand for adding styles to an element. Similiar to inline-styles
+it allows you to write local styles for certain elements on your page. Differently than inline-styles, it allows you to use
+selectors that target wrapped elements.
+
+```jsx
+import { css } from 'next-yak';
+
+const Component = () => {
+  return <div css={{ color: 'red' }}>Hello there!</div>
+}
+```
+
+It's meant for simple styling requirements, where you don't have to think about a name for a specialized component. 
+
+### TypeScript
+
+To use it with the correct types just add the following line to the top of the file
+
+```tsx
+/** @jsxImportSource next-yak */ // [!code focus] // [!code hl]
+
+import { css } from 'next-yak';
+
+const Component = () => {
+  return <div css={{ color: 'red' }}>Hello there!</div>
+}
+```
+
+Or just add this to your `tsconfig.json` and all your css props will have the correct types.
+
+```json
+{
+  "compilerOptions": {
+    "jsxImportSource": "next-yak"
+  }
+}
+```

packages/docs/docs/pages/migration-from-styled-components.md

@@ -88,11 +88,57 @@ const Button = styled.button<{ $primary: boolean }>`
 `;
 ```
 
-:::
+::: 
 
 Next-yak transforms `css` code into a class name that is referenced. So you can think of it as
 an additional css class that gets added/subtracted as needed.
 
+#### css prop
+
+Also the css prop works similar to styled-components. The main difference is that you can't use
+dynamic values in the css prop and that you have to use the `css` tag to define the css.
+
+:::code-group
+
+```jsx [styled-components]
+<div
+  css={`
+    background: papayawhip;
+    color: ${props => props.theme.colors.text};
+  `}
+/>
+<Button
+  css="padding: 0.5em 1em;"
+/>
+```
+
+```tsx [next-yak]
+import { css } from 'next-yak';
+
+<div
+  css={css`
+    background: papayawhip;
+    color: 'red';
+  `}
+/>
+<Button
+  css={css`padding: 0.5em 1em;`}
+/>
+```
+
+:::
+
+If you use TypeScript, you can just add the following to your `tsconfig.json` to get type checking for the css prop.
+
+```json
+{
+	"compilerOptions": {
+      "jsxImportSource": "next-yak"
+	}
+}
+```
+
+
 ### keyframes
 
 The api for keyframes is exactly the same as in styled-components. You can define your keyframes

packages/example/app/page.tsx

@@ -1,3 +1,5 @@
+/** @jsxImportSource next-yak */
+
 import { YakThemeProvider, css, styled } from "next-yak";
 import styles from "./page.module.css";
 import { queries, colors } from "@/theme/constants.yak";
@@ -127,6 +129,13 @@ export default function Home() {
         <StyledLink href="https://github.com/jantimon/next-yak/tree/main/packages/example/app">
           view code
         </StyledLink>
+        <p
+          css={css`
+            color: green;
+          `}
+        >
+          CSS Prop works if this is green
+        </p>
         <Inputs />
       </main>
     </YakThemeProvider>