{"id":23377984,"url":"https://github.com/beyondjs/styles","last_synced_at":"2025-04-08T04:49:58.965Z","repository":{"id":253717021,"uuid":"844285355","full_name":"beyondjs/styles","owner":"beyondjs","description":"A BeyondJS module for managing and processing legacy and modern styles, supporting dependency handling, HMR, and style registration.","archived":false,"fork":false,"pushed_at":"2024-08-19T00:20:50.000Z","size":7,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-14T03:34:40.679Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/beyondjs.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-08-18T23:35:52.000Z","updated_at":"2024-08-19T00:31:12.000Z","dependencies_parsed_at":"2024-08-19T02:53:12.079Z","dependency_job_id":null,"html_url":"https://github.com/beyondjs/styles","commit_stats":null,"previous_names":["beyondjs/styles"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondjs%2Fstyles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondjs%2Fstyles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondjs%2Fstyles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondjs%2Fstyles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beyondjs","download_url":"https://codeload.github.com/beyondjs/styles/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247779763,"owners_count":20994572,"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-12-21T18:33:42.192Z","updated_at":"2025-04-08T04:49:58.944Z","avatar_url":"https://github.com/beyondjs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `@beyond-js/styles`\n\nThis package provides tools for managing and processing styles within the BeyondJS framework, handling both legacy and\nmodern stylesheets. It integrates with other BeyondJS modules and supports features like dependency management and hot\nmodule replacement (HMR).\n\n## Features\n\n-   **Style Registry**: Register and retrieve styles based on bundle identifiers.\n-   **Legacy Style Support**: Compatibility with older BeyondJS applications.\n-   **HMR for Styles**: Automatically updates styles in development environments without full page reloads.\n-   **Dependency Management**: Recursively manages and applies styles for dependent bundles.\n\n## Installation\n\n```bash\nnpm install @beyond-js/styles\n```\n\n## Usage\n\n### Registering Styles\n\nStyles can be registered to the registry and later retrieved:\n\n```typescript\nimport { styles } from '@beyond-js/styles';\n\n// Register styles\nstyles.register('my-package/v1', '.my-class { color: red; }');\n\n// Retrieve registered styles\nconst registeredStyle = styles.get('my-package/v1');\n```\n\n### Handling Legacy Styles\n\nLegacy styles are processed and applied directly to the DOM:\n\n```typescript\nimport LegacyStyles from '@beyond-js/styles/legacy';\n\nconst legacyStyles = new LegacyStyles('my-bundle', '.old-class { font-size: 12px; }');\nlegacyStyles.appendToDOM();\n```\n\n### Working with V1 Styles\n\nV1 styles support versioning and are suitable for dynamic updates in a modern environment:\n\n```typescript\nimport { V1Styles } from '@beyond-js/styles/v1';\n\nconst v1Style = new V1Styles('my-bundle');\nconsole.log(v1Style.href); // Get the CSS URL with versioning\n```\n\n## API Overview\n\n### Registry\n\n-   `register(vspecifier: string, value: string): void`: Registers a style by its bundle specifier.\n-   `get(vspecifier: string): LegacyStyles | V1Styles | undefined`: Retrieves registered styles.\n-   `has(vspecifier: string): boolean`: Checks if styles are registered.\n\n### LegacyStyles\n\n-   `constructor(bundle: string, value: string)`: Initializes legacy styles.\n-   `appendToDOM(is?: string): void`: Appends the stylesheet to the document head.\n\n### V1Styles\n\n-   `constructor(resource: string)`: Initializes styles for V1 bundles.\n-   `get href(): string`: Returns the stylesheet URL with versioning.\n-   `change(): void`: Triggers a version increment for HMR.\n\n## License\n\nThis package is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeyondjs%2Fstyles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeyondjs%2Fstyles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeyondjs%2Fstyles/lists"}