{"id":18982357,"url":"https://github.com/defactosoftware/ex_css_modules","last_synced_at":"2025-10-27T00:45:47.476Z","repository":{"id":25703771,"uuid":"104879307","full_name":"DefactoSoftware/ex_css_modules","owner":"DefactoSoftware","description":"CSS Modules for Elixir","archived":false,"fork":false,"pushed_at":"2025-01-14T13:35:57.000Z","size":131,"stargazers_count":19,"open_issues_count":8,"forks_count":1,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-02T12:39:49.477Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Elixir","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DefactoSoftware.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.MD","contributing":null,"funding":null,"license":"LICENSE","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":"2017-09-26T12:02:56.000Z","updated_at":"2025-01-28T11:16:49.000Z","dependencies_parsed_at":"2023-02-16T04:01:01.318Z","dependency_job_id":"c56a0ccd-831a-418e-bb70-0970fcbfb852","html_url":"https://github.com/DefactoSoftware/ex_css_modules","commit_stats":{"total_commits":77,"total_committers":7,"mean_commits":11.0,"dds":0.7142857142857143,"last_synced_commit":"027336fc818a8810e8240f7be969d0d2180ffef3"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DefactoSoftware%2Fex_css_modules","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DefactoSoftware%2Fex_css_modules/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DefactoSoftware%2Fex_css_modules/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DefactoSoftware%2Fex_css_modules/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DefactoSoftware","download_url":"https://codeload.github.com/DefactoSoftware/ex_css_modules/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248085678,"owners_count":21045194,"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-08T16:13:13.155Z","updated_at":"2025-10-27T00:45:47.374Z","avatar_url":"https://github.com/DefactoSoftware.png","language":"Elixir","readme":"# ExCSSModules\n\n[CSS Modules](https://github.com/css-modules/css-modules) for Elixir. Build to integrate well with the [Phoenix Framework](http://phoenixframework.org/).\n\n[![Hex.pm](https://img.shields.io/hexpm/v/ex_css_modules.svg)](https://hex.pm/packages/ex_css_modules)\n[![CircleCI](https://circleci.com/gh/DefactoSoftware/ex_css_modules/tree/master.svg?style=shield)](https://circleci.com/gh/DefactoSoftware/ex_css_modules)\n\nExCSSModules defines two ways to read the stylesheet: embedded and read.\n\nIf you set the `embed_stylesheet` option to the `use` macro the stylesheet definitions JSON have to be compiled before the application is compiled. This flag is used for production to optimize read times. \n\nIf you don't set the flag or set it to false, the stylesheet definition JSON files are read live from the server which creates a lot of IO for each request.\n\nAdditionally, you can pass a task to generate missing stylesheet definitions JSON files when compiling ExCSSModules, to prevent compilation errors when one of the stylesheet definitions JSON might be missing:\n\n```ex\ndefmodule Mix.Tasks.GenerateMissingJson do\n  use Mix.Task\n\n  @impl Mix.Task\n\n  def run(filename) do\n    with _exit_code = 0 \u003c-\n           Mix.shell().cmd(\"npx postcss #{filename} --dir ./tmp/postcss --verbose\") do\n      {:ok, filename \u003c\u003e \".json\"}\n    else\n      _exit_code -\u003e\n        relative_path = Path.relative_to_cwd(filename)\n        exit(\"Error generating scoped JSON file ./#{relative_path}.json\")\n    end\n  end\nend\n```\n\nThis task can be passed through the option `build_stylesheet_definitions_json_task`: \n\n```ex\nuse ExCSSModules.View,\n  namespace: MyApplicationWeb,\n  embed_stylesheet: ApplicationSettings.built_for?(:prod),\n  build_stylesheet_definitions_json_task: unquote(Mix.Tasks.GenerateMissingJson),\n  stylesheet:\n    __ENV__.file\n    |\u003e Path.dirname()\n    |\u003e Path.join(\"./style.css\")\n```\n\n## Installation\nInstall from [Hex.pm](https://hex.pm/packages/ex_css_modules):\n\n```ex\ndef deps do\n  [{:ex_css_modules, \"~\u003e 0.0.10\"}]\nend\n```\n\n## Usage\nTo use ExCSSModules in a view compile the CSS file (e.g. through Brunch or Webpack) and add the following to the view:\n\n```ex\ndefmodule MyApplication.ExampleView do\n  use ExCSSModules.View, stylesheet: Path.relative_to_cwd(\"assets/css/views/example.css\")\nend\n```\n\nThis allows you to use the `class` and `class_name` functions in the template and views as followed:\n\n**CSS:**\n```css\n.title {\n  font-size: huge;\n}\n```\n\n**Template:**\n```eex\n  \u003ch1 \u003c%= class \"title\" %\u003e\u003eHello world\u003c/h1\u003e\n```\n\n**Output:**\n```eex\n  \u003ch1 class=\"_2313dsc-title\"\u003eHello world\u003c/h1\u003e\n```\n\n**Please note that `class` cannot be used in `heex` templates as the HTML\nvalidation engine does not allow it.**\n\n## Advanced usage\n\n### Phoenix.View\nExCSSModules is made for the Phoenix framework and can be easily be automatically be added to your view definition in `web.ex`. At [Defacto](https://github.com/DefactoSoftware) we automatically parse the View name and extract the correct stylesheet from it:\n\n```ex\ndef view() do\n  quote do\n    use Phoenix.View, root: \"lib/my_application_web/templates\",\n                      namespace: MyApplicationWeb\n    use ExCSSModules.View, namespace: MyApplicationWeb,\n                           stylesheet: Path.join(\n                            \"assets/css/templates\",\n                            __MODULE__\n                            |\u003e Module.split\n                            |\u003e Enum.map(\u0026Phoenix.Naming.underscore/1)\n                            |\u003e Enum.join(\"/\")\n                            |\u003e String.replace_suffix(\"_view\", \".css\")\n                           )\n    ...\n  end\nend\n```\n\n### JSON library selection\n\nExCSSModules needs to parse JSON files in order to read the mappings between the base classnames and the autogenerated\nones. You can specify which JSON parsing library you wish to use through the `:json_library` config option. If your\nproject uses Phoenix, it is recommended to use the same library for both Phoenix and ExCSSModules. ExCSSModules uses\n[Poison](https://hex.pm/packages/poison) by default.\n\n### ExCell\nExCSSModules works perfectly with [ExCell](https://github.com/DefactoSoftware/ex_cell). By adding the following to your `web.ex` definition for cells you can automatically add the stylesheet in the same directory as your ExCell Cell:\n```ex\ndef cell() do\n  quote do\n    use ExCell.Cell, namespace: MyApplicationWeb\n    use ExCSSModules.View, namespace: MyApplicationWeb,\n                           stylesheet: __ENV__.file\n                                      |\u003e Path.dirname\n                                      |\u003e Path.join(\"./style.css\")\n    ...\n  end\nend\n```\n\n### Configuration options\n\n- `embed_by_default`: Global configuration for the `:embed_stylesheet` option of [ExCssModules.View](./lib/view.ex). Can still be overridden by the use option. Useful for configuring different defaults in development and production. Defaults to false.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdefactosoftware%2Fex_css_modules","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdefactosoftware%2Fex_css_modules","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdefactosoftware%2Fex_css_modules/lists"}