{"id":18457227,"url":"https://github.com/accurat/postcss-fuss","last_synced_at":"2025-04-08T05:33:23.666Z","repository":{"id":46933970,"uuid":"84254140","full_name":"accurat/postcss-fuss","owner":"accurat","description":"PostCSS plugin to define and compose Functional CSS rules.","archived":false,"fork":false,"pushed_at":"2022-12-06T17:34:37.000Z","size":284,"stargazers_count":9,"open_issues_count":15,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-24T14:57:56.985Z","etag":null,"topics":["css","functional","functional-css","postcss-plugin"],"latest_commit_sha":null,"homepage":"","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/accurat.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2017-03-07T22:51:01.000Z","updated_at":"2020-08-05T09:03:00.000Z","dependencies_parsed_at":"2023-01-24T10:32:01.897Z","dependency_job_id":null,"html_url":"https://github.com/accurat/postcss-fuss","commit_stats":null,"previous_names":["caesarsol/postcss-fuss"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/accurat%2Fpostcss-fuss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/accurat%2Fpostcss-fuss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/accurat%2Fpostcss-fuss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/accurat%2Fpostcss-fuss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/accurat","download_url":"https://codeload.github.com/accurat/postcss-fuss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247785864,"owners_count":20995641,"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":["css","functional","functional-css","postcss-plugin"],"created_at":"2024-11-06T08:13:46.944Z","updated_at":"2025-04-08T05:33:23.309Z","avatar_url":"https://github.com/accurat.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PostCSS Fuss [![Build Status][ci-img]][ci]\n\n[ci-img]:  https://travis-ci.org/caesarsol/postcss-fuss.svg\n[ci]:      https://travis-ci.org/caesarsol/postcss-fuss\n\n\u003e [PostCSS](https://github.com/postcss/postcss) plugin to define and compose\nFunctional CSS rules.\n\n[![NPM](https://nodei.co/npm/postcss-fuss.png?compact=true)](https://npmjs.org/package/postcss-fuss)\n\nLots of functional CSS frameworks are emerging in the last days, but none of\nthem offers a library of functions to create and manipulate the mono-definition\nrules.\n\nAs a result:\n\n1. Your stylesheets are full of unused rules;\n2. You have to manually write every responsive rule or color you want to add to the default set.\n\nUsing [Tachyons](http://tachyons.io/) for example I often have to define at least three rules for each new color:\n\n- `.red { color: red }`\n- `.bg-red { background-color: red }`\n- `.b--red { border-color: red }`\n\nAnd I'm not even starting to talk about responsive rules!\n\nBecause the more lazy you are the better developer you get, I'd like to DRY these\ndeclarations out by using the sacred concept of **functions**.\n\nEnters *FUSS*, which stands for **FU**nctional **S**tyle **S**heets.\n\n#### Input:\n\n```sass\n@fuss color(blue, #00f);\n@fuss color-variants() {\n  .gray { color: #ccc }\n}\n@fuss color-states() {\n  .bg-yellow { background: #ff0 }\n}\n@fuss responsive() {\n  .w-50 { width: 50% }\n}\n```\n\nThe functions you can use with `@fuss` are defined in Javascript and passed in the plugin options.\nThis gives you the greater flexibility, and avoids the need to have to invent/build/learn another language.\nSee [fuss-functions](../blob/master/fuss-functions.js) for the definitions of these functions.\n\n#### Output:\n\n```css\n/* color(blue, #00f) */\n.blue { color: #00f }\n.bg-blue { background-color: #00f }\n.b--blue { border-color: #00f }\n\n/* color-variants() */\n.gray { color: #ccc }\n.gray-light { color: color-mod(#ccc lightness(+10%)) }\n.gray-dark { color: color-mod(#ccc lightness(-10%)) }\n\n/* color-states() */\n.bg-yellow { background: #ff0 }\n.hover-bg-yellow:hover { background: #ff0 }\n.active-bg-yellow:hover:active { background: #ff0 }\n.focus-bg-yellow:focus { background: #ff0 }\n\n/* responsive() */\n.w-50 { width: 50% }\n@media screen and (min-width: 480px) and (max-width: 1024px) { .w-50-m { width: 50% } }\n@media screen and (min-width: 1024px) { .w-50-l { width: 50% } }\n```\n\n**NOTE**: The color-variants functions outputs [spec-compliant](https://www.w3.org/TR/css-color-4/#funcdef-color-mod) code containing the color-mod() function, but this isn't supported in any browser yet, so you will need to use the [postcss-color-mod-function](https://github.com/jonathantneal/postcss-color-mod-function) postcss plugin to work.\n\nThe real power comes with the block utilities, which can be combined with all the other FUSS functions. For example you can combine the color functions to choose the color only once, and have every class available.\n\n#### Input:\n\n```sass\n@fuss color-states() {\n  @fuss color-variants() {\n    @fuss color(accent, #BADA55);\n  }\n}\n```\n\n#### Output:\n\n```css\n/* color-states() */\n\n\n/* color-variants() */\n\n/* color(accent, #BADA55) */\n.accent { color: #BADA55 }\n.bg-accent { background-color: #BADA55 }\n.b--accent { border-color: #BADA55 }\n\n/* color(accent, #BADA55) */\n.accent-light { color: color-mod(#BADA55 lightness(+10%)) }\n.accent-dark { color: color-mod(#BADA55 lightness(-10%)) }\n.bg-accent-light { background-color: color-mod(#BADA55 lightness(+10%)) }\n.bg-accent-dark { background-color: color-mod(#BADA55 lightness(-10%)) }\n.b--accent-light { border-color: color-mod(#BADA55 lightness(+10%)) }\n.b--accent-dark { border-color: color-mod(#BADA55 lightness(-10%)) }\n\n\n/* color-variants() */\n\n/* color(accent, #BADA55) */\n.hover-accent:hover { color: #BADA55 }\n.active-accent:hover:active { color: #BADA55 }\n.focus-accent:focus { color: #BADA55 }\n.hover-bg-accent:hover { background-color: #BADA55 }\n.active-bg-accent:hover:active { background-color: #BADA55 }\n.focus-bg-accent:focus { background-color: #BADA55 }\n.hover-b--accent:hover { border-color: #BADA55 }\n.active-b--accent:hover:active { border-color: #BADA55 }\n.focus-b--accent:focus { border-color: #BADA55 }\n\n/* color(accent, #BADA55) */\n.hover-accent-light:hover { color: color-mod(#BADA55 lightness(+10%)) }\n.active-accent-light:hover:active { color: color-mod(#BADA55 lightness(+10%)) }\n.focus-accent-light:focus { color: color-mod(#BADA55 lightness(+10%)) }\n.hover-accent-dark:hover { color: color-mod(#BADA55 lightness(-10%)) }\n.active-accent-dark:hover:active { color: color-mod(#BADA55 lightness(-10%)) }\n.focus-accent-dark:focus { color: color-mod(#BADA55 lightness(-10%)) }\n.hover-bg-accent-light:hover { background-color: color-mod(#BADA55 lightness(+10%)) }\n.active-bg-accent-light:hover:active { background-color: color-mod(#BADA55 lightness(+10%)) }\n.focus-bg-accent-light:focus { background-color: color-mod(#BADA55 lightness(+10%)) }\n.hover-bg-accent-dark:hover { background-color: color-mod(#BADA55 lightness(-10%)) }\n.active-bg-accent-dark:hover:active { background-color: color-mod(#BADA55 lightness(-10%)) }\n.focus-bg-accent-dark:focus { background-color: color-mod(#BADA55 lightness(-10%)) }\n.hover-b--accent-light:hover { border-color: color-mod(#BADA55 lightness(+10%)) }\n.active-b--accent-light:hover:active { border-color: color-mod(#BADA55 lightness(+10%)) }\n.focus-b--accent-light:focus { border-color: color-mod(#BADA55 lightness(+10%)) }\n.hover-b--accent-dark:hover { border-color: color-mod(#BADA55 lightness(-10%)) }\n.active-b--accent-dark:hover:active { border-color: color-mod(#BADA55 lightness(-10%)) }\n.focus-b--accent-dark:focus { border-color: color-mod(#BADA55 lightness(-10%)) }\n```\n\n## Future improvements\n\nMore FUSS functions examples are to come, such as:\n- Measure definition: a single FUSS rule to define a single measure for margin, padding, border, width, height...\n- Anything else you can think of! Write a rule and try it right away, make a PR if you care to contribute!\n\n## Try\n\nA primordial version of this plugin was prototyped on AST-Explorer [here](https://astexplorer.net/#/gist/969f9be1a3b2bfb2bc20e3dec745f388/acc633fe29fdfb22911f5edf4ff5acd4029a9bab),\nand that's the fastest route to try it online for now.\n\n## Usage\n\n```js\nconst fussPlugin = require('postcss-fuss')\nconst fussFunctions = require('postcss-fuss/fuss-functions') // Or define your own!\nconst fuss = fussPlugin({ functions: fussFunctions })\n\npostcss([ fuss ])\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faccurat%2Fpostcss-fuss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faccurat%2Fpostcss-fuss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faccurat%2Fpostcss-fuss/lists"}