kuldeepkeshwar / filbert-js

A lightweight(~1kb) css-in-js framework

Filbert
A light weight (~1KB) css-in-js solution (framework) 🎨


Getting started

It is an alternative to styled-components(~12.51kB) or emotion(~11.3kB) with similar API surface.

Features

Name	Status
CSS	✅
Nested Selectors	✅
Dynamic Styling(Prop based)	✅
Override Component Style	✅
Global	✅
Pseudo Selector	✅
Media Queries	✅
Keyframe	✅
Theming	✅
Component Selector	✅
Styles As Object Literals	🔜
Server-side Rendering	✅
Client-side Hydration	✅
Vendor Prefixing	✅
Extract CSS File	✅
React Native	🔜
Integration(Create React App)	✅
Integration(Preact)	✅
Integration(Gatsby)	✅
Integration(Next.js)	✅

Benchmarks

• Server side rendering

  

• Mount deep/wide tree

  

• Update dynamic styles

  

  
  

🤝 How to Contribute

Whether you're helping us fix bugs, improve the docs, or spread the word, we'd love to have you as part of the community! 💪💜

Check out our Contributing Guide

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Vijay Singh 🖋

anotherjsguy 💻

Vivek T A 💻

Dane David 💻

Vignesh Elangovan 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

Backers

Thank you to all our backers! 🙏

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website.

Acknowledgements

Without styled-components/emotion, filbert wouldn't exist. Thanks to all the wonderful people who have contributed towards these projects 🙏

filbert-js's Issues

Add Typescript support

') };

filbert-js/website/src/components/Sidebar.jsx

