Top 23 JavaScript PostCSS Projects
-
Project mention: Vite 2.x + Vue 3.x + quasar 2.x + windcss 3.x starter ⚡ | reddit.com/r/u_Special_Paint_9099 | 2022-01-19
why not use Windi CSS or Tailwind css?
-
Emotion as CSS library
-
SonarQube
Static code analysis for 29 languages.. Your projects are multi-language. So is SonarQube analysis. Find Bugs, Vulnerabilities, Security Hotspots, and Code Smells so you can release quality code every time. Get started analyzing your projects today for free.
-
stylelint
A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
This is what I use in my projects: Prettier to format the code. Eslint (for react) and Stylelint (for styles). You can additionally use husky to run the above linters and formaters before committing the code, you can also run some tests automatically before every commit, although depending on the number of tests, this can take some time and can be a bit annoying. In GitHub/GitLab, we also have a set of actions on our pipeline to run all of these linters and tests every time we create a merge request or deploy some new code (CI/CD).
-
In the process of trying to figure out how to remove the unused code, I found out about UnCSS, a tool that removes unused CSS from your stylesheets. It can be installed by running:
-
options = Object.assign({}, optionsDefault, options); This is the commit that made me wonder.
-
Project mention: How to achieve this in Next.js Built-In CSS/SCSS Support? | reddit.com/r/reactjs | 2021-11-17
-
Project mention: Feel like that studying as a self-taught is taking me further than studying at university | reddit.com/r/webdev | 2021-10-25
I started writing a long response, but I want to add that a simple CRA + JSS + TS (named exports only) stack solves or abstracts away most of these issues.
-
Scout APM
Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.
-
Aphrodite
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation
Aphrodite
-
Project mention: Day 31 of 100 Days of Code & Scrum: Mobile Navbar and react-css-modules | dev.to | 2021-11-08
react-css-modules | Github
-
I want to make a component library in React (TypeScript). But I don't know where exactly to begin. I've used CRA (create-react-app) before but that was to build MERN fullstack apps, and not component libraries, hence the confusion. I tried to use NeutrinoJS (as mentioned in the ReactJS docs), but it didn't have official TypeScript support/the ability to write components in TypeScript (instead of JavaScript).
-
-
vue-virtual-scroll-list
⚡️A vue component support big amount data list with high render performance and efficient.
These popular components allow for quick scrolling through large amounts of data in Vue apps, but do come with a caveat; Vue-virtual-scroller and Vue-virtual-scroll-list don’t deal with dynamic heights unless you hardcode them. If you want to test it out, there is a playground available for Vue Virtual Scroller here.
-
Some technical thoughts as someone who could care less about fanboyism:
- One point where atomic CSS frameworks are supposed to shine over conventional CSS is bundle size, since they (at least the good ones) compile to only a single rule for any used value, rather than potentially repeating rules for semantically different classes.
- Another point where atomic CSS frameworks shine is just sheer volume of banging code out. When the bulk of your output is visual, mastering tools based on shorthands like tailwind, emmet, etc can feel very productive.
- Purely atomic CSS frameworks can make some workflows more difficult, e.g. by having too granular call sites and not allowing "let's see what happens to the overall theme if I do this design change" iterative style of work, or because workflows that edit CSS on the fly via browser devtools can no longer be used to limit impact within semantic lines (e.g. "I want to change padding only on buttons, without breaking everything else that happens to depend on the same padding value"). There are both design-oriented and debugging-oriented workflows that are affected in similar ways.
- You generally don't get visual regressions at a distance w/ atomic CSS. This matters at organizations where desire for pixel precision and simultaneously fickle design teams are the norm. But conversely, "can we just change the font size to be a bit bigger across the site" can often run into issues of missed spots. On a similar note, designs may become inconsistent across a site over time due to the hyper local nature of atomic CSS oriented development.
- Custom rules may as well be written in APL[0]; they usually aren't documented and it takes a "you-gotta-know-them-to-know-them" sort of familiarity to be able to work with them (or get back to them after a while).
- There are some tools that mix and match atomic CSS with other paradigms. For example, styletron[0] can output atomic CSS for the bundling benefits, but looks like React styled components from a devexp perspective, and has rendering modes that output traditional-looking debug classes for chrome devtool oriented workflows.
The main theme to be aware of: proponents rarely talk of maintenance, so beware of honeymoon effect. Detractors often omit that traditional CSS (especially at scale) also requires a lot of diligence to maintain. So think about maintenance and how AOP[1] vs hyperlocal development workflows interact with your organization's design culture.
[0] https://www.styletron.org/
[1] https://en.wikipedia.org/wiki/Aspect-oriented_programming
-
-
postcss-px-to-viewport
A plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from pixel units. The best choice to create a scalable interface on different displays by one design size.
Project mention: Introducing postcss-px-to-viewport: open-source software to create scalable interfaces on any display | reddit.com/r/Frontend | 2021-04-29 -
-
-
-
Atomizer
A tool for creating Atomic CSS, a collection of single purpose styling units for maximum reuse.
-
postcss-import
-
-
concise.css
A CSS framework that's lightweight and easy-to-use. Give up the bloat. Stop tripping over your classes. Be Concise.
ConciseCSS/concise.css - A CSS framework that's lightweight and easy-to-use. Give up the bloat. Stop tripping over your classes. Be Concise.
-
Gulp: Use gulp-postcss
JavaScript PostCSS related posts
- How long did you spend on css?
- Yet another generic startpage
- Using the new and better CSS!
- Is it okay to learn Django and Javascript together?
- 2022 Goals
- I backed into being a successful programmer, here is what happened and what I've learned over the past 25 years.
- Finishing Up On My Next.js AeroPress Coffee Helper App
Index
What are some of the best open-source PostCSS projects in JavaScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | Tailwind CSS | 52,553 |
| 2 | emotion | 14,306 |
| 3 | stylelint | 9,416 |
| 4 | uncss | 9,180 |
| 5 | Radium | 7,447 |
| 6 | styled-jsx | 6,831 |
| 7 | JSS | 6,598 |
| 8 | Aphrodite | 5,259 |
| 9 | React CSS Modules | 5,232 |
| 10 | Neutrino | 3,859 |
| 11 | glamor | 3,653 |
| 12 | vue-virtual-scroll-list | 3,257 |
| 13 | styletron | 3,226 |
| 14 | Fela | 2,129 |
| 15 | postcss-px-to-viewport | 2,036 |
| 16 | Symfony Encore | 1,985 |
| 17 | postcss-pxtorem | 1,616 |
| 18 | ReactCSS | 1,605 |
| 19 | Atomizer | 1,247 |
| 20 | postcss-import | 1,165 |
| 21 | CSSX | 1,013 |
| 22 | concise.css | 943 |
| 23 | gulp-postcss | 762 |
Are you hiring? Post a new remote job listing for free.
