{"id":13725530,"url":"https://github.com/tomhodgins/cssomtools","last_synced_at":"2026-01-20T19:36:13.121Z","repository":{"id":152546061,"uuid":"183275591","full_name":"tomhodgins/cssomtools","owner":"tomhodgins","description":"The 'jQuery-for-the-CSSOM', a library for working with CSS stylesheets and rules in the browser","archived":false,"fork":false,"pushed_at":"2019-07-14T18:24:54.000Z","size":15,"stargazers_count":9,"open_issues_count":1,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-06T22:48:25.411Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/tomhodgins.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2019-04-24T17:24:05.000Z","updated_at":"2024-02-14T00:40:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"4cd5a3da-152e-4fda-9010-216314abe603","html_url":"https://github.com/tomhodgins/cssomtools","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/tomhodgins%2Fcssomtools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomhodgins%2Fcssomtools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomhodgins%2Fcssomtools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomhodgins%2Fcssomtools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomhodgins","download_url":"https://codeload.github.com/tomhodgins/cssomtools/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224645411,"owners_count":17346151,"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-03T01:02:26.253Z","updated_at":"2026-01-20T19:36:13.090Z","avatar_url":"https://github.com/tomhodgins.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# cssomtools\n\nThe 'jQuery-for-the-CSSOM', a library for working with CSS stylesheets and rules in the browser\n\n## About\n\nThis library contains functions to abstract working with [`document.styleSheets`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/styleSheets) and the [`CSSStyleSheet`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet) and [`CSSRule`](https://developer.mozilla.org/en-US/docs/Web/API/CSSRule) objects in [CSSOM](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model), the CSS Object Model, which is the in-memory representation of all of the parsed CSS that the browser knows about.\n\nSimilar to how jQuery abstracts DOM operations for working with HTML, this library aims to provide a common set of functions that can provide high-level abstraction for working with CSS as stylesheets, rules, and strings to find, filter, manipulate, and work with CSS in the browser with JavaScript more easily.\n\n## Usage\n\nThis library is made available in the following 3 formats:\n\n- [index.js](./index.js) is an ES module that exports the functions individually, as well as a default object containing each function\n- [index.es5.js](./index.es5.js) is an ES5 version of the library that exposes the library as `cssomtools` and `ç`\n- [index.es5.min.js](./index.es5.min.js) is a minified version of `index.es5.js`\n\nTo use the ES5 versions you need to either include the JavaScript inline in your own code, or by linking to the script in HTML:\n\n```html\n\u003cscript src=./index.es5.min.js\u003e\u003c/script\u003e\n```\n\nTo use the ES6 version you can `import` either individual functions like the following example:\n\n```js\nimport {parse, process, stringify} from './index.js'\n\nconsole.log(\n  stringify(\n    process(\n      parse('a {} b {} c {}'),\n      rule =\u003e rule.selectorText = `.demo ${rule.selectorText}`\n    )\n  )\n)\n```\n\nOr by importing the default export, which is an object containing all of the library functions:\n\n```js\nimport cssomtools from './index.js'\n\nconsole.log(\n  cssomtools.stringify(\n    cssomtools.process(\n      cssomtools.parse('a {} b {} c {}'),\n      rule =\u003e rule.selectorText = `.demo ${rule.selectorText}`\n    )\n  )\n)\n```\n\nThis library is also published on npm as `cssomtools`: https://www.npmjs.com/package/cssomtools\n\n## Library Functions\n\n### Parse\n\n```js\nparse(string)\n```\n\nThe `parse()` function takes a string and returns a `CSSStyleSheet` object containing all successfully parsed CSS from the input string.\n\nUse this function when you want to parse CSS from a string. By default, running `parse()` with no argument will return an empty `CSSStyleSheet` object.\n\n### Process\n\n```js\nprocess(object, callback)\n```\n\nThe `process()` function takes either a `CSSStyleSheet` or `CSSRule` object, or an array `[]` containing them, and processes each `CSSRule` found inside with the supplied `callback` function.\n\nUse this function when you want to run JS code on every rule inside a stylesheet, no matter how deeply they are nested (rules like `@media` rules can contain CSS rules of their own, etc).\n\n### Add\n\n```js\nadd(object, stylesheet*, index*)\n```\n\nThe `add()` function takes either a `CSSStyleSheet` or `CSSRule` object, or an array `[]` containing them, or a string containing one or more CSS rules, and optionally also accepts a `stylesheet` parameter which can be used to supply the CSSStyleSheet the rules should be added to. Otherwise the function will attempt to append them into the last stylesheet in CSSOM. You can also optionally supply an index of the location of where in the stylesheet's `cssRules` you would like these rules inserted. This function builds on top of the built in [CSSStyleSheet.insertRule()](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule) for more information about how the index works.\n\nUse this function when you want to add CSS rules to the CSSOM.\n\n### Remove\n\n```js\nremove(object)\n```\n\nThe `remove()` function takes either a `CSSStyleSheet` or `CSSRule` object, or an array `[]` containing them and will attempt to remove any rule found inside from either its `parentRule` if it's the child of another `CSSRule`, or remove it from its `parentStyleSheet` if it's the child of a `CSSStyleSheet`.\n\nUse this function when you want to remove CSS rules from the CSSOM.\n\n### Stringify\n\n```js\nstringify(object)\n```\n\nThe `stringify()` function takes either a `CSSStyleSheet` or `CSSRule` object, or an array `[]` containing them, and will return a string containing all of the CSS contained within the objects passed into it.\n\nUse this function when you want to convert any part of CSSOM into a string. By default running `srtingify()` with no argument will stringify the output of `all()`.\n\n### All\n\n```js\nall()\n```\n\nThe `all()` function returns all `CSSRule` objects you're allowed (by CORS) to access.\n\nUse this function when you want to get all `CSSRule` objects you're allowed to read and access.\n\n### Filter\n\n```js\nfilter(stylesheet, test)\n```\n\nThe `filter()` function takes a `CSSStyleSheet` object or an object that looks like one (i.e. has a `cssRules` property that can be treated as an array and contains `CSSRule` objects) and a test function written in JavaScript, and will return an object that looks like a stylesheet `{cssRules: []}` containing every `CSSRule` object that passed the test function.\n\nUse this when you want to filter out and find rules matching a certain criteria from CSSOM.\n\n\u003e Note: Should this take lists of stylesheet objects?\n\n\u003e Note: Should the default parameter be `all()`?\n\n### Selector\n\n```js\nselector(string, option*, list*)\n```\n\nThe `selector()` function takes a `string` and finds rules with matching `selectorText`. The `option` parameter can be used to toggle whether the match is strict or not. Setting the option to `true` will require the `selectorText` to match the string exactly, if it's not declared or `false` it will match any `selectorText` simply containing the supplied `string` anywhere. The last parameter is also optional, a `CSSStyleSheet` object or array containing stylesheets inside which you want to search. If no `list` is supplied it will search through all `CSSRules` found by the `all()` function.\n\nUse this function when you want to find `CSSRule` objects with `selectorText` matching a string.\n\n### Property\n\n```js\nproperty(string, option*, list*)\n```\n\nThe `property()` function takes a `string` and finds rules containing matching properties. The `option` parameter can be used to toggle whether the match is strict or not. Setting the option to `true` will require the property name to match the string exactly, if it's not declared or `false` it will match any property name simply containing the supplied `string` anywhere. The last parameter is also optional, a `CSSStyleSheet` object or array containing stylesheets inside which you want to search. If no `list` is supplied it will search through all `CSSRules` found by the `all()` function.\n\nUse this function when you want to find `CSSRule` objects with properties matching a string.\n\n### Value\n\n```js\nvalue(string, option*, list*)\n```\n\nThe `selector()` function takes a `string` and finds rules with matching values declared. The `option` parameter can be used to toggle whether the match is strict or not. Setting the option to `true` will require the value to match the string exactly, if it's not declared or `false` it will match any value simply containing the supplied `string` anywhere. The last parameter is also optional, a `CSSStyleSheet` object or array containing stylesheets inside which you want to search. If no `list` is supplied it will search through all `CSSRules` found by the `all()` function.\n\nUse this function when you want to find `CSSRule` objects with values matching a string.\n\n### Query\n\n```js\nquery(string, option*, list*)\n```\n\nThe `selector()` function takes a `string` and finds media rules with matching `mediaText`. The `option` parameter can be used to toggle whether the match is strict or not. Setting the option to `true` will require the `mediaText` to match the string exactly, if it's not declared or `false` it will match any `mediaText` simply containing the supplied `string` anywhere. The last parameter is also optional, a `CSSStyleSheet` object or array containing stylesheets inside which you want to search. If no `list` is supplied it will search through all `CSSRules` found by the `all()` function.\n\nUse this function when you want to find `CSSMediaRule` objects with `mediaText` matching a string.\n\n## Demos\n\nDemos and helper functions for CSSOMTools can be found in this collection on CodePen: https://codepen.io/collection/AEEJrb/","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomhodgins%2Fcssomtools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomhodgins%2Fcssomtools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomhodgins%2Fcssomtools/lists"}