{"id":22320242,"url":"https://github.com/mondial7/splattercss","last_synced_at":"2025-03-26T04:28:55.647Z","repository":{"id":57367580,"uuid":"119297466","full_name":"mondial7/splattercss","owner":"mondial7","description":"Support library for css scoping. Splatter your css into inline-styles. Available on NPM.","archived":false,"fork":false,"pushed_at":"2024-04-05T22:27:16.000Z","size":163,"stargazers_count":0,"open_issues_count":11,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-14T09:05:01.251Z","etag":null,"topics":["css","css-inject","dom","inline-styles","styling-and-shadow-dom"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/splattercss","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/mondial7.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":"2018-01-28T21:01:25.000Z","updated_at":"2024-07-25T17:51:23.291Z","dependencies_parsed_at":"2024-07-25T18:10:04.401Z","dependency_job_id":null,"html_url":"https://github.com/mondial7/splattercss","commit_stats":{"total_commits":33,"total_committers":4,"mean_commits":8.25,"dds":0.5151515151515151,"last_synced_commit":"2e960f6705f9d5db5ecc98ce506a4f3a62b8e8d2"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mondial7%2Fsplattercss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mondial7%2Fsplattercss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mondial7%2Fsplattercss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mondial7%2Fsplattercss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mondial7","download_url":"https://codeload.github.com/mondial7/splattercss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245588511,"owners_count":20640139,"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","css-inject","dom","inline-styles","styling-and-shadow-dom"],"created_at":"2024-12-04T00:12:58.721Z","updated_at":"2025-03-26T04:28:55.614Z","avatar_url":"https://github.com/mondial7.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Splatter Css 🥗\n\nJS library to split and splatter your CSS rules into the style attribute of each related DOM element.\n\nThe idea first came as a trial for an alternative to ShadyCss while waiting for fully ShadowDom v1 support.\n\n## Install\n---\n```bash\nnpm install splattercss\n```\n```js\n// browser\n\u003cscript src=\"./node_modules/build/splattercss.min.js\"\u003e\u003c/script\u003e\n\n// ES import\nimport SplatterCss from 'splattercss/index'\n\n// Node\n// NOTE: you might need some DOM enabler\n// like https://www.npmjs.com/package/global-jsdom\nconst SplatterCss = require('splattercss')\n\n```\n\n## Usage\n---\n\n```html\n\u003cdiv id=\"wrapper\"\u003e\n  \u003cp class=\"red\"\u003e\u003c/p\u003e\n  \u003cp class=\"green\"\u003e\u003c/p\u003e\n\u003c/div\u003e\n```\n```js\nimport SplatterCss from 'splattercss'\n// Get HTML and pass it as String\n// together with the styles to apply\nconst node = document.getElementById('wrapper')\nconst _styledHtml = SplatterCss.mesh(`\n  .red { color: red; }\n  .green { color: green; }\n`, node.innerHTML)\n// Update with the new HTML\nnode.innerHTML = _styledHtml\n```\nResult\n```html\n\u003cdiv id=\"wrapper\"\u003e\n  \u003cp class=\"red\" style=\"color: red;\"\u003e\u003c/p\u003e\n  \u003cp class=\"green\" style=\"color: green;\"\u003e\u003c/p\u003e\n\u003c/div\u003e\n```\n\n## API\n\n---\n`.mesh()` splatters the CSS in the HTML provided and returns the updated HTML as String. It will parse the CSS and distributes the styles in the HTML by matching the CSS selectors. It's combination of the two APIs described below.\n\nExample\n```js\nconst newHTML = SplatterCss.mesh(`\n  .red { color: red; }\n  .green { color: green; }\n`,`\n  \u003cp class=\"red\"\u003e\u003c/p\u003e\n  \u003cp class=\"green\"\u003e\u003c/p\u003e\n`)\n\n// newHTML = `\n//  \u003cp class=\"red\" style=\"color: red;\"\u003e\u003c/p\u003e\n//  \u003cp class=\"green\" style=\"color: green;\"\u003e\u003c/p\u003e\n// `\n```\n\n---\n\n`.parse()` will parse a CSS string and build an array of Objects\n```js\n// @return\n[ { selector:String, rules:String }, ... ]\n```\n\n**Note** It's not a linter tool. Wrong syntax CSS will be parsed anyways with no rising Exceptions. Eventually, with the possibility of loosing some rules on the way.\n\nExample\n```js\nconst cssArr = SplatterCss.parse(`\n  .red { color: red; }\n  .green { color: green; }\n`)\n\n// cssArr = [\n//   {\n//     selector: '.red',\n//     rules: 'color: red;'\n//   },\n//   {\n//     selector: '.green',\n//     rules: 'color: green;'\n//   }\n// ]\n```\n---\n`.inject()` intermediary function that accepts the Array result of `.parse()` and the DOM as a String. It will injects the styles defined in the given DOM string and return the modified string.\n\nExample\n```js\nconst cssArr = [\n  {\n    selector: '.red',\n    rules: 'color: red;'\n  },\n  {\n    selector: '.green',\n    rules: 'color: green;'\n  }\n]\nconst newHTML = SplatterCss.inject(cssArr, `\n  \u003cp class=\"red\"\u003e\u003c/p\u003e\n  \u003cp class=\"green\"\u003e\u003c/p\u003e\n`)\n\n// newHTML = `\n//   \u003cp class=\"red\" style=\"color: red;\"\u003e\u003c/p\u003e\n//   \u003cp class=\"green\" style=\"color: green;\"\u003e\u003c/p\u003e\n// `\n```\n\n\n## License\n---\nMIT License (MIT)\n\n## Contributing\n---\nFeel free to contribute and submit an issue or a pull request for any bug or enhancements.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmondial7%2Fsplattercss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmondial7%2Fsplattercss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmondial7%2Fsplattercss/lists"}