himynameisdave / postcss-plugins

The "officially unofficial" consolidated list of PostCSS plugins in a ready-to-use package

PostCSS Plugin List

The "officially unofficial" consolidated list of PostCSS plugins in a ready-to-use package.

简体中文

Purpose

There are over a hundred wonderful developers building amazing PostCSS plugins. The running list of plugins grows quickly, and is used in many places. One such place is on the searchable postcss.parts built by @mxstbr. Another is in the PostCSS Alfred Workflow created by @chrisopedia. These are great resources for developers to find and use plugins, and this list helps keep them all up to date.

The goal is to be as concise and clear as possible while still offering a lot of data about each plugin to developers.

TLDR; this is a large JSON file containing metadata about as many postcss-plugins as possible.

Install

With yarn

yarn add postcss-plugins

With npm

npm i postcss-plugins

Usage

const plugins = require('postcss-plugins');

//  Sample usage: get the name of every plugin in the dataset
const namesOfEveryPlugin = plugins.map(plugin => plugin.name);

//  Sample usage: get plugin with the most stars
const mostStarredPlugin = plugins.reduce((a, p) => a.stars && p.stars > a.stars ? p : a, { stars: 0 });

//  Sample usage: see how many plugins himynameisdave has written
const himynameisdavesPlugins = plugins.reduce((a, p) => p.author === 'himynameisdave' ? ++a : a, 0)

Submitting A New Plugin

All plugins are welcome, so long as they meet the PostCSS Plugin Guidelines. There are scripts in place to make adding your plugin as easy as answering a few questions about it.

Steps:

1. Fork this repo.
2. Run yarn install/npm install to quickly install the dependencies that the scripts rely on.
3. Run yarn run add/npm run add. You will then be prompted for info about your plugin. Follow the prompts.
4. This will add your plugin to plugins.json and your name/plugin to the authors.md list.
5. Commit & push your changes, then submit your pull request.
6. Chill out.

Please note that both plugins.json and authors.md are not meant to be edited directly. Instead, please follow the steps above to ensure your pull request can be merged in a timely manner. Also, do not worry about updating the GitHub star counts for the plugins, as this is done periodically by the maintainers.

Changes

See the changelog for a list of releases, changes & updates.

postcss-plugins's Issues

Plugin data collection proposal

I’d like to recommend an updated list of data we should collect for plugins and how we should collect it.

1. Collect the target NPM name:
   • process.argv[2], the first argument passed to the script.
2. Collect entry data from NPM:
   • https://registry.npmjs.org/${ name }/latest:
     • Collect author, the primary author.
     • Collect dependencies, all/plugin dependencies.
     • Collect keywords, additional search terms.
     • Collect categories, plugin category terms:

        keywords.filter(
        	(keyword) => /^postcss-plugin-(.+)/.test(keyword)
        ).map(
        	(keyword) => keyword.replace(
        		/^postcss-plugin-(.+)/,
        		'$1'
        	)
        ).reduce(
        	(categories, keyword) => categories.concat(keyword.split('-')),
        	[]
        )

     • Collect repo, the GitHub repository path:

        repository.url.replace(
        	/^git\+https:\/\/github\.com\/(.+)\.git$/,
        	'$1'
        )

   • https://api.npmjs.org/downloads/range/1000-01-01:2100-01-01/${ name }:
     • Collect downloads, the total number of downloads:

        downloads.reduce(
        	(count, download) => count + download.downloads,
        	0
        )

3. Collect entry data from GitHub:
   • https://api.github.com/repos/${ repo }:
     • Collect stars, the number of stars (from stargazers_count).
     • Collect forks, the number of forks.
     • Collect issues, the number of open issues (from open_issues_count).
   • https://api.github.com/repos/${ repo }/contributors:
     • Collect contributors, the list of contributors:
       • Collect each user, a contributor’s username (from login).
       • Collect each contributions, a contributor’s number of contributions.
       • Collect each avatar, a contributor’s avatar (from avatar_url).
4. Read the database from the JSON file.
5. Push the plugin entry data to the database by name.
6. Sort the database by names.
7. Write the database back to the JSON file.

syntax error in plugins.json

plugins.json has been broken since b5af38d

see line 4247

actions.js:21 SyntaxError: Unexpected token : in JSON at position 108246

[
  {
    "name": "postcss-gap",
    "description": "to create fallbacks for the css props row-gap, column-gap and gap.",
    "author": "MattDiMu",
    "url": "https://github.com/MattDiMu/postcss-gap",
    "tags": [
      "fallbacks",
      "future",
      "grids"
    ],
    "stars": 2
  },
    "name": "postcss-hash",
    "description": "to replace output file names with HASH algorithms (md5, sha256, sha512, etc) and string length of your choice - for cache busting",
    "author": "dacodekid",
    "url": "https://github.com/dacodekid/postcss-hash",
    "tags": [
      "other"
    ],
    "stars": 0
  },
  {
    "name": "postcss-at-debug",
    "description": "to keep rulues inside the @debug at-rule in debug mode and remove them in release mode.",
    "author": "rezoh",
    "url": "https://github.com/rezoh/postcss-at-debug",
    "tags": [
      "debug" 
    ],
    "stars": 0
  },
]

