{"id":22793069,"url":"https://github.com/kripod/css-shorthand-expanders","last_synced_at":"2025-04-16T15:51:27.650Z","repository":{"id":81143692,"uuid":"289503929","full_name":"kripod/css-shorthand-expanders","owner":"kripod","description":"Type-safe functions to expand CSS shorthands into their longhand sub-properties","archived":false,"fork":false,"pushed_at":"2020-09-01T20:56:49.000Z","size":802,"stargazers_count":25,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-06T16:41:30.082Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/kripod.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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-08-22T14:29:56.000Z","updated_at":"2024-06-02T10:05:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"ab552b8d-b4b5-4246-9542-dd66c21d1d85","html_url":"https://github.com/kripod/css-shorthand-expanders","commit_stats":{"total_commits":73,"total_committers":1,"mean_commits":73.0,"dds":0.0,"last_synced_commit":"39b82eb65c4fa3bebec6901b9d51de637726641d"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kripod%2Fcss-shorthand-expanders","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kripod%2Fcss-shorthand-expanders/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kripod%2Fcss-shorthand-expanders/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kripod%2Fcss-shorthand-expanders/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kripod","download_url":"https://codeload.github.com/kripod/css-shorthand-expanders/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249257121,"owners_count":21239139,"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-12-12T03:17:52.764Z","updated_at":"2025-04-16T15:51:27.631Z","avatar_url":"https://github.com/kripod.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# css-shorthand-expanders\n\nType-safe functions to expand CSS shorthands into their longhand sub-properties.\n\n[![npm](https://img.shields.io/npm/v/css-shorthand-expanders)](https://www.npmjs.com/package/css-shorthand-expanders)\n[![Travis (.com)](https://img.shields.io/travis/com/kripod/css-shorthand-expanders)](https://travis-ci.com/github/kripod/css-shorthand-expanders)\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.0%20adopted-ff69b4.svg)](./CODE_OF_CONDUCT.md)\n\n## Motivation\n\nCSS rules can be represented as plain JavaScript objects. While every property [has a type definition](https://github.com/frenic/csstype), longhands offer autocompletion superior to shorthands.\n\nUsually, sub-properties of a shorthand may be specified in any order. This imposes an overhead on developers and type systems alike. Consequently, shorthands without a fixed order syntax should be avoided.\n\nFor shorthands with a reasonable value order, typed methods with positional arguments can be defined. This project aims to provide those in the form of self-contained functions.\n\nThe main goal is to **support atomic CSS-in-JS libraries** which can't handle shorthands.\n\n## Usage\n\nInstall the library with a package manager, e.g. npm:\n\n```shell\nnpm install css-shorthand-expanders\n```\n\nAfter that, import transformation functions on demand:\n\n```js\nimport { padding } from \"css-shorthand-expanders\";\n\nconst longhands = padding(\"8px\", \"16px\");\nconsole.assert(longhands.paddingTop === \"8px\");\nconsole.assert(longhands.paddingRight === \"16px\");\nconsole.assert(longhands.paddingBottom === longhands.paddingTop);\nconsole.assert(longhands.paddingLeft === longhands.paddingRight);\n```\n\nBy convention, [property names are camelCased](https://reactjs.org/docs/dom-elements.html#style) to be consistent with the CSSOM `style` property. Unused functions are tree-shaken away, saving on your bundle sizes.\n\n### Type checking\n\nParameter suggestions and accurate return types can be enabled with a `.d.ts` file:\n\n```ts\n/* declarations.d.ts */\n\n// Make sure to install the optional peer dependency below\nimport type { StandardLonghandProperties } from \"csstype\";\n\ndeclare module \"css-shorthand-expanders\" {\n  // You may also use `StandardLonghandPropertiesFallback` and any type params\n  interface CSSProperties extends StandardLonghandProperties {}\n}\n```\n\n### Reference\n\nFunctions available are listed below in alphabetical order. Please refer to the bundled type definitions for their signatures and overloads.\n\n- [`animation`](./src/expanders/animation.ts)\n- [`border`](./src/expanders/border.ts)\n- [`borderBottom`](./src/expanders/borderBottom.ts)\n- [`borderColor`](./src/expanders/borderColor.ts)\n- [`borderImage`](./src/expanders/borderImage.ts)\n- [`borderLeft`](./src/expanders/borderLeft.ts)\n- [`borderRadius`](./src/expanders/borderRadius.ts)\n- [`borderRight`](./src/expanders/borderRight.ts)\n- [`borderStyle`](./src/expanders/borderStyle.ts)\n- [`borderTop`](./src/expanders/borderTop.ts)\n- [`borderWidth`](./src/expanders/borderWidth.ts)\n- [`columnRule`](./src/expanders/columnRule.ts)\n- [`columns`](./src/expanders/columns.ts)\n- [`flex`](./src/expanders/flex.ts)\n- [`flexFlow`](./src/expanders/flexFlow.ts)\n- [`gap`](./src/expanders/gap.ts)\n- [`gridArea`](./src/expanders/gridArea.ts)\n- [`gridColumn`](./src/expanders/gridColumn.ts)\n- [`gridRow`](./src/expanders/gridRow.ts)\n- [`inset`](./src/expanders/inset.ts)\n- [`lineClamp`](./src/expanders/lineClamp.ts)\n- [`listStyle`](./src/expanders/listStyle.ts)\n- [`margin`](./src/expanders/margin.ts)\n- [`outline`](./src/expanders/outline.ts)\n- [`overflow`](./src/expanders/overflow.ts)\n- [`padding`](./src/expanders/padding.ts)\n- [`placeContent`](./src/expanders/placeContent.ts)\n- [`placeItems`](./src/expanders/placeItems.ts)\n- [`placeSelf`](./src/expanders/placeSelf.ts)\n- [`textDecoration`](./src/expanders/textDecoration.ts)\n- [`textEmphasis`](./src/expanders/textEmphasis.ts)\n- [`transition`](./src/expanders/transition.ts)\n\n_More functions are under construction. Follow along for updates or [contribute](./CONTRIBUTING.md) to the project!_\n\n## Philosophy\n\nThe project adheres to the behavior of shorthands as [specified by _CSS Cascading and Inheritance_](https://www.w3.org/TR/css-cascade-3/#shorthand):\n\n\u003e Some properties are shorthand properties, meaning that they allow authors to specify the values of several properties with a single property. **A shorthand property sets all of its longhand sub-properties, exactly as if expanded in place.**\n\u003e\n\u003e When values are omitted from a shorthand form, unless otherwise defined, **each “missing” sub-property is assigned its initial value.**\n\nParameters of expanders are in a fallback-oriented order to embrace [progressive enhancement](https://developer.mozilla.org/docs/Glossary/Progressive_Enhancement). Defaults are mostly identical to the initial values of sub-properties, except for:\n\n- `animation` – Iteration count defaults to `\"infinite\"` (instead of `1`)\n- `border*` – Style defaults to `\"solid\"` (instead of `\"none\"`)\n- `columnRule` – Style defaults to `\"solid\"` (instead of `\"none\"`)\n- `outline` – Style defaults to `\"solid\"` (instead of `\"none\"`), and color defaults to `\"currentcolor\"` (instead of `[\"currentcolor\", \"invert\"]`)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkripod%2Fcss-shorthand-expanders","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkripod%2Fcss-shorthand-expanders","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkripod%2Fcss-shorthand-expanders/lists"}