css-prop-sort v1.0.2

css-prop-sort

CLI to easily sort your CSS properties.

I watched Kevin Powell's video on sorting CSS properties and I felt inspired to make a CLI tool to do the process automatically.

NOTE: It will remove all whitespace from inside rules (whitespace separating two rules is preserved)! For this reason, make sure that you run this BEFORE Prettier or other formatting tools.

Usage

This supports any runtime that you can use ES6 in. As the engine does not require any dependencies (only the CLI does), you can use it in browsers. As this is also published as an NPM module, you can use it in Node.JS.

CLI

Requires a Node.JS version ^14.13.1 || >=16.0.0.

npx css-prop-sort <file>

where <files> is a glob pattern with files to sort properties in. Note it must be a glob pattern to files, not directories. You can separate multiple patterns with spaces. Default: **.css, which matches all CSS files in the CWD recursively.

The optional argument -c or --config can be used to specify a configuration file. If you do not specify a configuration file, it will search upwards for a package.json file with a cssPropSort propery. If it is not found, it will search upwards for each of the following and use the first one it finds: cssPropSort.config.json cssPropSort.config.js cssPropSort.config.cjs cssPropSort.config.mjs. If none of those are found, the default configuration will be used. To force it to use the default configuration, add "cssPropSort": {} to your package.json file.

Node.JS API

Requires a Node.JS version ^12.20.0 || ^14.13.1 || >=16.0.0.

npm install css-prop-sort

import sortCssProperties from "css-prop-sort";
import parseCssSortConfig from "css-prop-sort/config";

sortCssProperties(
	"a { color: blue; text-decoration: none; }",
	parseCssSortConfig(/* Object with configuration */)
);

Both parameters are required.

If you want to use the default configuration you have two options:

import sortCssProperties from "css-prop-sort";
import parseCssSortConfig from "css-prop-sort/config";

sortCssProperties("a { color: blue; text-decoration: none; }", parseCssSortConfig({}));

or

import sortCssProperties from "css-prop-sort";
import defaultCssSortConfig from "css-prop-sort/config.default";

sortCssProperties("a { color: blue; text-decoration: none; }", defaultCssSortConfig);

Browser Usage

Requires any browser with ES6 support.

You can either import the library directly from a CDN like UNPKG or jsDeliver, download & host it yourself, or use a bundling tool such as Webpack or Parcel.

The API is the same as the Node.JS one.

Configuration

Bonus tip

Make a file called cssPropSort.config.js in the root of your project with the following contents:

/** @type {import("css-prop-sort/types").Config} */
const config = {};

export default config;

or if you use CJS:

/** @type {import("css-prop-sort/types").Config} */
module.exports = {};

Depending on your IDE (I tested in Visual Studio Code), it should give you IntelliSense with descriptions of each property on hover.