postcss-write-svg has wrong tag

Wrong tag for postcss-write-svg!!! Should be svg duh!!!!

Minify plugins.json

plugins.json is starting to get quite large (~100kb). Seeing as most people aren't directly editing the file and instead should be using npm run add, it should be fine to minify it for people that are maybe downloading that file directly. Include an unminified version as well I guess in case people want to browse it.

Auto-changelog

Version bump script which automatically writes the changelog and tags the commit

Better npm publish

I would like to move the whole versioning/publish process under it's own little command, maybe use the np module to help

lastPlugin should be injected into versionBump

This line is making the incorrect assumption that the last plugin in the list was the last plugin added. This may not always be true (although 99.99% of the time it should be fine).

Look to clean this up by injecting the newly added plugin into the version bump so it knows exactly what the newest plugin is (and so it doesn't go lying when it fills out the CHANGELOG).

Real authors in authors.md

Thanks for authors.md. It is very useful for NY postcard tradition.

But it hides all plugins authors in postcss org. Maybe we can look into first commit author to get real author name?

Unable to resolve path to module '../../token.json' import/no-unresolved

followed by https://github.com/himynameisdave/postcss-plugins#submitting-a-new-plugin

Alfred Workflow

I created an Alfred Workflow based off your site. If you use Alfred, go check it out, and let me know what you think. Keep up the great work!!!

Linting issue when trying to commit changes

Hi, I'm having an issue trying to commit my changes to the plugin list. When I commit my changes I get the following error below. Should this be occurring considering I've not changed the files it's telling me about?

husky > pre-commit (node v13.8.0)

Authors list sucessfully updated in only: 6.802ms

> [email protected] lint /Users/limitlessloop/Sites/postcss-plugins
> eslint ./scripts/ ./test/ --quiet

gi
/Users/limitlessloop/Sites/postcss-plugins/scripts/add-new-plugin.js
  19:1  error  Expected indentation of 8 spaces but found 4    indent
  21:1  error  Expected indentation of 12 spaces but found 8   indent
  22:1  error  Expected indentation of 16 spaces but found 12  indent
  23:1  error  Expected indentation of 12 spaces but found 8   indent
  24:1  error  Expected indentation of 12 spaces but found 8   indent
  25:1  error  Expected indentation of 16 spaces but found 12  indent
  26:1  error  Expected indentation of 12 spaces but found 8   indent
  27:1  error  Expected indentation of 12 spaces but found 8   indent
  28:1  error  Expected indentation of 12 spaces but found 8   indent
  30:1  error  Expected indentation of 12 spaces but found 8   indent
  31:1  error  Expected indentation of 12 spaces but found 8   indent
  32:1  error  Expected indentation of 16 spaces but found 12  indent
  33:1  error  Expected indentation of 12 spaces but found 8   indent
  34:1  error  Expected indentation of 12 spaces but found 8   indent
  35:1  error  Expected indentation of 12 spaces but found 8   indent
  36:1  error  Expected indentation of 8 spaces but found 4    indent
  37:1  error  Expected indentation of 8 spaces but found 4    indent
  38:1  error  Expected indentation of 8 spaces but found 4    indent

/Users/limitlessloop/Sites/postcss-plugins/scripts/data/banner.js
  1:7   error  Expected a line break after this opening brace   object-curly-newline
  1:19  error  Expected a line break before this closing brace  object-curly-newline

/Users/limitlessloop/Sites/postcss-plugins/scripts/update-authors.js
  34:18  error  Expected a line break after this opening brace   object-curly-newline
  34:59  error  Expected a line break before this closing brace  object-curly-newline
  40:1   error  Expected indentation of 4 spaces but found 0     indent
  41:1   error  Expected indentation of 4 spaces but found 0     indent

/Users/limitlessloop/Sites/postcss-plugins/scripts/update-stars.js
  18:1   error  Expected indentation of 4 spaces but found 0     indent
  19:1   error  Expected indentation of 8 spaces but found 4     indent
  19:54  error  Expected a line break after this opening brace   object-curly-newline
  19:86  error  Expected a line break before this closing brace  object-curly-newline
  20:1   error  Expected indentation of 8 spaces but found 4     indent
  21:1   error  Expected indentation of 4 spaces but found 0     indent
  22:1   error  Expected indentation of 4 spaces but found 0     indent
  23:1   error  Expected indentation of 8 spaces but found 4     indent
  24:1   error  Expected indentation of 4 spaces but found 0     indent

/Users/limitlessloop/Sites/postcss-plugins/test/test.utils-write-plugins.js
  19:26  error  Expected a line break after this opening brace   object-curly-newline
  19:56  error  Expected a line break before this closing brace  object-curly-newline
  21:1   error  Expected indentation of 12 spaces but found 8    indent
  23:1   error  Expected indentation of 16 spaces but found 12   indent
  24:1   error  Expected indentation of 12 spaces but found 8    indent
  25:1   error  Expected indentation of 12 spaces but found 8    indent
  30:1   error  Expected indentation of 12 spaces but found 8    indent
  32:1   error  Expected indentation of 16 spaces but found 12   indent
  33:1   error  Expected indentation of 12 spaces but found 8    indent
  34:1   error  Expected indentation of 12 spaces but found 8    indent

pre-commit hook failed

I try to add new plugin, but:

Authors list sucessfully updated in only: 9.067ms

/postcss-plugins/scripts/utils/fetchGithubStars.js
  2:27  error  Unable to resolve path to module '../../token.json'  import/no-unresolved

✖ 1 problem (1 error, 0 warnings)

cssnext vs. postcss-cssnext

The data on cssnext is out of date.

{
    "name": "cssnext",
    "url": "https://github.com/cssnext/cssnext",
    "description": "Plugin pack that allows you to use future CSS features today.",
    "tags": [
      "pack",
      "future"
    ],
    "author": "cssnext",
    "stars": 4855
}

• It's now called postcss-cssnext: http://cssnext.io/postcss/
• The repo has moved to https://github.com/MoOx/postcss-cssnext

Would you welcome a PR to update this data?

Add tags for old releases

Add some tags for older releases. Here's a guide: https://stackoverflow.com/questions/4404172/how-to-tag-an-older-commit-in-git/21759466#21759466

Guidance on plugin names

For the plugin name, do you want the npm name or a common name or what? For instance, almost all of my plugins start with postcss-, but a plugin name itself might be "Time Machine" with uppercases and a space.

Add postcss-resemble-image

Add this gem: https://github.com/ben-eb/postcss-resemble-image

search problem

is it ok?!)

