{"id":13564113,"url":"https://github.com/ismamz/postcss-utilities","last_synced_at":"2025-04-12T22:29:29.616Z","repository":{"id":48003123,"uuid":"58233510","full_name":"ismamz/postcss-utilities","owner":"ismamz","description":"PostCSS plugin to add a collection of mixins, shortcuts, helpers and tools for your CSS","archived":false,"fork":false,"pushed_at":"2023-01-04T00:48:57.000Z","size":859,"stargazers_count":323,"open_issues_count":16,"forks_count":11,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-04T01:18:25.189Z","etag":null,"topics":["css","mixins","postcss","postcss-plugins"],"latest_commit_sha":null,"homepage":"https://ismamz.github.io/postcss-utilities","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/ismamz.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":"2016-05-06T20:36:19.000Z","updated_at":"2025-02-10T15:12:03.000Z","dependencies_parsed_at":"2023-02-01T16:02:19.099Z","dependency_job_id":null,"html_url":"https://github.com/ismamz/postcss-utilities","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ismamz%2Fpostcss-utilities","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ismamz%2Fpostcss-utilities/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ismamz%2Fpostcss-utilities/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ismamz%2Fpostcss-utilities/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ismamz","download_url":"https://codeload.github.com/ismamz/postcss-utilities/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248639457,"owners_count":21137845,"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","mixins","postcss","postcss-plugins"],"created_at":"2024-08-01T13:01:26.670Z","updated_at":"2025-04-12T22:29:29.592Z","avatar_url":"https://github.com/ismamz.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# PostCSS Utility Library [![Build Status][ci-img]][ci]\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://ismamz.github.io/postcss-utilities\"\u003e\n        \u003cimg\n            src=\"https://raw.githubusercontent.com/ismamz/postcss-utilities/master/media/logo.png\"\n            alt=\"PostCSS Utility Library\"\n            width=\"200\"\n        /\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n[PostCSS]: https://github.com/postcss/postcss\n[ci-img]:  https://travis-ci.org/ismamz/postcss-utilities.svg\n[ci]:      https://travis-ci.org/ismamz/postcss-utilities\n\n[postcss-utilities](https://ismamz.github.io/postcss-utilities/) is a [PostCSS] plugin that includes the most commonly used mixins, shortcuts and helpers. It's as easy as specifying `@util utility-name` in your stylesheet, and postcss-utilities will handle the rest for you.\n\n\u003ch4 align=\"center\"\u003e\u003ca href=\"https://ismamz.github.io/postcss-utilities\"\u003eCheck out the documentation to get started using postcss-utilities\u003c/a\u003e\u003c/h4\u003e\n\n\u003ch5 align=\"center\"\u003e\u003ca href=\"https://ismamz.github.io/postcss-utilities/playground/\"\u003eTry it in the browser!\u003c/a\u003e\u003c/h5\u003e\n\n### Motivation\n\nPostCSS has a lot of plugins and some of them use non-standard CSS properties to work as mixins or helpers. This is not a best way for a PostCSS plugin, because developers will not understand what is the source of this property.\n\n\u003e \"This plugin saves us from many tiny plugins with unknown properties\" _‒[@ai](https://github.com/ai) proposal [postcss/issues/645](https://github.com/postcss/postcss/issues/645)_\n\n### What is the difference between preprocessor’s mixins libraries?\n\nThere are lot of Sass Mixins Libraries ([over 65!](http://www.cssauthor.com/sass-mixins-library/)), but postcss-utilities makes the difference. All mixins and helpers are built with JavaScript and you can add to your workflow with ease, as simple as adding [autoprefixer](https://github.com/postcss/autoprefixer) or many others useful [PostCSS plugins](https://github.com/postcss/postcss/blob/master/docs/plugins.md).\n\nYou can forget about copy mixins from project to project and focus on write your project specific mixins and use this plugin for the most generic helpers.\n\n- You don’t need the extra files in your CSS codebase for mixins.\n- You don’t need mixins for vendor prefixing (use [autoprefixer](https://github.com/postcss/autoprefixer) plugin)\n- You can use postcss-utilities with LESS, SASS, vanilla CSS or whatever you choice.\n\n### List of current utilities\n\n**IMPORTANT**: The list of utilities is open for suggestions.\n\n- [aspect-ratio](https://ismamz.github.io/postcss-utilities/docs#aspect-ratio)\n- [border-color](https://ismamz.github.io/postcss-utilities/docs#border-color)\n- [border-radius](https://ismamz.github.io/postcss-utilities/docs#border-radius)\n- [border-style](https://ismamz.github.io/postcss-utilities/docs#border-style)\n- [border-width](https://ismamz.github.io/postcss-utilities/docs#border-width)\n- [center](https://ismamz.github.io/postcss-utilities/docs#center)\n- [center-block](https://ismamz.github.io/postcss-utilities/docs#center-block)\n- [circle](https://ismamz.github.io/postcss-utilities/docs#circle)\n- [clear-fix](https://ismamz.github.io/postcss-utilities/docs#clear-fix)\n- [hd breakpoint](https://ismamz.github.io/postcss-utilities/docs#hd-breakpoint)\n- [hide-visually](https://ismamz.github.io/postcss-utilities/docs#hide-visually)\n- [hr](https://ismamz.github.io/postcss-utilities/docs#horizontal-rule)\n- [margin](https://ismamz.github.io/postcss-utilities/docs#margin)\n- [no-hover](https://ismamz.github.io/postcss-utilities/docs#no-hover)\n- [no-js](https://ismamz.github.io/postcss-utilities/docs#no-js)\n- [padding](https://ismamz.github.io/postcss-utilities/docs#padding)\n- [position](https://ismamz.github.io/postcss-utilities/docs#position)\n- [reset-list](https://ismamz.github.io/postcss-utilities/docs#reset-list)\n- [reset-text](https://ismamz.github.io/postcss-utilities/docs#reset-text)\n- [size](https://ismamz.github.io/postcss-utilities/docs#size)\n- [min-size](https://ismamz.github.io/postcss-utilities/docs#min-size)\n- [max-size](https://ismamz.github.io/postcss-utilities/docs#max-size)\n- [sticky-footer](https://ismamz.github.io/postcss-utilities/docs#sticky-footer)\n- [text-hide](https://ismamz.github.io/postcss-utilities/docs#text-hide)\n- [text-stroke](https://ismamz.github.io/postcss-utilities/docs#text-stroke)\n- [triangle](https://ismamz.github.io/postcss-utilities/docs#triangle)\n- [truncate](https://ismamz.github.io/postcss-utilities/docs#truncate)\n- [word-wrap](https://ismamz.github.io/postcss-utilities/docs#word-wrap)\n\n\n## Examples\n\n### Input\n```css\n\n.cfx {\n    @util clearfix;\n}\n\n.rounded-top {\n    @util border-top-radius(4px);\n}\n\n@util no-hover {\n    .box {\n        background-color: #666;\n    }\n}\n\n```\n\n### Output\n```css\n\n.cfx:after {\n    content: '';\n    display: block;\n    clear: both;\n}\n\n.rounded-top {\n    border-top-left-radius: 4px;\n    border-top-right-radius: 4px;\n}\n\n.no-hover .box {\n    background-color: #666;\n}\n\n```\n\n## Usage\n\n\u003cimg align=\"right\" width=\"135\" height=\"95\"\n     title=\"Philosopher’s stone, logo of PostCSS\"\n     src=\"http://postcss.github.io/postcss/logo-leftp.svg\"\u003e\n\n### Quick usage\n\nUsing [PostCSS CLI](https://github.com/postcss/postcss-cli) you can do the following:\n\nInstall `postcss-cli` and the plugin on your project directory:\n\n```\nnpm install postcss-cli postcss-utilities --save-dev\n```\n\nAdd a `postcss` script to your `package.json`:\n\n```json\n\"scripts\": {\n    \"postcss\": \"postcss input.css -u postcss-utilities -o output.css\"\n}\n```\n\nAfter this, you can run `npm run postcss` and transform your `input.css` into `output.css`.\n\n\n### Use with [styled-jsx](https://github.com/zeit/styled-jsx)\n\n**styled-jsx** allows you to use full, scoped and component-friendly CSS in your JSX (rendered on the server or the client) and you can add `@util` rules with `postcss-utilities`.\n\n```\nnpm install --save styled-jsx styled-jsx-plugin-postcss postcss-utilities\n```\n\nAdd `postcss` config in your `package.json`:\n\n```json\n\"postcss\": {\n    \"plugins\": {\n        \"postcss-utilities\": {}\n    }\n}\n```\n\nAdd `styled-jsx/babel` to plugins in your babel configuration:\n\n```json\n{\n  \"plugins\": [\n    \"styled-jsx/babel\"\n  ]\n}\n```\n\nThen write `@util` rules in your code:\n\n```jsx\nexport default () =\u003e (\n  \u003cdiv\u003e\n    \u003cp\u003eonly this paragraph will get the style :)\u003c/p\u003e\n\n    \u003cstyle jsx\u003e{`\n      p {\n        color: red;\n        @util center;\n      }\n    `}\u003c/style\u003e\n  \u003c/div\u003e\n)\n```\n\n### For tasks runners and others enviroments\n\n```js\npostcss([ require('postcss-utilities')({ /* options*/ }) ])\n```\n\nSee [PostCSS] docs for examples of your environment.\n\n\n## Options\n\n##### noHoverSelector\n\nType: `string`\u003cbr\u003e\nDefault: `.no-hover`\n\nTo use with [`no-hover` utility](https://ismamz.github.io/postcss-utilities/docs#no-hover)\n\n##### noJsSelector\n\nType: `string`\u003cbr\u003e\nDefault: `.no-js`\n\nTo use with [`no-js` utility](https://ismamz.github.io/postcss-utilities/docs#no-js)\n\n##### ie8\n\nType: `boolean`\u003cbr\u003e\nDefault: `false`\n\nSet `true` to use `clearfix` method IE8 compatible\n\n##### centerMethod\n\nType: `string`\u003cbr\u003e\nDefault: `transform`\nValues: `['transform'|'flexbox']`\n\nTo use with [`center` utility](https://ismamz.github.io/postcss-utilities/docs#center)\n\n##### textHideMethod\n\nType: `string`\u003cbr\u003e\nDefault: `indent`\nValues: `['indent'|'font']`\n\nTo use with [`text-hide` utility](https://ismamz.github.io/postcss-utilities/docs#text-hide)\n\n\n## Contributing\n\nThe list of utilities is open for suggestions.\n\n- Do you think that we should include a new utility? [Create an issue with you proposal](https://github.com/ismamz/postcss-utilities/issues/new).\n- Found an issue? [Report it!](https://github.com/ismamz/postcss-utilities/issues/new).\n- Would you like to contribute with code or documentation? [Send a pull request](https://github.com/ismamz/postcss-utilities/pull/new/master)\n\n\n## Contributors\n\n- [Marcus Tisäter](https://github.com/marcustisater)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fismamz%2Fpostcss-utilities","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fismamz%2Fpostcss-utilities","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fismamz%2Fpostcss-utilities/lists"}