{"id":13827722,"url":"https://github.com/csstools/css-typed-om","last_synced_at":"2025-04-28T17:31:06.286Z","repository":{"id":57210946,"uuid":"127294992","full_name":"csstools/css-typed-om","owner":"csstools","description":"Use CSS Typed Object Model in the browser","archived":true,"fork":false,"pushed_at":"2020-08-05T19:20:51.000Z","size":31,"stargazers_count":102,"open_issues_count":4,"forks_count":9,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-06T11:50:25.445Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://csstools.github.io/css-typed-om/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/csstools.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-29T13:25:49.000Z","updated_at":"2024-09-29T09:54:31.000Z","dependencies_parsed_at":"2022-09-01T04:23:05.967Z","dependency_job_id":null,"html_url":"https://github.com/csstools/css-typed-om","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fcss-typed-om","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fcss-typed-om/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fcss-typed-om/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csstools%2Fcss-typed-om/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/csstools","download_url":"https://codeload.github.com/csstools/css-typed-om/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248190550,"owners_count":21062285,"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-08-04T09:02:06.081Z","updated_at":"2025-04-28T17:31:06.242Z","avatar_url":"https://github.com/csstools.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# CSS Typed Object Model [\u003cimg src=\"http://jonathantneal.github.io/js-logo.svg\" alt=\"js logo\" width=\"90\" height=\"90\" align=\"right\"\u003e][CSS Typed Object Model]\n\n[![NPM Version][npm-img]][npm-url]\n[![Build Status][cli-img]][cli-url]\n\n[CSS Typed Object Model] is a work-in-progress polyfill for using\n[CSS Typed OM Level 1] in the browser.\n\n**Pull Requests are welcome. Please don’t use this in production until there is\na v1.0.0.**\n\n```bash\nnpm install css-typed-om\n```\n\nPolyfill the `window` object:\n\n```js\nimport polyfill from 'css-typed-om';\n\npolyfill(window);\n```\n\nUse [CSS Typed Object Model] features:\n\n```js\n// Element styles\ndocument.body.attributeStyleMap.set('padding-top', CSS.px(42));\ndocument.body.attributeStyleMap.get('padding-top') /* CSSUnitValue {\n  value: 42,\n  unit: 'px'\n}.toString() =\u003e 42px */\n\ndocument.body.attributeStyleMap.set('opacity', 0.3);\ntypeof document.body.attributeStyleMap.get('opacity').value // number\ndocument.body.attributeStyleMap.get('opacity').unit // \"number\"\n\n// Stylesheet rules\ndocument.styleSheets[0].cssRules[0].styleMap.set('padding-top', '100px');\ndocument.styleSheets[0].cssRules[0].styleMap.get('padding-top'); /* CSSUnitValue {\n  value: 100,\n  unit: 'px'\n}.toString() =\u003e 100px */\n\n// Math products\nCSS.px(15).add(CSS.rem(10), CSS.em(5)) /* CSSMathSum {\n  operator: \"sum\",\n  values: [\n    CSSUnitValue { value: 15, unit: 'px' },\n    CSSUnitValue { value: 10, unit: 'rem' },\n    CSSUnitValu { value: 5, unit: 'em' }\n  ]\n}.toString() =\u003e calc(15px + 10rem + 5em) */\n\nCSS.px(15).mul(CSS.rem(10), CSS.em(5)) /* CSSMathProduct {\n  operator: \"product\",\n  values: [\n    CSSUnitValue { value: 15, unit: 'px' },\n    CSSUnitValue { value: 10, unit: 'rem' },\n    CSSUnitValu { value: 5, unit: 'em' }\n  ]\n}.toString() =\u003e calc(15px * 10rem * 5em) */\n\nCSS.px(15).sub(CSS.rem(10), CSS.em(5)) /* CSSMathSum {\n  operator: \"sum\",\n  values: [\n    CSSUnitValue { value: 15, unit: 'px' },\n    CSSUnitValue { value: -10, unit: 'rem' },\n    CSSUnitValu { value: -5, unit: 'em' }\n  ]\n}.toString() =\u003e calc(15px + -10rem + -5em) */\n\nCSS.px(15).div(CSS.rem(10), CSS.em(5)) /* CSSMathProduct {\n  operator: \"product\",\n  values: [\n    CSSUnitValue { value: 15, unit: 'px' },\n    CSSMathInvert {\n      operator: 'invert',\n      value: CSSUnitValue { value: 10, unit: 'rem' }\n    },\n    CSSMathInvert {\n      operator: 'invert',\n      value: CSSUnitValue { value: 5, unit: 'em' }\n    }\n  ]\n}.toString() =\u003e calc(15px / 10rem / 5em) */\n\nCSS.px(15).max(CSS.rem(10), CSS.em(5)) /* CSSMathMax {\n  operator: 'max',\n  values: [\n    CSSUnitValue { value: 15, unit: 'px' },\n    CSSUnitValue { value: 10, unit: 'rem' },\n    CSSUnitValu { value: 5, unit: 'em' }\n  ],\n}.toString() =\u003e max(15px, 10rem, 5em) */\n\nCSS.px(15).min(CSS.rem(10), CSS.em(5)) /* CSSMathMin {\n  operator: 'min',\n  values: [\n    CSSUnitValue { value: 15, unit: 'px' },\n    CSSUnitValue { value: 10, unit: 'rem' },\n    CSSUnitValu { value: 5, unit: 'em' }\n  ],\n}.toString() =\u003e min(15px, 10rem, 5em) */\n```\n\n## Features\n\n### polyfill\n\nThe `polyfill` function adds the following functions to `window` if they do not\nalready exist:\n\n- `CSS`\n- `CSSKeywordValue`\n- `CSSMathInvert`\n- `CSSMathMax`\n- `CSSMathMin`\n- `CSSMathProduct`\n- `CSSMathSum`\n- `CSSStyleValue`\n- `CSSUnitValue`\n- `StylePropertyMap`\n\nIt then adds the following functions to `CSS` if they do not already exist:\n\n- `number`\n- `percent`\n- `em`\n- `ex`\n- `ch`\n- `rem`\n- `vw`\n- `vh`\n- `vmin`\n- `vmax`\n- `cm`\n- `mm`\n- `in`\n- `pt`\n- `pc`\n- `px`\n- `Q`\n- `deg`\n- `grad`\n- `rad`\n- `turn`\n- `s`\n- `ms`\n- `Hz`\n- `kHz`\n- `dpi`\n- `dpcm`\n- `dppx`\n- `fr`\n\nThe new `CSSUnitValue` instances returned by these methods extend\n`CSSNumericValue`, which allow them to use the following methods:\n\n- `add`\n- `div`\n- `max`\n- `min`\n- `mul`\n- `sub`\n\nThe result of these transforms may be a new `CSSUnitValue` instance or a new\n`CSSMathProduct`, `CSSMathMax`, `CSSMathMin`, or `CSSMathSum` instance.\n\nThey all stringify back into compliant CSS.\n\n[npm-url]: https://www.npmjs.com/package/css-typed-om\n[npm-img]: https://img.shields.io/npm/v/css-typed-om.svg\n[cli-url]: https://travis-ci.org/csstools/css-typed-om\n[cli-img]: https://img.shields.io/travis/csstools/css-typed-om.svg\n\n[CSS Typed Object Model]: https://github.com/csstools/css-typed-om\n[CSS Typed OM Level 1]: https://drafts.css-houdini.org/css-typed-om-1/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsstools%2Fcss-typed-om","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcsstools%2Fcss-typed-om","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsstools%2Fcss-typed-om/lists"}