JavaScript PostCSS

Open-source JavaScript projects categorized as PostCSS | Edit details

Top 23 JavaScript PostCSS Projects

  • GitHub repo Tailwind CSS

    A utility-first CSS framework for rapid UI development.

    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?

  • GitHub repo emotion

    👩‍🎤 CSS-in-JS library designed for high performance style composition

    Project mention: Yet another generic startpage | reddit.com/r/startpages | 2022-01-16

    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.

  • GitHub repo stylelint

    A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.

    Project mention: What does "senior" mean as a React developer? | reddit.com/r/reactjs | 2022-01-08

    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).

  • GitHub repo uncss

    Remove unused styles from CSS

    Project mention: Lessons learned from building landing pages | dev.to | 2021-06-08

    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:

  • GitHub repo Radium

    A toolchain for React component styling.

    Project mention: Object spread vs. Object.assign | reddit.com/r/codehunter | 2021-12-29

    options = Object.assign({}, optionsDefault, options); This is the commit that made me wonder.

  • GitHub repo styled-jsx

    Full CSS support for JSX without compromises

    Project mention: How to achieve this in Next.js Built-In CSS/SCSS Support? | reddit.com/r/reactjs | 2021-11-17
  • GitHub repo JSS

    JSS is an authoring tool for CSS which uses JavaScript as a host language.

    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.

  • GitHub repo Aphrodite

    Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

    Project mention: The React roadmap for beginners you never knew you needed. | dev.to | 2021-11-23

    Aphrodite

  • GitHub repo React CSS Modules

    Seamless mapping of class names to CSS modules inside of React components.

    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

  • GitHub repo Neutrino

    Create and build modern JavaScript projects with zero initial configuration.

    Project mention: How do I make a React component library? | reddit.com/r/reactjs | 2021-07-12

    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).

  • GitHub repo glamor

    inline css for react et al

  • GitHub repo vue-virtual-scroll-list

    ⚡️A vue component support big amount data list with high render performance and efficient.

    Project mention: Rendering large datasets in Vue.js | dev.to | 2021-09-10

    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.

  • GitHub repo styletron

    :zap: Toolkit for component-oriented styling

    Project mention: Tailwind CSS v3 | news.ycombinator.com | 2021-12-09

    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

  • GitHub repo Fela

    State-Driven Styling in JavaScript

  • GitHub repo 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
  • GitHub repo Symfony Encore

    A simple but powerful API for processing & compiling assets built around Webpack

  • GitHub repo postcss-pxtorem

    Convert pixel units to rem (root em) units using PostCSS

    Project mention: Why is tailwind so popular? | reddit.com/r/webdev | 2021-08-15
  • GitHub repo ReactCSS

    :lipstick: Inline Styles in JS

  • GitHub repo Atomizer

    A tool for creating Atomic CSS, a collection of single purpose styling units for maximum reuse.

    Project mention: How long did you spend on css? | reddit.com/r/Frontend | 2022-01-18
  • GitHub repo postcss-import

    PostCSS plugin to inline @import rules content

    Project mention: Styling Remix using Tailwind and PostCSS | dev.to | 2021-12-03

    postcss-import

  • GitHub repo CSSX

    CSS in JavaScript

  • GitHub repo concise.css

    A CSS framework that's lightweight and easy-to-use. Give up the bloat. Stop tripping over your classes. Be Concise.

    Project mention: CSS Deep | dev.to | 2021-02-26

    ConciseCSS/concise.css - A CSS framework that's lightweight and easy-to-use. Give up the bloat. Stop tripping over your classes. Be Concise.

  • GitHub repo gulp-postcss

    Pipe CSS through PostCSS processors with a single parse

    Project mention: Write modern CSS with PostCSS | dev.to | 2021-11-16

    Gulp: Use gulp-postcss

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). The latest post mention was on 2022-01-19.

JavaScript PostCSS related posts

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
Find remote jobs at our new job board 99remotejobs.com. There are 29 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.
OPS - Build and Run Open Source Unikernels
Quickly and easily build and deploy open source unikernels in tens of seconds. Deploy in any language to any cloud.
github.com/nanovms