{"id":21681828,"url":"https://github.com/marceloadsj/css-operators","last_synced_at":"2026-04-12T03:39:18.133Z","repository":{"id":126926737,"uuid":"324523015","full_name":"marceloadsj/css-operators","owner":"marceloadsj","description":"CSS Modules superset adding Operators to retrieve the right Classes based on Props.","archived":false,"fork":false,"pushed_at":"2020-12-26T21:23:08.000Z","size":81,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-28T12:36:10.974Z","etag":null,"topics":["css","css-modules","javascript","operators","react"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/css-operators","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/marceloadsj.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}},"created_at":"2020-12-26T09:34:38.000Z","updated_at":"2021-01-05T20:12:49.000Z","dependencies_parsed_at":"2023-06-19T00:26:58.473Z","dependency_job_id":null,"html_url":"https://github.com/marceloadsj/css-operators","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/marceloadsj/css-operators","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marceloadsj%2Fcss-operators","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marceloadsj%2Fcss-operators/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marceloadsj%2Fcss-operators/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marceloadsj%2Fcss-operators/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marceloadsj","download_url":"https://codeload.github.com/marceloadsj/css-operators/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marceloadsj%2Fcss-operators/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31703501,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T21:17:31.016Z","status":"online","status_checked_at":"2026-04-12T02:00:06.763Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["css","css-modules","javascript","operators","react"],"created_at":"2024-11-25T15:31:51.305Z","updated_at":"2026-04-12T03:39:18.115Z","avatar_url":"https://github.com/marceloadsj.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS Operators\n\n`Work in Progress`\n\nA combination of a Postcss Plugin and Webpack Loader on top of CSS Modules to add operators to CSS.\n\n---\n\n**CSS Module**\n\n```css\n/* Button.module.css */\n\n.Button {\n  border-radius: 10px;\n\n  (variant = primary) {\n    background-color: blue;\n    color: white;\n  }\n\n  (variant = secondary) {\n    background-color: lightblue;\n    color: blue;\n  }\n\n  (size = 100) {\n    padding: 3px 6px;\n  }\n\n  (size = 200) {\n    padding: 6px 12px;\n  }\n}\n```\n\n**Javascript**\n\n```javascript\n// React\n\nimport useCssProps from \"css-operators/react\";\nimport buttonClasses from \"./Button.module.css\";\n\nfunction Button(props) {\n  // The extra props will be deleted from the result object\n  const cssProps = useCssProps(\"Button\", buttonClasses, props);\n\n  return \u003cbutton {...cssProps} /\u003e;\n}\n\nfunction App() {\n  return (\n    \u003cButton variant=\"primary\" size={100}\u003e\n      Hello World\n    \u003c/Button\u003e\n  );\n}\n```\n\nOR\n\n```javascript\n// Vanilla\n\nimport getClassName from \"css-operators\";\nimport buttonClasses from \"./Button.module.css\";\n\nconst className = getClassName(\"Button\", buttonClasses, {\n  variant: \"primary\",\n  size: 100,\n});\n\nconst button = document.createElement(\"button\");\n\nbutton.className = className;\n```\n\n---\n\n## Setup\n\n```javascript\n// postcss.config.js\n\n// postcss-nested is a required plugin and it needs to be added after the css-operators\nmodule.exports = {\n  plugins: [\"css-operators/postcss-plugin\", \"postcss-nested\"],\n};\n```\n\n```javascript\n// Webpack (Next.js, Storybook, ...)\n\nconst injectCssOperators = require(\"css-operators/injectOnWebpack\");\n\nmodule.exports = {\n  webpack(config) {\n    injectCssOperators(config);\n\n    return config;\n  },\n};\n```\n\n---\n\n## API\n\n| Operator | Behavior                       | Description                                                       | JS Equivalent |\n| -------- | ------------------------------ | ----------------------------------------------------------------- | ------------- |\n| =        | Equality                       | Compare the stringfied version of two values                      | ==            |\n| !=       | Inequality                     | Compare the difference of two values, transforming bools and nums | !==           |\n| \u003e        | Greater than operator          | Compare the difference of two numeric values                      | \u003e             |\n| \u003c        | Less than operator             | Compare the difference of two numeric values                      | \u003c             |\n| \u003e=       | Greater than or equal operator | Compare the difference of two numeric values                      | \u003e=            |\n| \u003c=       | Less than or equal operator    | Compare the difference of two numeric values                      | \u003c=            |\n\n`import getClassName from \"css-operators\"`\n\n```javascript\n// cssKey as string - the base class of your .module.css file. The same file can have multiple of these.\n// cssModule as object - the import of the .module.css file. It will be parsed on webpack to a better format.\n// props as object - the props object to compare with the operators.\n\n// className as string - returns the parsed class name;\n\nconst className = getClassName(cssKey, cssModule, props);\n```\n\n`import useCssProps from \"css-operators/react\"`\n\n```javascript\n// arguments as the same of getClassName function\n\n// cssProps as object - returns a shallow copied object with the className added and the used props deleted\n\nconst cssProps = useCssProps(cssKey, cssModule, props);\n```\n\n---\n\n## Misc\n\nYou can mix some approaches to create a good way to organize your styles.\n\n**Tailwind CSS**\n\n```css\n/* Button.module.css */\n\n.Button {\n  @apply rounded;\n\n  (variant = primary) {\n    @apply bg-blue-500 text-white;\n  }\n\n  (variant = secondary) {\n    @apply bg-blue-100 text-blue-500;\n  }\n\n  (size = 100) {\n    @apply px-3 py-2;\n  }\n\n  (size = 200) {\n    @apply px-6 py-4;\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarceloadsj%2Fcss-operators","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarceloadsj%2Fcss-operators","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarceloadsj%2Fcss-operators/lists"}