css.mjs 888 B

1234567891011121314151617181920212223242526272829303132
  1. let pendingRules = {};
  2. let style = null;
  3. const css = {
  4. set: (selector, values) => {
  5. pendingRules[selector] = values;
  6. },
  7. commit: () => {
  8. if (!style) {
  9. style = document.createElement("style");
  10. style.id = "motion-view";
  11. }
  12. let cssText = "";
  13. for (const selector in pendingRules) {
  14. const rule = pendingRules[selector];
  15. cssText += `${selector} {\n`;
  16. for (const [property, value] of Object.entries(rule)) {
  17. cssText += ` ${property}: ${value};\n`;
  18. }
  19. cssText += "}\n";
  20. }
  21. style.textContent = cssText;
  22. document.head.appendChild(style);
  23. pendingRules = {};
  24. },
  25. remove: () => {
  26. if (style && style.parentElement) {
  27. style.parentElement.removeChild(style);
  28. }
  29. },
  30. };
  31. export { css };