1/* This comment tells babel to convert jsx to calls2to a function called jsx instead of React.createElement*/3/** @jsx jsx */4import React from 'react';5import { css, jsx } from '@filbert-js/core';67const styles = css`8 background: pink;9 border: solid 1px gray;10`;1112render(<button css={styles}>This is a Button component.</button>);
Or you can use @filbert-js/macro
1import React from 'react';2import { css } from '@filbert-js/macro';34const styles = css`5 background: pink;6 border: solid 1px gray;7`;89render(<button css={styles}>This is a Button component.</button>);
Or you can use @filbert-js/core
along with babel-plugin-filbert
1import React from 'react';2import { css } from '@filbert-js/core';34const styles = css`5 background: pink;6 border: solid 1px gray;7`;89render(<button css={styles}>This is a Button component.</button>);
Pragma annotation (/*@jsx jsx*/
) is not required when using babel-plugin-filbert
or @filbert-js/macro
Check out example