{"id":14962187,"url":"https://github.com/zanaptak/typedcssclasses","last_synced_at":"2025-10-24T22:32:14.981Z","repository":{"id":48424848,"uuid":"199380027","full_name":"zanaptak/TypedCssClasses","owner":"zanaptak","description":"A CSS class type provider for F# web development. Bring external stylesheet classes into your F# code as design-time discoverable compiler-verified properties.","archived":false,"fork":false,"pushed_at":"2021-07-30T19:32:44.000Z","size":1563,"stargazers_count":167,"open_issues_count":1,"forks_count":8,"subscribers_count":7,"default_branch":"main","last_synced_at":"2024-10-10T12:03:31.612Z","etag":null,"topics":["css","fable","fsharp","tailwind-css"],"latest_commit_sha":null,"homepage":"","language":"F#","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/zanaptak.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}},"created_at":"2019-07-29T04:47:43.000Z","updated_at":"2024-09-15T08:39:36.000Z","dependencies_parsed_at":"2022-09-09T20:30:33.020Z","dependency_job_id":null,"html_url":"https://github.com/zanaptak/TypedCssClasses","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zanaptak%2FTypedCssClasses","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zanaptak%2FTypedCssClasses/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zanaptak%2FTypedCssClasses/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zanaptak%2FTypedCssClasses/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zanaptak","download_url":"https://codeload.github.com/zanaptak/TypedCssClasses/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219867520,"owners_count":16555889,"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":["css","fable","fsharp","tailwind-css"],"created_at":"2024-09-24T13:29:38.616Z","updated_at":"2025-10-24T22:32:09.200Z","avatar_url":"https://github.com/zanaptak.png","language":"F#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Zanaptak.TypedCssClasses\n\n[![GitHub](https://img.shields.io/badge/-github-gray?logo=github)](https://github.com/zanaptak/TypedCssClasses) [![NuGet](https://img.shields.io/nuget/v/Zanaptak.TypedCssClasses?logo=nuget)](https://www.nuget.org/packages/Zanaptak.TypedCssClasses)\n\nA CSS class type provider for F# web development.\n\nBring external stylesheet classes into your F# code as design-time discoverable compiler-verified properties.\n\n## Code examples\n\nThe following code examples show how the type provider enables type-safe CSS classes. Anywhere you would have previously used a class name string, you can now use something like a `Bootstrap`-, `FA`-, or `tw`-prefixed property, with your IDE providing completion for valid classes.\n\nThe syntax in these examples is [Fable.React](https://fable.io/blog/Announcing-Fable-React-5.html) view syntax, but any web framework can be used because the provided properties just compile to the underlying class names as strings.\n\n### Bootstrap CSS\n\n```fs\n// A \"Bootstrap\" type pointing at a remote Bootstrap CSS file.\ntype Bootstrap = CssClasses\u003c\"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css\", Naming.PascalCase\u003e\n\n// All CSS classes become Bootstrap.* properties, with design-time completion.\ndiv [ ClassName Bootstrap.Card ] [\n    div [ ClassName Bootstrap.CardBody ] [\n        h5 [ ClassName Bootstrap.CardTitle ] [ str \"A clever title\" ]\n        p [ ClassName Bootstrap.CardText ] [ str \"Lorem ipsum dolor sit amet.\" ]\n    ]\n]\n```\n\n### Font Awesome CSS\n\n```fs\n// An \"FA\" type pointing at a local Font Awesome CSS file.\ntype FA = CssClasses\u003c\"static/font-awesome/css/all.css\", Naming.Underscores\u003e\n\n// All CSS classes become FA.* properties, with design-time completion.\ni [ classList [\n    FA.far, true\n    FA.fa_grin, true ] ] []\n\ni [ classList [\n    FA.fas, true\n    FA.fa_thumbs_up, true ] ] []\n```\n\n### Tailwind CSS\n\n```fs\n// A \"tw\" type pointing at a remote Tailwind CSS file.\ntype tw = CssClasses\u003c\"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css\", Naming.Verbatim\u003e\n\n// All CSS classes become tw.* properties, with design-time completion.\ndiv [ ClassName \u003c| String.concat \" \" [\n        tw.``bg-red-200``\n        tw.``hover:bg-red-500``\n        tw.``hover:font-bold``\n\n        tw.``sm:text-2xl``\n        tw.``sm:bg-green-200``\n        tw.``sm:hover:bg-green-500``\n\n        tw.``lg:text-4xl``\n        tw.``lg:bg-blue-200``\n        tw.``lg:hover:bg-blue-500`` ]\n] [ str \"Resize me! Hover me!\" ]\n```\n\n## Samples\n\nPreconfigured sample projects to see it in action and use as a starting point:\n\n- [Fable Sass sample](https://github.com/zanaptak/TypedCssClasses/tree/main/sample/FableSass) - Demonstrates TypedCssClasses with Sass compilation in a Fable project.\n\n- [Fable Tailwind sample](https://github.com/zanaptak/TypedCssClasses/tree/main/sample/FableTailwind) - Demonstrates TypedCssClasses with Tailwind CSS in a Fable project.\n\n## Getting started\n\nAdd the [NuGet package](https://www.nuget.org/packages/Zanaptak.TypedCssClasses) to your project:\n```\ndotnet add package Zanaptak.TypedCssClasses\n```\n\nIf the project was already open in an IDE, you might want to close and restart it to make sure the type provider loads into the process correctly.\n\nWrite some code:\n```fs\nopen Zanaptak.TypedCssClasses\n\n// Define a type for a CSS source.\n// Can be file path, web URL, or CSS text.\ntype css = CssClasses\u003c\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\"\u003e\n\n// Enjoy your typed properties!\nlet x = css.``display-1``\n```\n\nIt should work with any IDE that supports type providers. (Tested in Visual Studio Code with Ionide-fsharp extension on Windows and Linux, and in Visual Studio on Windows.)\n\n## Configuration\n\nSee the [configuration instructions](https://github.com/zanaptak/TypedCssClasses/blob/main/doc/configuration.md) for full details on configuration parameters to customize the behavior of the type provider.\n\n## Notes\n\nThis type provider does not use formal CSS parsing; it identifies classes by typical selector patterns using (somewhat complex) regular expressions. It tests fine against several major CSS frameworks but is not guaranteed foolproof in case there is some obscure CSS syntax not accounted for.\n\nWeb URLs are expected to use static CDN or otherwise unchanging content and are cached on the filesystem with a 90-day expiration. If tracking of CSS changes is required, you must use local CSS files in your project.\n\nIf using Fable 2.x, update fable-compiler to version 2.3.17 or later to avoid an issue with the type provider failing to resolve relative file paths.\n\nCSS `@import` rules are not processed internally by the type provider. If desired, they can be processed via external command; see the [TestWithFable test project](https://github.com/zanaptak/TypedCssClasses/tree/main/test/TestWithFable) for an example using [PostCSS](https://postcss.org/) with the [postcss-import](https://github.com/postcss/postcss-import) plugin.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzanaptak%2Ftypedcssclasses","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzanaptak%2Ftypedcssclasses","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzanaptak%2Ftypedcssclasses/lists"}