{"id":19962803,"url":"https://github.com/mui/tech-challenge-pigment-css","last_synced_at":"2025-05-03T22:31:22.510Z","repository":{"id":247354354,"uuid":"823108702","full_name":"mui/tech-challenge-pigment-css","owner":"mui","description":null,"archived":false,"fork":false,"pushed_at":"2025-04-11T20:27:49.000Z","size":66,"stargazers_count":4,"open_issues_count":2,"forks_count":2,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-24T14:29:45.752Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":"mui-org","ko_fi":null,"tidelift":null,"custom":null}},"created_at":"2024-07-02T12:45:36.000Z","updated_at":"2025-04-04T04:26:17.000Z","dependencies_parsed_at":"2024-07-08T09:50:27.311Z","dependency_job_id":"b11ec0fc-2efe-4506-8c53-e06bb7c7a008","html_url":"https://github.com/mui/tech-challenge-pigment-css","commit_stats":{"total_commits":9,"total_committers":3,"mean_commits":3.0,"dds":0.4444444444444444,"last_synced_commit":"79142b4d713358444e3cef9630a9b90c766378d9"},"previous_names":["mui/tech-challenge-pigment-css"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mui%2Ftech-challenge-pigment-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mui%2Ftech-challenge-pigment-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mui%2Ftech-challenge-pigment-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mui%2Ftech-challenge-pigment-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mui","download_url":"https://codeload.github.com/mui/tech-challenge-pigment-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252168372,"owners_count":21705250,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T02:13:01.152Z","updated_at":"2025-05-03T22:31:22.489Z","avatar_url":"https://github.com/mui.png","language":"JavaScript","funding_links":["https://opencollective.com/mui-org"],"categories":[],"sub_categories":[],"readme":"# Pigment CSS technical challenge @ MUI\n\nThis challenge is part of the hiring process for the Staff Engineer - Pigment CSS positions at MUI.\nThe idea is to make as much progress as possible under a given time constraint (2-3 hours).\n\n## Why are we doing this?\n\nAt MUI, because we are a DevTools company, we put a lot of accent on the quality of the work on the tools we create.\nWe started to work on Pigment CSS because we wanted to solve the main problems developers face: the performance of their apps and the support for React Server Components, without compromising their developer experience.\nThe idea of this challenge is to test out how deep you can go into solving technical problems that will help us achieve these goals.\nWe want to get a glimpse of how you will perform in the role.\n\n## Context about MUI\n\nMUI's objective is to become the UI toolkit for React developers.\nWe're unifying the fragmented ecosystem of dependencies into a single set of simple, beautiful, consistent, and accessible React components.\n\nOur mission is, ultimately, to make building great UIs and web apps a breeze ⎯ quicker, simpler, and accessible to more people.\nAt the end of the day, it's about [_writing less code_](https://youtu.be/GnO7D5UaDig?t=2451).\n\nPigment CSS plays a critical role in this, as performance is one of the main criteria for building _great_ UIs.\n\nHead to [our Handbook](https://mui-org.notion.site/Why-MUI-d8b8c142a6a44e3aa963f26edf4e03db) to learn more.\n\n## The challenge\n\nThe objective of the challenge is to implement a build-time transpilation of a React code to generate CSS and associate that CSS with its respective React elements.\nThe code you will write could be used inside a zero-runtime CSS-in-JS library that focuses on the basic use-case of how people may style their components.\n\nHere is the example code that you can start from:\n\n```jsx\nimport { styled } from \"@pigment-css/react\";\n\nconst Div = styled(\"div\")({\n  border: \"1px solid black\",\n});\n\nexport default function App(props) {\n  return (\n    \u003cDiv\n      {...props}\n      sx={{\n        ...(props.primary ? { background: \"blue\" } : { background: \"red\" }),\n      }}\n    /\u003e\n  );\n}\n```\n\nYour goal is to transform the `styled` and the `sx` calls into a valid CSS and a transformed JavaScript code that can later be used by a simple JavaScript runtime after the CSS is already extracted. The resulting output should look something like this:\n\n### JavaScript\n\n```jsx\nimport { styled } from \"@pigment-css/react\";\nimport \"./styles.css\";\n\nconst Div = styled(\"div\")({\n  className: \"hashed-string1\",\n});\n\nexport default function App(props) {\n  return (\n    \u003cDiv\n      {...props}\n      className=\"hashed-string2\"\n      style={{\n        \"--primary-var\": props.primary ? \"blue\" : \"red\",\n      }}\n    /\u003e\n  );\n}\n```\n\n### CSS\n\n```css\n.hashed-string1 {\n  border: 1px solid black;\n}\n\n.hashed-string2 {\n  background: var(--primary-var);\n}\n```\n\nWe encourage you to think of more complex scenarios on how the styles and the sx input can be created and incorporate those in your solution.\nIf time permits, you can also try to add support for tagged-template literal syntax, eg:\n\n```js\nconst Title = styled.h1`\n  font-size: 1.5em;\n  text-align: center;\n  color: #bf4f74;\n`;\n```\n\nWhen sending the challenge, you can include some input examples that you used as a test-cases.\n\n### Work environment\n\nTo save you time, we created a working environment.\nYou can install this environment by following these steps:\n\n- clone the repo: `git clone git@github.com:mui/tech-challenge-pigment-css.git`\n- install the dependencies: `pnpm install`\n- start Vite: `pnpm start`\n- open [http://localhost:5173/](http://localhost:5173/)\n- We have Babel preconfigured for you in `src/utils/transform.js`. If you are planning on using Babel, just uncomment the first implementation.\n\nYou can find the source of this URL in `src/App.jsx`. Your goal is to implement the `utils/transform.js` function that is responsible for doing the transformation. You can use the example code from above in the Input code textarea and check the results of the generated JavaScript and CSS.\n\n## Submission\n\nInstructions:\n\n- **DO NOT** fork / host your project on a public repository.\n- Please send us a zip file containing this project using the upload link that we have provided by email (**with** the _.git_ folder).\n- To significantly reduce the size of the archive, remove the `/_node_modules_/` folder.\n- If you don't have the upload link, you can send it to [job@mui.com](job@mui.com).\n\nWe're excited and looking forward to seeing what you'll create!\nGood luck 🚀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmui%2Ftech-challenge-pigment-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmui%2Ftech-challenge-pigment-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmui%2Ftech-challenge-pigment-css/lists"}