Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality. Learn more →
Top 23 PostCSS Open-Source Projects
-
-
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
-
-
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
-
-
CSS Layout
A collection of popular layouts and patterns made with CSS. Now it has 100+ patterns and continues growing!
-
-
-
-
Aphrodite
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation
-
-
-
lost
LostGrid is a powerful grid system built in PostCSS that works with any preprocessor and even vanilla CSS.
-
vue-virtual-scroll-list
⚡️A vue component support big amount data list with high render performance and efficient.
-
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
You can use any frontend framework you want — react-based tooling, however, has a natural advantage as it models everything as a function of state, which can map 1:1 with the concept in Burr. In the demo app we use react, react-query, and tailwind, but we’ll be skipping over this largely (it is not central to the purpose of the post).
CSS-in-JS is a styling technique wherein CSS is composed using JavaScript instead of defined in external files. This method allows CSS to be scoped locally to components rather than globally, reducing the probability of style conflicts. Utilizing JavaScript also enables dynamic styling easily aligned with the component's state or props. Libraries like Styled Components and Emotion are popular choices in the React ecosystem for adopting this method.
Project mention: HTML-first, framework-agnostic implementation of shadcn/UI – franken/UI | news.ycombinator.com | 2024-04-22DaisyUI offers zero-JS components
https://daisyui.com/
I used it for a small form + search result list recently and it works well enough for simple / static stuff.
But I think I'll still be reaching for a JS lib first since I'd miss things like inputs-with-autocomplete too much.
the plugins in the official PostCSS website were old like IE6 or the marquee tag, and
Project mention: Creating Nx Workspace with Eslint, Prettier and Husky Configuration | dev.to | 2024-03-25emotion [ https://emotion.sh ]
We can select our favorite button component from the component library list of the project awesome-tailwindcss. Its html is as follows
Project mention: How we improved page load speed for Next.js ecommerce website by 1.5 times | dev.to | 2023-11-07The code duplication occurred due to disabling the default code splitting algorithm in Next.js. Previous developers used this approach to make Linaria work, which is designed to improve productivity. However, disabling code splitting led to a decrease in performance.
Another common way to extend configs in linters is using the extends key in the configuration file. Let's take StyleLint as an example:
Check out: https://github.com/uncss/uncss
I've only used it once but it did the job (NOTE: Plain HTML, plain CSS, no build pipeline. So YMMV)
As a starting point, Tailwind used to use PurgeCSS [0] but I'm not sure what they use now.
[0] https://purgecss.com
Project mention: Creating Nx Workspace with Eslint, Prettier and Husky Configuration | dev.to | 2024-03-25
Most websites those days are SPA applications that render on the front-side. There is also this trend of CSS in JavaScript also knowns as JSS that is debatable (makes everything overcomplicated), but in some specific cases, can be justified and very useful.
Project mention: Understanding Code Structure: A Beginner's Guide to Tree-sitter | dev.to | 2024-04-06You can play with your code here, and visualise ASTs for the same.
There are a number of tools available to minify CSS in development or as part of your build pipeline including, but not limited to, cssnano and Vite. If you’re using sass, it’s as straightforward as adding --style=compressed to your sass command. The results you achieve may vary depending on the complexity of your CSS, but you may see numbers similar to this (processed with sass):
Project mention: Few questions about useInfiniteQuery from tanstack/vue-query for Nuxt 2 | /r/vuejs | 2023-11-17How would it work with vue virtual scroll list The library requires a single items array from what I understand, do I have to do anything special to make it work with this library
NOTE:
The open source projects on this list are ordered by number of github stars.
The number of mentions indicates repo mentiontions in the last 12 Months or
since we started tracking (Dec 2020).
PostCSS related posts
- Why don’t we talk about minifying CSS anymore?
- Customer service pages for e-commerce built with Tailwind CSS
- Approaches to Styling React Components, Best Use Cases
- Growth Hacking Killed GitHub Stars
- Mojo CSS vs. Tailwind: Choosing the best CSS framework
- CSS Styling (Next.js)
- Open-source timepicker components for Tailwind CSS
-
A note from our sponsor - InfluxDB
www.influxdata.com | 26 Apr 2024
Index
What are some of the best open-source PostCSS projects? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | Tailwind CSS | 78,370 |
| 2 | styled-components | 40,087 |
| 3 | daisyui | 30,632 |
| 4 | PostCSS | 28,192 |
| 5 | emotion | 17,175 |
| 6 | awesome-tailwindcss | 12,705 |
| 7 | linaria | 11,182 |
| 8 | stylelint | 10,821 |
| 9 | uncss | 9,388 |
| 10 | CSS Layout | 8,005 |
| 11 | purgecss | 7,659 |
| 12 | styled-jsx | 7,610 |
| 13 | JSS | 7,052 |
| 14 | astexplorer | 5,942 |
| 15 | Aphrodite | 5,337 |
| 16 | React CSS Modules | 5,213 |
| 17 | panda | 4,681 |
| 18 | cssnano | 4,622 |
| 19 | lost | 4,507 |
| 20 | vue-virtual-scroll-list | 4,267 |
| 21 | suit | 3,799 |
| 22 | glamor | 3,658 |
| 23 | styletron | 3,321 |
Sponsored
Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com