{"id":22688308,"url":"https://github.com/emanuelefavero/postcss","last_synced_at":"2026-04-18T15:33:38.181Z","repository":{"id":172423751,"uuid":"613124951","full_name":"emanuelefavero/postcss","owner":"emanuelefavero","description":"This is a cheat sheet repo for PostCSS","archived":false,"fork":false,"pushed_at":"2023-03-12T23:55:23.000Z","size":37,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-04T16:50:29.464Z","etag":null,"topics":["autoprefixer","css","cssnano","postcss","postcss-cli","postcss-import","postcss-preset-env","precss","sass","scss"],"latest_commit_sha":null,"homepage":"","language":"CSS","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/emanuelefavero.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-12T23:47:54.000Z","updated_at":"2023-03-12T23:51:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"cf04d607-8c41-438f-89ff-644c84f3de41","html_url":"https://github.com/emanuelefavero/postcss","commit_stats":null,"previous_names":["emanuelefavero/postcss"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emanuelefavero%2Fpostcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emanuelefavero%2Fpostcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emanuelefavero%2Fpostcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emanuelefavero%2Fpostcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/emanuelefavero","download_url":"https://codeload.github.com/emanuelefavero/postcss/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246207509,"owners_count":20740723,"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":["autoprefixer","css","cssnano","postcss","postcss-cli","postcss-import","postcss-preset-env","precss","sass","scss"],"created_at":"2024-12-10T00:13:48.373Z","updated_at":"2025-03-29T16:13:42.581Z","avatar_url":"https://github.com/emanuelefavero.png","language":"CSS","readme":"# PostCSS\n\n\u003e This is a cheat sheet repo for PostCSS\n\nPostCSS provides a large ecosystem of plugins to perform different functionalities like linting, minifying, inserting vendor prefixes, and many other things.\n\n\u003e TIP: Remember to change language mode from css or tailwindcss to postcss in vs code for css files (after installing the postcss language support extension)\n\u003e\n\u003e TIP: This repo is useful for testing new CSS features that are not supported on any browser yet\n\n## Installation\n\n\u003e NOTE: Usually when you use tools such as Vite or Next.js, PostCSS is already installed and configured for you. So you can skip this.\n\n- initialize a new project with `npm init -y`\n- install the postcss-cli package as a dev dependency with `npm install postcss postcss-cli`\n- define the file structure and setup these two scripts in your `package.json` file\n\n```json\n\"build:css\": \"postcss src/style.css -o dist/style.css\",\n\"watch:css\": \"postcss src/style.css -o dist/style.css -w\"\n```\n\n- create a src folder and a `style.css` file inside it\n- create a dist folder with an `index.html` file inside it that links to the `style.css` file in the dist folder\n\n## Usage\n\n- run `npm run watch:css` to watch for changes in the `style.css` file and compile it to the dist folder\n- open the `index.html` file in the browser (or use live-server) to see the changes\n\n## Plugins\n\nPostCSS plugins are used to add new features to PostCSS.\n\n## Install Plugins\n\n- install the plugins you want to use as dev dependencies\n\n```bash\nnpm install autoprefixer postcss-preset-env precss postcss-import postcss-assets cssnano\n```\n\n### Add plugins to your project\n\n- create an empty `postcss.config.js` file in the root of your project\n- install the plugins you want to use as dev dependencies\n- add the plugins to the `postcss.config.js` file\n\n```js\nmodule.exports = {\n  plugins: [\n    // Add vendor prefixes to CSS rules using values from Can I Use\n    require('autoprefixer'),\n\n    // Use cutting edge CSS features\n    require('postcss-preset-env')({\n      // Enable all cutting edge features (stage 0 is too risky, better to use stage 1)\n      stage: 1,\n    }),\n\n    // Use Sass-like syntax\n    require('precss'),\n\n    // Import other CSS files\n    require('postcss-import'),\n\n    // Manage assets (images etc..)\n    require('postcss-assets')({\n      // Load images from dist/images\n      loadPaths: ['dist/images'],\n    }),\n\n    // Minify CSS (output)\n    require('cssnano')({\n      preset: 'default',\n    }),\n\n    // TIP: If you want to read the output CSS file, you can comment out the cssnano Minify CSS plugin for a while\n  ],\n}\n```\n\n\u003e TIP: See the repo src folder to see the plugins in action\n\n## Resources\n\n- [PostCSS](https://postcss.org/)\n- [PostCSS Plugins](https://www.postcss.parts/)\n- [PostCSS Preset Env](https://preset-env.cssdb.org/)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femanuelefavero%2Fpostcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femanuelefavero%2Fpostcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femanuelefavero%2Fpostcss/lists"}