SCH-ClassMapper

Steam developers decided to update all the CSS classnames inside the Steam Client for seemingly no good reason. This fixes that.

Please note that this is currently still in development, and may not function as intended.
Join the discord if you have any questions.

How it works

The lexer indexes all files within the given folder hierarchy and parses them with a combination of css-selector-parser and postcss-safe-parser. It then compares all the individual selectors with their counterpart in the map.json diff, and updates old selectors respectively.

Limitations

The selector parsing library used does not properly parse everything perfectly. some pseudoclasses arent parsed properly and the old classes will remain. You should always diff the converted files and search for outliers and you will need to manually update these outliers from old to new classname. You can CTRL + F this document to find the new classname from an old one respectively.

Prerequisites

• Node Js
• The required node modules covered in usage

Usage

Locally

git clone https://github.com/SteamClientHomebrew/ClassMapper.git
cd ClassMapper
npm install
node lexer ${PATH_TO_THEME}

• PATH_TO_THEME represents a recursively indexed folder on disk that contains x amount of CSS files.

Using GitHub Actions

1. In your GitHub repository containing your CSS files, create a new branch. this branch will hold your converted CSS files.
2. Go to the branch and create .github/workflows/node.js.yml as a new file.
3. Copy and paste the contents of workflows/lexer.yml to it and commit.
4. Wait for the workflow to push the changes.
5. Assuming you've checked limitations and everything is correct, merge the created branch with your main branch.

References:

• PartyWumpus' git diff mapping implementation here