[Item Filter Tool] PoE CSS - A better way to write item filters

I had an idea to write a better/more intuitive item filter language, so I created PoE CSS.

Example (live demo) (forgive the bad indenting)

@black: RGB(0, 0, 0)
@t1-gem-border-color: RGB(30, 150, 180)

@volume: 300
@t1-drop-sound: 6 @volume
@unique-drop-sound: 3 @volume
@value-drop-sound: 2 @volume

@gem-styling() {
SetTextColor @t1-gem-text-color
SetBorderColor @t1-gem-border-color
}

Class Gems {
Hide
SetFontSize 36
SetBorderColor @black

Quality >= 1 {
Show
SetFontSize 40
SetBorderColor @t1-gem-border-color
}

BaseType "Detonate Mines" "Added Chaos Damage" "Vaal" "Enhance" | Quality >= 14 {
Show
SetFontSize 40
@gem-styling()
PlayAlertSound @value-drop-sound
}
}

Via the website or the command line tool, filters written in PoE CSS can be transpiled into the native item filter language and plugged right into Path of Exile.

Key Features

* CSS-style semantics: multiple clauses can match any item, rather than just the first match in the base filter language.
* Constants: reuse colors, sounds, and anything else
* Macro expansion: functions for reusing blocks, making your filter a lot cleaner
* Nested and OR matches: stop repeating yourself

How do I use it?

You can write new filters on the website or check out the command line tool for more features and explanations.

Why should I be interested?

If you've ever tried tweaking or creating an item filter, you've probably found the base language to be a little lacking. It has the clear advantage of being extremely simple and straightforward, but the downside is that coding certain things is a little harder. Here's three reasons why PoE CSS helps you write filters quickly and easily.

1) Better Matching

Base item filters only match the first block and ignore all else. So if you've ever tried tweaking a filter, you probably found it tricky. Maybe you did something like this to make uniques bigger:

Show
Rarity Unique
SetFontSize 45

<rest of filter>

Then you realized that doing so destroyed all of the nice formatting the rest of the filter gives you for uniques. There's no way to "add on" styling to existing logic since now all of your uniques are being captured by a single clause.

In PoE CSS (just like CSS, if you're familiar), multiple clauses can match. To get an item's final style, PoE CSS finds all clauses that match the given item, then combines all of their respective styles. Later properties override earlier properties, so later clauses are generally more powerful than earlier clauses.

ItemLevel >= 25 {
Show
SetFontSize 25
SetBackgroundColor RGB(0, 255, 0)
}

Rarity Unique {
Show
SetBackgroundColor RGB(255, 0, 0)
}

ilvl >= 25 items that are not unique will have the font size change and a green
background. Unique items will have a red background. ilvl >= 25 items that are
also unique will have the font size change and a red background.

This means you can safely add and remove styling, knowing that you can control precisely what is being overriden.

2) Variables & Reusability

If you ever want to reuse a color or sound, you have to type it out over and over. PoE CSS has constants and macros so you can define all your colors at the top and reuse them. For people who've written their own filter compilers that generate different themes, PoE CSS can do that natively - just swap your constants out.

3) Nesting

If you want to write a bunch of rules about gems in the base language, you have to write "Class Gems" over and over. In PoE CSS, they can be grouped into a block, which reduces repetition and visually demarcates sections in your code, like in the example at the top.

Can't I just find a filter online?

Of course you can. This tool is meant for people interested in writing their own filters or tweaking existing ones written in PoE CSS.

Aren't there already tools for this?

I'm new to PoE, but one of my favorite parts is the robust developer community with lots of powerful third-party tools. There are lots of really impressive people who've written their own filters (and alongside, written their own filter generators that have similar functionality to PoE CSS). I wanted to take my own stab at the problem and try tackling it at a deeper level. For the developers out there, you know how valuable it is to be able to use better tools to write better code. That's why I wanted to try building an totally new language for writing any item filter.

How can I help?

Give it a whirl and if you're not satisfied, tell me why below. If you love it, tell me too :) And if you've built a similar system to generate filters and want to migrate to PoE CSS, let me know too!