CSS

1/* This comment tells babel to convert jsx to calls
2to a function called jsx instead of React.createElement*/
3/** @jsx jsx */
4import React from 'react';
5import { css, jsx } from '@filbert-js/core';
6
7const styles = css`
8 background: pink;
9 border: solid 1px gray;
10`;
11
12render(<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';
3
4const styles = css`
5 background: pink;
6 border: solid 1px gray;
7`;
8
9render(<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';
3
4const styles = css`
5 background: pink;
6 border: solid 1px gray;
7`;
8
9render(<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

Edit kuldeepkeshwar/filbert-js-examples-with-cra