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

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.
www.influxdata.com
featured
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com
featured
  • 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.

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

    InfluxDB logo
  • 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/

  • lightningcss

    An extremely fast CSS parser, transformer, bundler, 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.

  • web-app-template

    Typescript React ExpressJS esbuild web app template

  • 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 (by css-modules)

  • css-modules

    Documentation about css-modules

  • SaaSHub

    SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

    SaaSHub logo
  • 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

  • ParcelCSS – A CSS parser, transformer, and minifier written in Rust

    1 project | /r/CKsTechNews | 18 Jan 2022
  • ParcelCSS – A CSS parser, transformer, and minifier written in Rust

    1 project | news.ycombinator.com | 18 Jan 2022
  • Parcel CSS: A new CSS parser, compiler, and minifier

    1 project | /r/webdev | 12 Jan 2022
  • The JavaScript Oxidation Compiler

    1 project | news.ycombinator.com | 16 Dec 2023
  • Oxidation Compiler – JavaScript Tools in Rust

    1 project | news.ycombinator.com | 15 Dec 2023