{"id":1517,"date":"2022-01-21T17:23:34","date_gmt":"2022-01-21T17:23:34","guid":{"rendered":"http:\/\/sophyonline.com\/blog\/?p=1517"},"modified":"2022-01-21T18:43:37","modified_gmt":"2022-01-21T18:43:37","slug":"xcode-assets-how-to-extract-multiple-colors-json-values-into-a-csv-file","status":"publish","type":"post","link":"http:\/\/sophyonline.com\/blog\/2022\/01\/xcode-assets-how-to-extract-multiple-colors-json-values-into-a-csv-file\/","title":{"rendered":"Xcode Assets: How to extract multiple Colors.json values into a CSV file"},"content":{"rendered":"\n

When you have an app with lots of colors, even colors for different targets (as our application at the moment have) is difficult to organize it, or find a hex value since we’re depending exclusively on the Color.asset<\/strong> and Xcode doesn’t yet provide us with this capability. To find colors we will need the semantic name that it was given, and if you’re trying to migrate to a design system, or clean assets, this well, turns out to be challenging 😉<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

If we want then to extract all these colors somehow, into a CSV file so we can handle them, something like the next image, we will need to research a bit how.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The first step is to check how Xcode creates these files and what’s the content inside it:<\/p>\n\n\n\n

We go to Colors.xcassets<\/strong> and check out that each grouping of colors have inside a Contents.json<\/strong> file. This is good, since JSON has a lot of external support to parse it using third party apps, libraries, etc.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The next step is to check how’s that JSON constructed. And as the image shows, we have a components<\/em><\/strong> property with the RGB values as individual properties. This is also a good news for us, since we can absolutely parse these values!<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Now that we have a clear image of the file and properties of the JSON, the next question is: what should we use to parse it?. So, I’ve asked around and found out that there’s actually a very useful CLI tool provided by Sted Holland <\/a>called jq<\/a><\/strong>. Thanks to @j4n0<\/a> for the tip!!!<\/p>\n\n\n\n

jq is like sed<\/code> for JSON data – you can use it to slice and filter and map and transform structured data with the same ease that sed<\/code>, awk<\/code>, grep<\/code> and friends let you play with text<\/em><\/p><\/blockquote>\n\n\n\n

And indeed is good. I found out several resources and tutorials, and it was really easy to grasp. I will add them here at the end of the post as references.<\/p>\n\n\n\n

So basically we can navigate to the components property, and create 3 rows with the properties red, green and blue that will be added to the csv file. We use the @csv to indicate jq that those 3 will be added to that csv file<\/strong> and we bulk the result into the generated csv file called test1.csv<\/strong><\/p>\n\n\n\n

jq -r '.colors[]?.color.components? | [.red, .green, .blue] | @csv' >> test11.csv<\/code><\/p>\n\n\n\n

The other thing left is to loop into the Contents.json<\/em><\/strong> files and apply the jq<\/em><\/strong>. We then use the find<\/strong><\/em> command and at the end of this command we’ll use print<\/em><\/strong> command to print  the file name after<\/em> the matching lines because we want to have the name of the color of such RGB values.<\/p>\n\n\n\n

find . -name \"Contents.json\" -type f -exec jq -r '.colors[]?.color.components? | [.red, .green, .blue] | @csv' >> test11.csv '{}' \\; -print<\/code><\/p>\n\n\n\n

Now, the result will be something like the next image bellow. You will need just to adjust a little bit the csv file and that’s it. <\/p>\n\n\n\n

<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

References<\/strong><\/h2>\n\n\n\n