{"id":17233851,"url":"https://github.com/caseywebdev/cogs-transformer-local-css","last_synced_at":"2025-10-16T09:36:42.864Z","repository":{"id":32416417,"uuid":"35993471","full_name":"caseywebdev/cogs-transformer-local-css","owner":"caseywebdev","description":"A local CSS transformer for Cogs.","archived":false,"fork":false,"pushed_at":"2019-11-12T16:08:57.000Z","size":37,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-05T16:19:10.673Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/caseywebdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-21T05:44:46.000Z","updated_at":"2019-11-12T16:08:56.000Z","dependencies_parsed_at":"2022-07-12T11:00:35.238Z","dependency_job_id":null,"html_url":"https://github.com/caseywebdev/cogs-transformer-local-css","commit_stats":null,"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caseywebdev%2Fcogs-transformer-local-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caseywebdev%2Fcogs-transformer-local-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caseywebdev%2Fcogs-transformer-local-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caseywebdev%2Fcogs-transformer-local-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/caseywebdev","download_url":"https://codeload.github.com/caseywebdev/cogs-transformer-local-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245568578,"owners_count":20636803,"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-10-15T05:27:00.046Z","updated_at":"2025-10-16T09:36:37.825Z","avatar_url":"https://github.com/caseywebdev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# cogs-transformer-local-css\n\nA local CSS transformer for [Cogs] inspired by [this blog post] and works\nsimilarly to [this webpack loader].\n\nIf you haven't read [this blog post], you'll want to do that first. It's a quick\nread and it explains the benefits of freeing yourself from the grips of global,\ncollision-prone CSS class names.\n\nThis transformer takes CSS files in, inspects the contained class/id\nreferences, renames them uniquely and stores a map of your human-readable names\nin a simple JSON file.\n\nHere's what you'll want to add to your Cogs config...\n\n**cogs.js**\n\n```js\nmodule.exports = {\n  ...\n  pipe: [\n    ...\n    {\n      name: 'local-css',\n      only: 'src/my/css/**/*.css',\n\n      // All of the following options are...optional.\n      options: {\n\n        // The base directory to store CSS file paths relative to. Default: '.'\n        base: \"src/my/css\",\n\n        // In debug mode, classes will be prepended with their path and\n        // human-readable class name. This is highly recommended for development\n        // but should be disabled in production. Default: false\n        debug: true,\n\n        // The location to store the JSON class name map.\n        // Default: class-names.json\n        target: \"build/my-class-names-map.json\",\n\n        // Should not be necessary, but in the case of multiple projects with\n        // identical relative CSS file paths being used on the same page, simply\n        // insert a unique salt here to break the hash collision. Default: ''\n        salt: 'my-unique-salt',\n\n        // The length of the unique class identifier. The higher the number, the\n        // lower the chance for a hash collision. Default: 5\n        uidLength: 12,\n\n        // How long to wait (in milliseconds) after a change is made before\n        // saving the JSON class name map. Default: 500\n        debounce: 1000\n      }\n    }\n    ...\n  ]\n  ...\n}\n```\n\nSo after this is set up and I run cogs, and assuming I have I'll have a\n`build/my-class-names-map.json` file that looks something like...\n\n```json\n{\n  \"one/of/my/css/files\": {\n    \"one-of-my-classes\": \"abcdef123456\",\n    \"another-class\": \"zyx123abc456\"\n  }\n}\n```\n\nNow we can load/parse this file with anything that supports JSON (everything)\nand access the local-css-ified names while references the human-readable class\nnames we want, **all** without having to sweat global collisions.\n\n[![Build Status]](http://travis-ci.org/caseywebdev/cogs-transformer-local-css)\n\n[Cogs]: https://github.com/caseywebdev/cogs\n[Build Status]: https://secure.travis-ci.org/caseywebdev/cogs-transformer-local-css.png\n[this webpack loader]: https://github.com/webpack/css-loader\n[this blog post]: https://medium.com/seek-ui-engineering/the-end-of-global-css-90d2a4a06284\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaseywebdev%2Fcogs-transformer-local-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcaseywebdev%2Fcogs-transformer-local-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaseywebdev%2Fcogs-transformer-local-css/lists"}