{"id":16346838,"url":"https://github.com/matype/atcss","last_synced_at":"2025-03-20T23:32:51.915Z","repository":{"id":57172737,"uuid":"27765895","full_name":"matype/atcss","owner":"matype","description":"Annotations based CSS processor","archived":false,"fork":false,"pushed_at":"2015-09-17T02:30:17.000Z","size":270,"stargazers_count":63,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-06-01T06:12:50.506Z","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":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/matype.png","metadata":{"files":{"readme":"readme.markdown","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-12-09T12:39:09.000Z","updated_at":"2024-06-01T06:12:50.507Z","dependencies_parsed_at":"2022-08-24T14:41:07.709Z","dependency_job_id":null,"html_url":"https://github.com/matype/atcss","commit_stats":null,"previous_names":["morishitter/atcss","morishitter/acss","matype/atcss"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matype%2Fatcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matype%2Fatcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matype%2Fatcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matype%2Fatcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matype","download_url":"https://codeload.github.com/matype/atcss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244092755,"owners_count":20396866,"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-11T00:37:51.883Z","updated_at":"2025-03-20T23:32:51.654Z","avatar_url":"https://github.com/matype.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AtCSS [![Build Status](https://travis-ci.org/morishitter/atcss.svg)](https://travis-ci.org/morishitter/atcss)\n\n\u003cimg  width=\"150\" height=\"150\" src=\"http://morishitter.github.io/atcss/atcss.png\"\u003e\n\nAtCSS is annotations based CSS processing tool built with [PostCSS](https://github.com/postcss/postcss).\n\n## Installation\n\n```shell\n$ npm install -g atcss\n```\n\n## Example\n\n`input.css`:\n```css\n@import url(\"test/fixtures/import.css\");\n\n.base-1 {\n  /*\n   * @base\n   * @constant\n   */\n  font-size: 12px;\n  padding: 8px 16px;\n}\n\n.base-2 {\n  /*\n   * @base\n   */\n  color: red;\n}\n\n.class {\n  /*\n   * @use .base-1\n   */\n  background-color: green;\n}\n\n.too-long-and-ugly-selector-name {\n  /*\n   * @use .base-2\n   */\n  margin: 10px;\n}\n```\n\nProcessed with the following command:\n\n```\n$ atcss input.css output.css\n```\n\n`output.css` (Yields):\n\n```css\n/* Inline expand import.css */\n.imprt {\n  color: blue;\n}\n\n.class {\n  /*\n   * @base\n   * @constant\n   */\n  font-size: 12px;\n  padding: 8px 16px;\n}\n\n.class {\n  /*\n   * @use .base-1\n   */\n  background-color: green;\n}\n\n.too-long-and-ugly-selector-name {\n  /*\n   * @use .base-2\n   */\n  margin: 10px;\n  color: red;\n}\n```\n\n## Why Annotations\n\nAtCSS is 'Annotations based CSS processor'.\nUsing metadata to process CSS as annotations in comment, browsers can read prior code to be processed.\n\nSo, can devide styles for each environment (development or production).\n\nWe often make rules known as utility classes.\nFor example, `.pdt-10` as `padding-top: 10px`, `.bg-gray` as `background-color: #c3c9c9`.\nThere are some CSS frameworks has many utility classes like [BASSCSS](http://www.basscss.com/).\nThese are very usefull, because we can fine-tune design to suit our request.\n\nBut, utility classes are too low level to use as it is.\nBecause using execessive multiple classes do not change so much as inline style in HTML, and not aware of the semantic.\n\nUsing AtCSS, you can make semantic classes in production environment.\n\nEx:\n\n```css\n.btn {\n  /*\n   * @base\n   */\n\n  /* base button declarations */\n}\n\n.btn-blue {\n  /*\n   * @base\n   */\n\n  /* to color button red */\n}\n\n.btn-lg {\n  /*\n   * @base\n   */\n\n  /* to enlarge button */\n}\n\n.btn-next {\n  /*\n   * @use .btn, .btn-blue, .btn-lg\n   */\n\n   /* extend rules for button, you can define rules with semantic names */\n}\n```\n\n## Features\n\n### Constant block\nThe Rule sets are surrounded by `@start constant` and `@end constant` annotations cannot cascade.\n\n```css\n/* @start constant */\n.class {\n  color: red;\n}\n\n.class {\n  color: blue; /* Error */\n}\n\n.nested .class {\n  padding: 0; /* Error */\n}\n\n.child \u003e .class {\n    background-color: red; /* Error */\n}\n/* @end constant */\n```\n\n### High performance inheritance of other rules\nThe function to inherit other rules of AtCSS is defferent from `@extend` of existing CSS preprocessors like Sass.\n\nSass's `@extend` can only duplicate its selectors to base ones.\nFor example, when the declarations in base rules are too short or in media queries, or the selector inheritance destination rules is too long,\n duplicating its selector like Sass's `@extend` is not good consider file size.\n\nIn this case, the good behavior is expanding declarations in the base rule to inheritance destination rules.\n\nAtCSS provides the interface to inherit other rules, `@use`.\nAnd, AtCSS processor automatically choose the most appropriate method to inherit.\n\n`input.css`:\n```css\n.base-1 {\n  /*\n   * @base\n   */\n  font-size: 12px;\n  padding: 8px 16px;\n}\n\n.base-2 {\n  /*\n   * @base\n   */\n  color: red;\n}\n\n.class {\n  /*\n   * @use .base-1\n   */\n  background-color: green;\n}\n\n.too-long-and-ugly-selector-name {\n  /*\n   * @use .base-2\n   */\n  margin: 10px;\n}\n```\n\n`output.css` (Yields):\n\n```css\n.class {\n  /*\n   * @base\n   */\n  font-size: 12px;\n  padding: 8px 16px;\n}\n\n.class {\n  /*\n   * @use .base-1\n   */\n  background-color: green;\n}\n\n.too-long-and-ugly-selector-name {\n  /*\n   * @use .base-2\n   */\n  margin: 10px;\n  color: red;\n}\n```\n\n## Using plugins\n\n- [autoprefixer](https://github.com/postcss/autoprefixer)\n- [postcss-constant](https://github.com/morishitter/postcss-constant)\n- [postcss-annotation-extend](https://github.com/morishitter/postcss-annotation-extend)\n- [postcss-include](https://github.com/morishitter/postcss-include)\n- [postcss-import](https://github.com/postcss/postcss-import)\n- [postcss-important](https://github.com/morishitter/postcss-important)\n- [postcss-atcss-constant](https://github.com/morishitter/postcss-atcss-constant)\n- [postcss-atcss-inherit](https://github.com/morishitter/postcss-atcss-inherit)\n\n## Annotations syntax\n\n### `@constant`\n\nRule sets using `@constant`, cannot override the rule set with the same selector.\n\nEx:\n\n```css\n.class {\n  /*\n   * @constant\n   */\n   padding: 10px 14px;\n}\n\n.class {\n  padding: 0;\n}\n```\n\n**Run error**\n\n### `@base`\n\nRule sets using `@base`, is the rule sets that is inherited from the other ones.\n\nRules with `@base` do not output to css file after processing.\n\n```css\n.base-class {\n  /*\n   * @base\n   */\n   color: red;\n}\n```\n\n### `@extend`\n\nUsing `@extend`, you can inherit other rule sets defined with `@base`.\n\n`@extend` get one or more arguments, it's just selectors in `@base` rule sets.\n\n```css\n.base-1 {\n  /*\n   * @base\n   */\n   color: red;\n}\n\n.base-2 {\n  /*\n   * @base\n   * @constant\n   */\n   font-size: 14px;\n   padding: 12px 16px;\n}\n\n.class {\n  /*\n   * @extend .base-1, .base-2\n   */\n}\n```\n\nProcess above code. Yield:\n\n```css\n.class {\n  /*\n   * @base\n   */\n   color: red;\n}\n\n.class {\n  /*\n   * @base\n   * @constant\n   */\n   font-size: 14px;\n   padding: 12px 16px;\n}\n\n.class {\n  /*\n   * @extend .base-1, .base-2\n   */\n}\n```\n\n### `@include`\n\n```css\n.base-1 {\n  /*\n   * @base\n   */\n   color: red;\n}\n\n.base-2 {\n  /*\n   * @base\n   * @constant\n   */\n   font-size: 14px;\n   padding: 12px 16px;\n}\n\n.class {\n  /*\n   * @include .base-1, .base-2\n   */\n}\n```\n\nProcess above code. Yield:\n\n```css\n.class {\n  /*\n   * @include .base-1, .base-2\n   */\n   color: red;\n   font-size: 14px;\n   padding: 12px 16px;\n}\n```\n\n### `@important`\n\nUsing `@important`, you can manage properties have `!impotant` at one place.\n\n```css\n.class {\n  /*\n   * @important font-size, padding\n   */\n   color: red;\n   font-size: 12px;\n   padding: 12px;\n}\n```\n\nProcess above code. Yield:\n\n```css\n.class {\n  /*\n   * @important font-size, padding\n   */\n   color: red;\n   font-size: 12px !important;\n   padding: 12px !important;\n}\n```\n\nSee also [postcss-important](https://github.com/morishitter/postcss-important).\n\n### `@start constant` \u0026 `@end constant`\n\n### `@use`\n\n\n## Options\n\n```\n$ atcss --help\n```\n\n```\nUsage: atcss input-name output-name [options]\n\nOptions:\n\n  -c, --compress    use output compression\n  -V, --versions    output the version number\n  -h, --help        output usage information\n```\n\n## Option projects\n\n- [grunt-atcss](https://github.com/morishitter/grunt-atcss)\n- [gulp-atcss](https://github.com/morishitter/gulp-atcss)\n\n## License\n\nThe MIT License (MIT)\n\nCopyright (c) 2014 Masaaki Morishita\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatype%2Fatcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatype%2Fatcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatype%2Fatcss/lists"}