Parcel CSS: A new CSS parser, compiler, and minifier

This page summarizes the projects mentioned and recommended in the original post on news.ycombinator.com

Our great sponsors
  • Scout APM - Less time debugging, more time building
  • SonarLint - Deliver Cleaner and Safer Code - Right in Your IDE of Choice!
  • SaaSHub - Software Alternatives and Reviews
  • rust-cssparser

    Rust implementation of CSS Syntax Level 3

    > Parcel CSS is based on the cssparser[0] Rust crate, a browser-grade CSS tokenizer created by Mozilla and used in Firefox. This provides a solid foundation, including tokenization and basic parsing. However, it does not interpret any CSS properties or at rules. That's where Parcel CSS comes in. It handles parsing each individual rule and property value, as well as minification, compilation, and printing back to CSS.

    https://github.com/servo/rust-cssparser

  • hound

    Lightning fast code searching made easy

    Nice too that it's a compiled language, so you get the end tool in a nice static binary. As a non-Node dev, I hate the experience of hacking on some project and having to install a giant pool of NPM stuff just run some minifier or linter. Hound is an example of this— the guts of the project are golang, but it has a frontend that uses webpack, jest, etc: https://github.com/hound-search/hound

    Which is fine, I guess; definitely use the right tool for the job. And maybe Node developers hate finding my Python projects and needing to set up a virtualenv to run them in. But all the same, I approve a direction where more of this kind of tooling is available without a build-time Node dependency.

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

  • swc

    Rust-based platform for the Web

    This is amazing! Seen a lot of work around Rust and JS / JSX / TS / TSX (notably SWC[0] is moving to be a Rust based version of Babel)

    Nice to see some cool CSS tooling!

    I hope we get a plugin interface around this too. I know the SWC[0] project has had some struggles with this as their current JS API relies on serializing the AST back and forth. I wonder if this forgoes a JS API entirely or if that is something planned for say 1.5?

    [0]: https://swc.rs/

  • parcel-css

    A CSS parser, transformer, and minifier written in Rust.

    Hi, author of Parcel CSS here.

    I have been thinking about implementing the CSS OM spec as the JS API. This is the same API that browsers expose for manipulating stylesheets. The advantage of this is that we don't need to invent something custom. Still thinking through options. https://github.com/parcel-bundler/parcel-css/issues/5

    That said, I think I'd want to keep the use cases for JS plugins limited, because it will affect performance significantly. So, if it's something that exists in an official CSS spec somewhere (even if draft), or a really common transformation, it should be implemented in Rust. An example of this is the support for the CSS nesting spec. Ideally, we'd try to keep the amount of custom syntax being invented around CSS to a minimum and stick to standard CSS syntax wherever possible though.

  • tree-starter

    Typescript React ExpressJS ESBuild starter

    I have been using esbuild for a while, and I can say that it's looking like a huge improvement over webpack, snowpack, vite, etc.

    I made a web app starter that uses esbuild to bundle a react-redux app [0] and my experience was very positive of the bundler.

    [0] https://github.com/samhuk/tree-starter

  • icss

    Interoperable CSS — a standard for loadable, linkable CSS

  • css-modules

    Documentation about css-modules

  • SonarLint

    Deliver Cleaner and Safer Code - Right in Your IDE of Choice!. SonarLint is a free and open source IDE extension that identifies and catches bugs and vulnerabilities as you code, directly in the IDE. Install from your favorite IDE marketplace today.

  • purifycss

    Remove unused CSS. Also works with single-page apps.

    > Isn't there a process of reducing it to only what one needs?

    Yes there is: https://github.com/purifycss/purifycss

  • MSEdgeExplainers

    Home for explainer documents originated by the Microsoft Edge team

    For a spec about a browser feature, "getting it" can mean a few different things.

    1. Understanding the purpose of the feature ("why/when would I use this?")

    2. Understanding how to implement the feature

    3. Understanding how to use the feature

    4. Understanding the feature's "corner cases" (surprising implications, cases where it doesn't do what you'd expect, etc.)

    5. Understanding why the feature works the way it does (instead of some other way)

    Most of the web specs really only explain how to implement a feature, and even then, they're not great at that, because they do such a poor job at explaining the purpose of the feature.

    Assuming that you, like most of us, aren't working on implementing a browser, that means that web specs are mostly unhelpful to you. It's almost completely beyond the purpose of a spec to teach you how to use a feature, what its corner cases would be (which are often unknown at the time a spec was written), and why the specification says what it says.

    This is an area where the web spec community has made some improvements in recent years. Nowadays, it's understood that new proposed specifications shouldn't just provide a specification, but also a separate "explainer" document, whose purpose is to communicate #1 (the purpose of the feature), and also persuade the other browser vendors to implement the feature. ("This will be really cool, and here's why…")

    At a minimum, specs nowadays often include a non-normative "Motivation" section, as the CSS Nesting spec does. https://www.w3.org/TR/css-nesting-1/ I you'll find that you can "get" that spec much better than you can the CSS OM spec https://www.w3.org/TR/cssom-1/ which is old enough to buy alcohol and doesn't include a "Motivation" section.

    You can often find explainer docs linked off of https://chromestatus.com/ e.g. https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/... I think you'll find that explainers are 10000% better for learning features than specs are. (They typically even discuss #3, #4, and #5, as they typically discuss alternative rejected approaches.)

  • dropcss

    An exceptionally fast, thorough and tiny unused-CSS cleaner

  • parcel

    The zero configuration build tool for the web. 📦🚀

    Just a stab in the dark, but I was having HMR issues as well and it turned out to be an obscure transitive dependency conflict - details and solutions here on the outside chance it's the same thing affecting your project https://github.com/parcel-bundler/parcel/issues/6685

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts