{"id":16965071,"url":"https://github.com/propensive/cataclysm","last_synced_at":"2025-04-11T23:03:36.069Z","repository":{"id":39483677,"uuid":"381820667","full_name":"propensive/cataclysm","owner":"propensive","description":"Typesafe CSS in Scala","archived":false,"fork":false,"pushed_at":"2025-02-04T08:14:52.000Z","size":2347,"stargazers_count":4,"open_issues_count":2,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-02-20T01:38:45.132Z","etag":null,"topics":["css","css2","css3","scala","selectors","typesafe"],"latest_commit_sha":null,"homepage":"https://propensive.com/cataclysm/","language":"Scala","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/propensive.png","metadata":{"files":{"readme":".github/readme.md","changelog":null,"contributing":".github/contributing.md","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":"2021-06-30T20:07:49.000Z","updated_at":"2025-02-04T08:14:56.000Z","dependencies_parsed_at":"2023-10-11T11:41:55.296Z","dependency_job_id":"c21eab4f-b425-4ffd-95e1-8b633885fa25","html_url":"https://github.com/propensive/cataclysm","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/propensive%2Fcataclysm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/propensive%2Fcataclysm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/propensive%2Fcataclysm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/propensive%2Fcataclysm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/propensive","download_url":"https://codeload.github.com/propensive/cataclysm/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239805893,"owners_count":19700205,"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","css2","css3","scala","selectors","typesafe"],"created_at":"2024-10-13T23:44:56.472Z","updated_at":"2025-02-20T08:31:40.097Z","avatar_url":"https://github.com/propensive.png","language":"Scala","funding_links":[],"categories":[],"sub_categories":[],"readme":"[\u003cimg alt=\"GitHub Workflow\" src=\"https://img.shields.io/github/actions/workflow/status/propensive/cataclysm/main.yml?style=for-the-badge\" height=\"24\"\u003e](https://github.com/propensive/cataclysm/actions)\n[\u003cimg src=\"https://img.shields.io/discord/633198088311537684?color=8899f7\u0026label=DISCORD\u0026style=for-the-badge\" height=\"24\"\u003e](https://discord.com/invite/MBUrkTgMnA)\n\u003cimg src=\"/doc/images/github.png\" valign=\"middle\"\u003e\n\n# Cataclysm\n\n__Typesafe CSS in Scala__\n\n__Cataclysm__ provides a typesafe representation of CSS, including properties, selectors, rules and\nstylesheets.\n\n## Features\n\n- typesafe DSL for CSS\n- model stylesheets in Scala\n- use typed expressions for CSS attribute values\n- integration with [Honeycomb](https://github.com/propensive/honeycomb/) and [Scintillate](https://github.com/propensive/scintillate/)\n- write CSS selectors as Scala expressions\n\n\n## Availability\n\n\n\n\n\n\n\n## Getting Started\n\nCataclysm provides several types for modeling CSS.\n\n### Selectors\n\nCSS selectors are currently unparsed, and represented by the `Selector` type, which is just a\nwrapper for a `String`. The easiest way to construct a new `Selector` is with the `sel`\ninterpolator, for example:\n```scala\nval selector: Selector = sel\".form input[type=radio]\"\n```\n\nIn a later version, these will be parsed at compiletime to check they are well-formed.\n\nCSS selectors are implemented using a DSL that allows values, representing CSS classes, identifiers\nHTML elements and pseudo-classes, to be combined with a variety of combinators, much as they are\nin a CSS stylesheet.\n\nThe syntax is similar to CSS, but must nevertheless be valid Scala. While this compromises\nfamiliarity with CSS syntax, there are many advantages too: the code is parsed and typechecked,\nso many errors can be detected earlier. And every value is an expression, which facilitates code\nreuse. And since selectors are algebraic expressions, with parentheses available, they can express\nsome selectors more concisely than is possible in CSS.\n\nThe syntax mirrors CSS as much as possible, with a couple of differences. A `|` is used in place\nof CSS's `,`, and the use of juxtaposition in CSS, with or without a space, is made explicit with\nthe operators `\u003e\u003e` and `\u0026` respectively. In a general context, these operators should be intuitive.\n\nElements are represented by `Tag` types from [Honeycomb](https://github.com/propensive/honeycomb/),\nand CSS classes may be specified using an interpolated string with the `cls` prefix, e.g.\n`cls\"hidden\"`. Likewise DOM IDs are interpolated strings with the `id` prefix.\n\nPseudo-classes are available inside the `cataclysm.pseudo` package, and have the same name as their\nCSS equivalents, though dashed syntax is translated to camelcase. For example, `first-child`\nbecomes `firstChild`.\n\nCSS                   | Cataclysm\n----------------------+---------\n`.myClass`            | `cls\"myClass\"`\n`#domId`              | `id\"domId\"`\n`table`               | `Table` (`honeycomb.Table`)\n`table tr`            | `Table \u003e\u003e Tr`\n`tr\u003etd`               | `Tr \u003e Td`\n`td, th`              | `Td | Th`\n`td.hide`             | `Td\u0026cls\"hide\"`\n`td+th`               | `Td + Th`\n`td~th`               | `Td ~ Th`\n`tr td, tr th`        | `Tr \u003e\u003e (Td | Th)`\n`tr td.hide`          | `Tr \u003e\u003e Td\u0026cls\"hide\"`\n`tr:first-child`      | `Tr\u0026firstChild`\n`tr.head:first-child` | `Tr\u0026cls\"head\"\u0026firstChild`\n\nNote in particular that `Tr \u003e\u003e (Td | Th)` gets rewritten to the equivalent of\n`Tr \u003e\u003e Td | Tr \u003e\u003e Th`, as parentheses are not available in CSS.\n\nOf course, identifiers like `cls\"hide\" and `id\"banner\"` are just values like any other, so it\nwould be typical to first define, for example,\n```scala\nval hide = cls\"hide\"\nval banner = id\"banner\"\n```\nand then refer to `hide` and `banner` directly in the selector. These same identifiers can be used as\nvalues for Honeycomb element attributes, for example,\n```scala\nDiv(id = banner)(contents*)\n```\nor,\n```scala\nTr(hclass = hide)(Th(heading))\n```\n\n### Specifying attributes\n\nCSS attributes may be added to a `Selector` to create a `Rule` by binding the selector to a\n`Style` value (typically created with the `Css` constructor) using the `:=` operator. For example,\n```scala\nval rule: Rule = Tr \u003e\u003e Th := Css(margin = (1.px, 2.px, 1.px), cursor = Cursor.Pointer)\n```\n\nThis rule would serialize to the CSS,\n```css\ntr th { margin: 1px 2px 1px; cursor: pointer; }\n```\n\nEach named parameter takes its name from the CSS attribute, where CSS's dashed naming style\n(for example, `animation-fill-mode`) should be translated into camelcase (for example,\n`animationFillMode`).\n\nEvery CSS attribute may be transformed in this way, without exception. Only valid CSS attributes\n(after transformation) may be used as named parameters, and any attempt to use a nonexistent CSS\nattribute will produce a compile error.\n\nFor example,\n```scala\nval rule: Rule = sel\".form input[type=radio]\"(fontWeight = 600, textAlign = TextAlign.Center)\n```\n\n### Stylesheets\n\nA number of `Rule`s may be combined into a single `Stylesheet`. The `Stylesheet` constructor can\ntake repeated `Rule` arguments, for example:\n```scala\nval styles = Stylesheet(\n  Form := Css(backgroundColor = colors.White),\n  Form\u0026mainForm \u003e\u003e Input := Css(display = Display.InlineBlock),\n  rule3\n)\n```\n\n### Other directives\n\nIn addition to `Rule`s, a `Stylesheet` may contain a number of other directives, such as imports and\nmedia queries.\n\nThese include:\n- `Keyframes`\n- `Import`\n\nSupport for others, in particular media queries, will be added in due course.\n\n### Attribute values\n\nAs much as possible, attribute values are strongly typed, which means arbitrary Scala expressions\nmay be used for attribute values, provided they conform to a suitable type.\n\nThe process of finding the most suitable types for each attribute is an ongoing process, and\ndifferent CSS attributes are gradually being migrated from using `String`s to more precise types.\n\nAdditionally, arithmetic expressions involving dimensional values will use CSS's `calc` function\nwhere necessary, while any Scala expression is valid for an attribute value, as long as it returns\na value of a suitable type.\n\n#### Dimensional values\n\nLengths and other values use instances of the `Length` enumeration. This provides representations of\nall CSS unit types (`px`, `pt`, `in`, `pc`, `cm`, `mm`, `em`, `ex`, `ch`, `rem`, `vw`, `vh`, `vmin`\nand `vmax`). These are made available as extension methods on `Double` values.\n\n#### Colors\n\nColours are provided by [Iridescence](https://github.com/propensive/iridescence/) which can\nrepresent colors in a variety of different models. Colors defined using color models which are\nnatively supported by CSS will be embedded using that same model, while other colors will be\nconverted automatically to SRGB.\n\n#### Enumerated values\n\nMany CSS attributes take one of a selection of enumerated possibilities. These are generally\nrepresented by an `enum` whose name is taken from the capitalized, camelcase name of that attribute,\nand whose members' names are similarly transformed.\n\nFor example, the CSS value, `color-dodge` for the attribute, `mix-blend-mode` is called,\n`MixBlendMode.ColorDodge`.\n\n#### Multi-part values\n\nSome CSS attributes, such as `border`, can accept multiple arguments. While these would be\nseparated by spaces in CSS, they should be embedded in a tuple using Cataclysm. For example,\n```scala\nCss(margin = (1.px, 3.em))\n```\n\n\n\n\n\n\n## Status\n\nCataclysm is classified as __fledgling__. For reference, Soundness projects are\ncategorized into one of the following five stability levels:\n\n- _embryonic_: for experimental or demonstrative purposes only, without any guarantees of longevity\n- _fledgling_: of proven utility, seeking contributions, but liable to significant redesigns\n- _maturescent_: major design decisions broady settled, seeking probatory adoption and refinement\n- _dependable_: production-ready, subject to controlled ongoing maintenance and enhancement; tagged as version `1.0.0` or later\n- _adamantine_: proven, reliable and production-ready, with no further breaking changes ever anticipated\n\nProjects at any stability level, even _embryonic_ projects, can still be used,\nas long as caution is taken to avoid a mismatch between the project's stability\nlevel and the required stability and maintainability of your own project.\n\nCataclysm is designed to be _small_. Its entire source code currently consists\nof 832 lines of code.\n\n## Building\n\nCataclysm will ultimately be built by Fury, when it is published. In the\nmeantime, two possibilities are offered, however they are acknowledged to be\nfragile, inadequately tested, and unsuitable for anything more than\nexperimentation. They are provided only for the necessity of providing _some_\nanswer to the question, \"how can I try Cataclysm?\".\n\n1. *Copy the sources into your own project*\n   \n   Read the `fury` file in the repository root to understand Cataclysm's build\n   structure, dependencies and source location; the file format should be short\n   and quite intuitive. Copy the sources into a source directory in your own\n   project, then repeat (recursively) for each of the dependencies.\n\n   The sources are compiled against the latest nightly release of Scala 3.\n   There should be no problem to compile the project together with all of its\n   dependencies in a single compilation.\n\n2. *Build with [Wrath](https://github.com/propensive/wrath/)*\n\n   Wrath is a bootstrapping script for building Cataclysm and other projects in\n   the absence of a fully-featured build tool. It is designed to read the `fury`\n   file in the project directory, and produce a collection of JAR files which can\n   be added to a classpath, by compiling the project and all of its dependencies,\n   including the Scala compiler itself.\n   \n   Download the latest version of\n   [`wrath`](https://github.com/propensive/wrath/releases/latest), make it\n   executable, and add it to your path, for example by copying it to\n   `/usr/local/bin/`.\n\n   Clone this repository inside an empty directory, so that the build can\n   safely make clones of repositories it depends on as _peers_ of `cataclysm`.\n   Run `wrath -F` in the repository root. This will download and compile the\n   latest version of Scala, as well as all of Cataclysm's dependencies.\n\n   If the build was successful, the compiled JAR files can be found in the\n   `.wrath/dist` directory.\n\n## Contributing\n\nContributors to Cataclysm are welcome and encouraged. New contributors may like\nto look for issues marked\n[beginner](https://github.com/propensive/cataclysm/labels/beginner).\n\nWe suggest that all contributors read the [Contributing\nGuide](/contributing.md) to make the process of contributing to Cataclysm\neasier.\n\nPlease __do not__ contact project maintainers privately with questions unless\nthere is a good reason to keep them private. While it can be tempting to\nrepsond to such questions, private answers cannot be shared with a wider\naudience, and it can result in duplication of effort.\n\n## Author\n\nCataclysm was designed and developed by Jon Pretty, and commercial support and\ntraining on all aspects of Scala 3 is available from [Propensive\nO\u0026Uuml;](https://propensive.com/).\n\n\n\n## Name\n\nCataclysm takes its name from the sweeping inundation (typical of a _waterfall_, or _cascade_) since it represents _Cascading_ Style Sheets.\n\nIn general, Soundness project names are always chosen with some rationale,\nhowever it is usually frivolous. Each name is chosen for more for its\n_uniqueness_ and _intrigue_ than its concision or catchiness, and there is no\nbias towards names with positive or \"nice\" meanings—since many of the libraries\nperform some quite unpleasant tasks.\n\nNames should be English words, though many are obscure or archaic, and it\nshould be noted how willingly English adopts foreign words. Names are generally\nof Greek or Latin origin, and have often arrived in English via a romance\nlanguage.\n\n## Logo\n\nThe logo shows a cresting wave, cataclysmic in nature.\n\n## License\n\nCataclysm is copyright \u0026copy; 2025 Jon Pretty \u0026 Propensive O\u0026Uuml;, and\nis made available under the [Apache 2.0 License](/license.md).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpropensive%2Fcataclysm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpropensive%2Fcataclysm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpropensive%2Fcataclysm/lists"}