Update readme: add yarn

Add yarn commands (as well as keeping the npm ones) to the readme.

Adding GitHub meta data

It would be nice if we could add GitHub meta data (e.g. stars, contributers, last commit time...) to the JSON file, that way we could show that information on postcss.parts and have some sorting options!

npmignore

the npm version should rly just include the plugins and index file, no need for all the other stuff.

Adding an existing plugin should error out

Validate the incoming plugin by seeing if it's already in the list

BUG: authors being undefined in authors.md

There is an issue where some of the authors being added to authors.md are undefined which means that part of the script is fucking up.

The bigger thing is that we need proper tests to be written.

authors.md is dead

It’s currently dead. https://github.com/himynameisdave/postcss-plugins/blob/master/docs/authors.md

This commit killed it. b82337a#diff-365b0403c12f88b9d3bbdfb3f3b077a4

To update plugin or add again?

I'm the new maintainer of the Lost Grid–thus it has a new url. Should I submit a new plugin or is there a way to update existing plugins?

Thanks!

discard-comments leads to 404

At https://www.postcss.parts/?searchTerm=discard-comments clicking on the link leads to https://www.postcss.parts/?searchTerm=discard-comments which is 404

Add plugin postcss-hairlines

Add webp suffix to url of background or background-image in css.

Before:

.foo {
  background-image: url(./bg.png);
}

After:

.foo {
  background-image: url(./bg.png);
}
.webp .foo {
  background-image: url(./bg.png?x-oss-process=image/format, webp);
}

opening a page in a new tab results in a 404

If I right-click on one of the tiles to open in a new tab I would presume the page would load in a new tab.

https://www.postcss.parts/tag/fun

expected behaviour: If I right-click a tile, like 'fun', I would expect the page to load.

actual behaviour: page does not load.

List plugins inside plugin packs

It would be good to list plugins as parts of plugin packs. So for example cssnext uses postcss-selector-matches, and at least a handful of plugins use postcss-reporter. Would be great if those connections were realised in this list. 😄

Would be nice also to list some plugins that are not included, once this is done. We decided to remove most of cssnano's plugins (there are a lot now!) from the PostCSS readme on account of the optimisations section being too big.

Pull description from plugin.json

Pull the description from the actual plugin

Accessibility category

Hi! Recently i have published new PostCSS plugin - PostCSS High Contrast. This Plugin relates more to accessibility category. I think it would be great to create new category for accessibility plugins.

A11Y category/section

Hello!

Would be nice to have an A11Y category/section. :)

Should be able to add additional plugin

After adding the first one, it would be cool to be able to quickly add another one under the same version number

Only allow a max of 5 tags

Should be as easy as adding a verify method in inquirer or something...