diff --git a/examples/with-filbert/.babelrc b/examples/with-filbert/.babelrc new file mode 100644 index 0000000000..9cc7017fb9 --- /dev/null +++ b/examples/with-filbert/.babelrc @@ -0,0 +1,4 @@ +{ + "presets": ["next/babel"], + "plugins": ["macros"] + } \ No newline at end of file diff --git a/examples/with-filbert/package.json b/examples/with-filbert/package.json index b13949c015..6acc42079e 100644 --- a/examples/with-filbert/package.json +++ b/examples/with-filbert/package.json @@ -12,8 +12,9 @@ "author": "Kuldeep Keshwar", "license": "ISC", "dependencies": { - "@filbert-js/core": "^0.0.4", - "@filbert-js/server-stylesheet": "^0.0.4", + "@filbert-js/core": "latest", + "@filbert-js/macro": "latest", + "@filbert-js/server-stylesheet": "latest", "next": "latest", "react": "^16.7.0", "react-dom": "^16.7.0" diff --git a/examples/with-filbert/pages/index.js b/examples/with-filbert/pages/index.js index aeabe9d3b6..fb4f6eaea4 100644 --- a/examples/with-filbert/pages/index.js +++ b/examples/with-filbert/pages/index.js @@ -1,11 +1,8 @@ -import { Global, styled } from '@filbert-js/core' +import { Global, css, styled } from '@filbert-js/macro' import React from 'react' -const Text = styled('div')` - color: hotpink; -` -const Heading = styled('h1')` +const Heading = styled.h1` outline: none; text-decoration: none; font-weight: 300; @@ -14,7 +11,6 @@ const Heading = styled('h1')` text-shadow: 0 1px 0 rgba(0, 0, 0, 0.01); padding: 0.4125em 1.25em; color: #3793e0; - &:hover { border-bottom-color: #4682b4; border-bottom: 1px solid; @@ -24,10 +20,10 @@ const Heading = styled('h1')` text-decoration: none; } ` -const Small = styled('div')` +const Small = styled.div` color: black; ` -const Container = styled('div')` +const Container = styled.div` display: flex; flex-direction: column; justify-content: center; @@ -57,7 +53,11 @@ export default function Home() { `} /> - filbert + filbert {' '} @@ -65,7 +65,13 @@ export default function Home() { A light weight(~1KB) css-in-js solution(framework)🎨 - Next JS is awesome +
+ Nextjs is awesome +
) }