{"id":22499171,"url":"https://github.com/bansheetech/agnosticstyles","last_synced_at":"2025-10-15T12:09:37.853Z","repository":{"id":257817247,"uuid":"870360803","full_name":"BansheeTech/AgnosticStyles","owner":"BansheeTech","description":"AgnosticStyles is a JavaScript utility function that safely applies CSS styles or class changes  to a DOM element if it exists. Logs or warns based on customizable debug flags.","archived":false,"fork":false,"pushed_at":"2024-10-09T23:43:49.000Z","size":6,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-10-09T07:35:11.965Z","etag":null,"topics":["agnostic-styles","css","css-modules","css-utilites","css-utility","dom-check","dom-events","inline-css","inline-editing","inline-styles","style-manager","tailwind","tailwindcss","utility-library","vanilla-javascript","vanillajs"],"latest_commit_sha":null,"homepage":"https://github.com/BansheeDevelopment/AgnosticStyles","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/BansheeTech.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-09T22:40:43.000Z","updated_at":"2025-04-15T16:24:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"debd8c9c-55c2-4487-bb1c-1cd8a0b193f9","html_url":"https://github.com/BansheeTech/AgnosticStyles","commit_stats":null,"previous_names":["bansheedevelopment/agnosticstyles","banshee-technologies/agnosticstyles","bansheetech/agnosticstyles"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/BansheeTech/AgnosticStyles","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BansheeTech%2FAgnosticStyles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BansheeTech%2FAgnosticStyles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BansheeTech%2FAgnosticStyles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BansheeTech%2FAgnosticStyles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BansheeTech","download_url":"https://codeload.github.com/BansheeTech/AgnosticStyles/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BansheeTech%2FAgnosticStyles/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279077248,"owners_count":26098234,"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","status":"online","status_checked_at":"2025-10-15T02:00:07.814Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["agnostic-styles","css","css-modules","css-utilites","css-utility","dom-check","dom-events","inline-css","inline-editing","inline-styles","style-manager","tailwind","tailwindcss","utility-library","vanilla-javascript","vanillajs"],"created_at":"2024-12-06T22:11:31.213Z","updated_at":"2025-10-15T12:09:37.849Z","avatar_url":"https://github.com/BansheeTech.png","language":"JavaScript","readme":"# AgnosticStyles\n\nAgnosticStyles is a lightweight utility that safely applies CSS styles or class changes to a DOM element if it exists. It allows for flexible manipulation of styles and classes while ensuring the element is present, helping avoid runtime errors. Additionally, it supports optional logging and warnings through customizable debug flags.\n\n## Installation\n\nTo install AgnosticStyles using npm, run the following command:\n\n```bash\nnpm install agnostic-styles\n```\n\n## Usage\n\n### Import and Initialization\n\nTo use AgnosticStyles, import the `agnosticStyles` function and configure it with the desired debug options.\n\n```javascript\nimport { agnosticStyles } from 'agnostic-styles';\n\nwindow.agnosticStyles = agnosticStyles({ debugLog: true, debugWarn: false });\n```\n\n### Example: Adding Classes\n\n```javascript\nwindow.safeClassAdd = window.agnosticStyles('addClass', 'rounded-full');\nsafeClassAdd('element-id');  // Adds the 'rounded-full' class to the element with ID 'element-id'\n```\n-or-\n```javascript\nwindow.safeClassAdd = window.agnosticStyles('addClass', ['someClass', 'anotherClass', 'moreClasses']);\nsafeClassAdd('element-id');  // Adds 'someClass', 'anotherClass', and 'moreClasses' classes to the element with ID 'element-id'\n```\n\n### Example: Removing Classes\n\n```javascript\nwindow.safeClassRemove = window.agnosticStyles('removeClass', 'rounded-full');\nsafeClassRemove('element-id');  // Removes the 'rounded-full' class from the element with ID 'element-id'\n```\n-or-\n```javascript\nwindow.safeClassAdd = window.agnosticStyles('removeClass', ['someClass', 'anotherClass', 'moreClasses']);\nsafeClassAdd('element-id');  // Removes 'someClass', 'anotherClass', and 'moreClasses' classes from the element with ID 'element-id'\n```\n\n### Example: Setting Inline Styles\n\n```javascript\nwindow.safeStyleChange = window.agnosticStyles('setStyle', { backgroundColor: 'red' });\nsafeStyleChange('element-id');  // Sets the background color to red on the element with ID 'element-id'\n```\n-or-\n```javascript\nwindow.safeStyleChange = window.agnosticStyles('setStyle', { borderRadius: '50px' });\nsafeStyleChange('element-id');  // Sets border-radius to 50px on the element with ID 'element-id'\n```\n\n### Example: Removing Inline Styles\n\n```javascript\nwindow.safeStyleRemove = window.agnosticStyles('removeStyle', ['background-color']);\nsafeStyleRemove('element-id');  // Removes the background color style from the element with ID 'element-id'\n```\n-or-\n```javascript\nwindow.safeStyleRemove = window.agnosticStyles('removeStyle', ['border-radius']);\nsafeStyleRemove('element-id');  // Removes the border-radius style from the element with ID 'element-id'\n```\n\n## Debug Options\n\nYou can enable or disable debugging logs and warnings using the following flags:\n- **`debugLog`**: When set to `true`, it logs informational messages to the console (`console.log`).\n- **`debugWarn`**: When set to `true`, it shows warning messages in the console (`console.warn`).\n\nBy default, both options are disabled.\n\n### Example Configurations:\n\nShow only debug logs:\n```javascript\nwindow.agnosticStyles = agnosticStyles({ debugLog: true, debugWarn: false });\n```\n\nShow only warnings:\n```javascript\nwindow.agnosticStyles = agnosticStyles({ debugLog: false, debugWarn: true });\n```\n\nDisable all logs and warnings:\n```javascript\nwindow.agnosticStyles = agnosticStyles;\n```\n-or-\n```javascript\nwindow.agnosticStyles = agnosticStyles({ debugLog: false, debugWarn: false });\n```\n\n## Supported Actions\n\n### `addClass`\nAdds one or more classes to the specified element.\n\n#### Example:\n```javascript\nagnosticStyles('addClass', 'class-name');\nagnosticStyles('addClass', ['class-one', 'class-two']);\n```\n\n### `removeClass`\nRemoves one or more classes from the specified element.\n\n#### Example:\n```javascript\nagnosticStyles('removeClass', 'class-name');\nagnosticStyles('removeClass', ['class-one', 'class-two']);\n```\n\n### `setStyle`\nSets one or more inline CSS styles on the specified element.\n\n#### Example:\n```javascript\nagnosticStyles('setStyle', { backgroundColor: 'blue', color: 'white' });\n```\n\n### `removeStyle`\nRemoves one or more inline CSS styles from the specified element.\n\n#### Example:\n```javascript\nagnosticStyles('removeStyle', ['background-color', 'color']);\nagnosticStyles('removeStyle', ['border-radius']);\n```\n\n## What You Cannot Do\n\n- **Manipulate non-existent elements**: If the element doesn't exist, the action will be skipped, and a warning may be shown depending on debug options.\n- **Unsupported actions**: If an unsupported action is passed, **AgnosticStyles** will log a warning, and the operation will not proceed.\n\n## License\n\nAgnosticStyles is licensed under the MIT License. See the LICENSE file for more details.\n\n## Issues\n\nIf you encounter any issues, feel free to report them [here](https://github.com/BansheeDevelopment/AgnosticStyles/issues).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbansheetech%2Fagnosticstyles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbansheetech%2Fagnosticstyles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbansheetech%2Fagnosticstyles/lists"}