{"id":13630896,"url":"https://github.com/sndrs/postcss-atomised","last_synced_at":"2025-05-14T14:30:57.424Z","repository":{"id":57327790,"uuid":"59731950","full_name":"sndrs/postcss-atomised","owner":"sndrs","description":"Atomise standard CSS","archived":false,"fork":false,"pushed_at":"2019-10-17T13:20:05.000Z","size":154,"stargazers_count":86,"open_issues_count":2,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-08T22:36:53.290Z","etag":null,"topics":["atomic-css","css","postcss","proof-of-concept"],"latest_commit_sha":null,"homepage":"https://sndrs.github.io/atomised-css-repl","language":"JavaScript","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/sndrs.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":"2016-05-26T08:07:03.000Z","updated_at":"2024-03-13T05:24:29.000Z","dependencies_parsed_at":"2022-09-17T13:50:25.116Z","dependency_job_id":null,"html_url":"https://github.com/sndrs/postcss-atomised","commit_stats":null,"previous_names":["atomised-css/postcss-atomised"],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sndrs%2Fpostcss-atomised","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sndrs%2Fpostcss-atomised/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sndrs%2Fpostcss-atomised/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sndrs%2Fpostcss-atomised/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sndrs","download_url":"https://codeload.github.com/sndrs/postcss-atomised/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225297714,"owners_count":17452010,"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":["atomic-css","css","postcss","proof-of-concept"],"created_at":"2024-08-01T22:02:02.451Z","updated_at":"2024-11-19T04:46:24.676Z","avatar_url":"https://github.com/sndrs.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# postcss-atomised\n[![npm version](https://badge.fury.io/js/postcss-atomised.svg)](https://badge.fury.io/js/postcss-atomised) [![Build Status](https://travis-ci.org/sndrs/postcss-atomised.svg?branch=master)](https://travis-ci.org/sndrs/postcss-atomised) [![Coverage Status](https://coveralls.io/repos/github/sndrs/postcss-atomised/badge.svg?branch=master)](https://coveralls.io/github/sndrs/postcss-atomised?branch=master)  [![Dependency Status](https://dependencyci.com/github/sndrs/postcss-atomised/badge)](https://dependencyci.com/github/sndrs/postcss-atomised) [![Dependency Status](https://david-dm.org/sndrs/postcss-atomised.svg)](https://david-dm.org/sndrs/postcss-atomised) [![devDependency Status](https://david-dm.org/sndrs/postcss-atomised/dev-status.svg)](https://david-dm.org/sndrs/postcss-atomised#info=devDependencies)\n\n _This is probably not stable. It was initially developed for use on [the Guardian website](https://github.com/guardian/frontend), but it feels like it's the wrong solution to the problem of `bloat + complexity`. Leaving it here in case anyone finds it useful or we pick it up again._\n\n---\n\n[PostCSS](http://postcss.org) plugin that [atomises](http://www.creativebloq.com/css3/atomic-css-11619006) a standard set of CSS, and provides a json map from the original classes to the atomised ones.\n\nEnables you to write CSS in an insolated, super-modular fashion without worrying about the bloat of duplication (the only way you could serve a smaller stylesheet would be to use fewer styles).\n\n## Example\nTake your stylesheet…\n\n```css\n/* original.css */\n.one {\n    background-color: red;\n    margin: 1rem;\n}\n.two {\n    background-color: red;\n    margin-top: 1rem;\n}\n@media (min-width: 100px) {\n    .two:hover {\n        background-color: hotpink;\n    }\n}\n```\nPass it through the plugin…\n\n```javascript\n// load the original CSS file and atomise it\n\nimport {readFileSync} from 'fs';\n\nimport postcss from 'postcss';\nimport atomised from 'postcss-atomised';\n\nconst css = readFileSync('./original.css', 'utf8');\nconst options = {};\n\npostcss([atomised(options)]).process(css).then(result =\u003e {\n    // do something with `result`\n});\n```\n\n`result.css` is a String containing the atomised CSS:\n\n```css\n.a { background-color: red; }\n.b { margin-top: 1rem; }\n.c { margin-right: 1rem; }\n.d { margin-bottom: 1rem; }\n.e { margin-left: 1rem; }\n@media (min-width: 100px) {\n    .f:hover { background-color: hotpink; }\n}\n```\n\nYou now also have a file called `atomised-map.json` in `cwd`.\n\n```javascript\n// atomised-map.json\n{\n  \"one\": [\"a\", \"b\", \"c\",\" d\", \"e\"],\n  \"two\": [\"a\", \"b\", \"f\"]\n}\n```\n\nThis can be used to transform your templates.\n\n```html\n\u003cdiv class=\"one\"\u003e\u003c/div\u003e\n\u003cdiv class=\"two\"\u003e\u003c/div\u003e\n```\n\ninto…\n\n```html\n\u003cdiv class=\"a b c d e f\"\u003e\u003c/div\u003e\n\u003cdiv class=\"a c g h\"\u003e\u003c/div\u003e\n```\n\n## Options\nType: `Object` | `Null`\n\nNo options are required. By default, a file called `atomised-map.json` will be written to `cwd` containing the atomised JSON map.\n\n### `options.mapPath`\nType: (`String` | `Null`) _optional_\n\n\nAlternative location for the atomised JSON map to be saved. `null` will prevent the output being written to disk.\n\n### `options.mapHandler`\nType: (`Function`) _optional_\n\nCallback function that receives one arguement – the JSON map object.\n\n## Restrictions\n- only single class selectors can be atomised (other selectors will pass straight through)\n- multiple/duplicate and pseudo selectors/elements are fine\n\n| Selector  | Ok |\n|---|---|\n| `.a .b { }`  | :x: |\n| `.a.b { }`  | :x:  |\n| `a { }`  | :x:  |\n| `a b { }`  | :x:  |\n|  `#a { }` | :x:  |\n| `a[b] { }`  | :x:  |\n| `a \u003e b { }`  | :x:  |\n| `a + b { }`  | :x:  |\n| `a ~ b { }`  | :x:  |\n| `*`  | :x:  |\n| `.a:b { }`  | :white_check_mark: |\n| `.a, .b { }`  | :white_check_mark:  |\n| `.a { } .a { }`  | :white_check_mark:  |\n| `.a:hover { }`  | :white_check_mark:  |\n\n## Development\nRun `npm start` to run the test runner in watch mode, or `npm test` for a one-off.\nNode 6 or greater is needed for development.\n\n## Node.js 0.*\nNode 4 or greater is needed to use the plugin.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsndrs%2Fpostcss-atomised","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsndrs%2Fpostcss-atomised","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsndrs%2Fpostcss-atomised/lists"}