Lines 55 to 58 in bbe671e

	return { title, items: items.filter((title) => title !== 'Todo') };
	});
	return (

---

This issue was generated by todo based on a Todo comment in bbe671e. It's been assigned to @kuldeepkeshwar because they committed the code.

') {

filbert-js/website/src/components/Sidebar.jsx

Lines 39 to 44 in 3611aa9

	if (item.name !== 'Todo') {
	if (agg[item.group]) {
	agg[item.group].push(item);
	} else {
	agg[item.group] = [item];
	}

---

This issue was generated by todo based on a Todo comment in 3611aa9 when #48 was merged. cc @kuldeepkeshwar.

Add dark/light mode to website

not working as of now, need to fix

filbert-js/website/gatsby-config.js

Lines 71 to 76 in 097da1b

	// { // TODO: not working as of now, need to fix
	// resolve: require.resolve('gatsby-plugin-filbert'),
	// options: {
	// // Add any options here
	// },
	// },

---

This issue was generated by todo based on a TODO comment in 097da1b when #9 was merged. cc @kuldeepkeshwar.

') };

filbert-js/website/src/components/Sidebar.jsx

Lines 55 to 60 in ff16a21

	return { title, items: items.filter((title) => title !== 'TODO') };
	});
	return (
	<Stack direction="vertical" gap="2rem">
	{links.map((link) => {

---

This issue was generated by todo based on a TODO comment in ff16a21. It's been assigned to @kuldeepkeshwar because they committed the code.

[doc] fix npm redirect link

currently, the npm redirect link is taking to an npm page that does not associate with this repository

Todo list 📝

If you want to start fresh, we have a todo list

add support for @import,@font-face

filbert-js/packages/css-parser/index.js

Lines 27 to 32 in f4fc6e9

	// TODO: add support for @import,@font-face
	if (isMediaQuery.test(child.raw_selector)) {
	// handle media query
	const block = nodeToStyleBlock({ node: child, selector, scope });
	return `${child.raw_selector}${OPEN_BRACKET}${block}${CLOSE_BRACKET}`;
	}

---

This issue was generated by todo based on a TODO comment in f4fc6e9. It's been assigned to @kuldeepkeshwar because they committed the code.

') };

filbert-js/website/src/components/Sidebar.jsx

Lines 55 to 58 in 31004ca

	return { title, items: items.filter((t) => t !== 'Todo') };
	});
	return (

---

This issue was generated by todo based on a Todo comment in 31004ca when #38 was merged. cc @kuldeepkeshwar.

Non-react support?

Quick question if the library could support/work with non React but but other jsx libraries that use the DOM instead of Virtual DOM implementation.

Support object syntax for styling

Right now filbert-js is only supporting tag template based styles.
As other libraries out there are supporting object based styled, object based styles has gain alot of popularity among the developer.

add support for @import,@font-face

filbert-js/packages/css-parser/index.js

Lines 27 to 32 in 4e65624

	// TODO: add support for @import,@font-face
	if (isMediaQuery.test(child.raw_selector)) {
	// handle media query
	const block = nodeToStyleBlock({ node: child, selector, scope });
	return `${child.raw_selector}${OPEN_BRACKET}${block}${CLOSE_BRACKET}`;
	}

---

This issue was generated by todo based on a TODO comment in 4e65624 when #6 was merged. cc @kuldeepkeshwar.

Write Tests

To release filbert-js without breaking existing stuff, We encourage writing more test(at-least cover the top level API).

Note: currently we are not doing a very good job on writing test(blame is on me).

Below are the packages where you can start.

• @filbert-js/core
• @filbert-js/theming
• @filbert-js/server-stylesheet
• @filbert-js/browser-stylesheet
• @filbert-js/autoprefixer
• @filbert-js/css-ast
• @filbert-js/style-sheet-context
• @filbert-js/css-parser
• @filbert-js/stylesheet
• @filbert-js/types
• @filbert-js/macro
• babel-plugin-filbert
• gatsby-plugin-filbert

).

filbert-js/CONTRIBUTING.md

Lines 3 to 8 in 54f5a15

	If you want to start fresh, We have a [todo list](https://filbert-js.vercel.app/docs/todo).
	## Issues
	Issues are very valuable to this project.

---

This issue was generated by todo based on a todo comment in 54f5a15. It's been assigned to @kuldeepkeshwar because they committed the code.

Add more description in documentation

Currently most examples(feature shown in website) are just in form of code + output.

We can be more verbose to that user can understand the intent behind the example.

') };

filbert-js/website/src/components/Sidebar.jsx

Lines 55 to 58 in 9965e28

	return { title, items: items.filter((t) => t !== 'Todo') };
	});
	return (

---

This issue was generated by todo based on a Todo comment in 9965e28. It's been assigned to @kuldeepkeshwar because they committed the code.

') {

filbert-js/website/src/components/Sidebar.jsx

Lines 39 to 44 in 002e3f5

	if (item.name !== 'Todo') {
	if (agg[item.group]) {
	agg[item.group].push(item);
	} else {
	agg[item.group] = [item];
	}

---

This issue was generated by todo based on a Todo comment in 002e3f5. It's been assigned to @kuldeepkeshwar because they committed the code.

add: themes for website

Add theme for docs website like - light, dark, read mode, etc...

Improve docs for usage of & with filbert.

Currently, we don't have proper docs for the usage of &(selector) with filbert. There are chances people get confused with &(selector) as a parent selector and not as how it is used in filbert.

Make Global styles theme aware

Right now, Global component doesn't support the theme prop.
i.e

<Global styles={`
 color: {({theme)=>theme.colors.brand}
`}/>

doesn't work.

Expectation:

Make Global component theme aware like styled.

Background Image appending a semi colon?

Hi there, so me again, apparently when importing an image in react and using the base64 iamge as background, at the end there is a : being added that breaks the image.

https://cad-overlay.netlify.app/

Here's the app, right under the div root, you should have a div with the background image that is not being set properly, if you want to check out my repo:

https://github.com/jenaro94/cad-overlay

If you inspect the css and remove that : the background image will show correctly.

') };

filbert-js/website/src/components/Sidebar.jsx

Lines 55 to 60 in 097da1b

	return { title, items: items.filter((title) => title !== 'TODO') };
	});
	return (
	<Stack direction="vertical" gap="2rem">
	{links.map((link) => {

---

This issue was generated by todo based on a TODO comment in 097da1b when #9 was merged. cc @kuldeepkeshwar.

') };

filbert-js/website/src/components/Sidebar.jsx

Lines 55 to 58 in 3177330

	return { title, items: items.filter((title) => title !== 'Todo') };
	});
	return (

---

This issue was generated by todo based on a Todo comment in 3177330 when #25 was merged. cc @kuldeepkeshwar.

Explain trade-offs

Considering that a lot of developers might already know styled-components, I think that it would be great to explain how Filbert is different. For instance, the readme could details the different tradeoff taken to shrink the bundle size.