{"id":24494700,"url":"https://github.com/bwca/package_css-types","last_synced_at":"2025-03-15T04:42:03.627Z","repository":{"id":47614247,"uuid":"262128911","full_name":"Bwca/package_css-types","owner":"Bwca","description":"Typed css classes!","archived":false,"fork":false,"pushed_at":"2021-08-21T18:28:41.000Z","size":514,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-15T10:40:01.475Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/Bwca.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}},"created_at":"2020-05-07T18:30:24.000Z","updated_at":"2024-02-03T16:19:34.000Z","dependencies_parsed_at":"2022-07-21T16:45:07.512Z","dependency_job_id":null,"html_url":"https://github.com/Bwca/package_css-types","commit_stats":null,"previous_names":["bwca/css-types"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bwca%2Fpackage_css-types","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bwca%2Fpackage_css-types/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bwca%2Fpackage_css-types/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bwca%2Fpackage_css-types/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Bwca","download_url":"https://codeload.github.com/Bwca/package_css-types/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243685528,"owners_count":20330980,"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":"2025-01-21T20:16:54.097Z","updated_at":"2025-03-15T04:42:03.607Z","avatar_url":"https://github.com/Bwca.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Css Types\n\n## What is this package for\n\nThe package provides a convenient way to create a typescript enum for css classes in `*.css` and `*.scss` files for later use in typescript or javascript files. It does not require a bundler and can be used on directories or separate files.\n\n## Usage\n\nInstall it from npm using your preferred package manager, i.e.:\n\n```\nnpm install css-types --save-dev\n```\n\nCreate a custom script in your package.json file:\n\n```\n\"scripts\": {\n    \"css-types\": \"css-types\"\n}\n```\n\nThen run it:\n\n```\nnpm run css-types\n```\n\nYou can also set it to watch mode:\n\n```\n\"scripts\": {\n    \"css-types\": \"css-types --watch\"\n}\n```\n\nBy default `css-types` looks for the `src` directory and walks it, creating typescript enums for every `*.css` and `*.scss` file it finds. To set a different directory for crawling simply pass its relative path:\n\n```\n\"scripts\": {\n    \"css-types\": \"css-types --watch --directory=src/css\"\n},\n```\n\n## What does it do\n\nIt creates a typescript a `*.style.ts` file containing enum with all style classes found in the stylesheet file as enum values `*.css` and `*.scss` file will receive.\n\nFor example, provided you have a stylesheet `main.scss` with the following contents:\n\n```\n// Hypothetical main.css file.\n.content {\n  color: pink;\n  .ads {\n    background: red;\n  }\n}\n```\n\nPerforming `css-types` command will create `main.style.ts` file with the following enum:\n\n```\nexport enum Main {\n  Content = 'content',\n  Ads = 'ads',\n}\n```\n\nNow it can be used in `ts`:\n\n```\nimport { Main } from './css/main.style';\n\ndocument.getElementById('some-element-id').classList.add(Main.Content);\n```\n\nNo need to worry about accidental renaming of css class that is used somewhere - as soon as types are updated and enum keys change, it will trigger an error if non-existant css classes are in use somewhere.\n\n## Plans for future\n\n- ~~add --watch flag for auto-updates of typings;~~ added in version 1.1.0.\n- add enumeration for IDs;\n- add support for LESS.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbwca%2Fpackage_css-types","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbwca%2Fpackage_css-types","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbwca%2Fpackage_css-types/lists"}