\hypertarget{md_sfcode_node_modules_css_declaration_sorter_readme_autotoc_md7055}{}\doxysection{CSS Declaration Sorter}\label{md_sfcode_node_modules_css_declaration_sorter_readme_autotoc_md7055}
\href{https://travis-ci.org/Siilwyn/css-declaration-sorter}{\texttt{ }} \href{https://npmjs.com/css-declaration-sorter}{\texttt{ }} \href{https://david-dm.org/Siilwyn/css-declaration-sorter}{\texttt{ }} \href{https://david-dm.org/Siilwyn/css-declaration-sorter?type=dev}{\texttt{ }}

A Node.\+js module and \href{https://github.com/postcss/postcss}{\texttt{ Post\+CSS}} plugin to sort CSS declarations based on their property names. Ensuring the CSS is organized, more consistent and in order... Besides, sorted CSS is smaller when gzipped because there will be more similar strings. The intention of this module is to sort the source CSS code of a project in the build process. Check out \href{https://github.com/Siilwyn/css-declaration-sorter-atom}{\texttt{ the Atom package}} for individual usage.\hypertarget{md_sfcode_node_modules_css_declaration_sorter_readme_autotoc_md7056}{}\doxysubsection{Alphabetical example}\label{md_sfcode_node_modules_css_declaration_sorter_readme_autotoc_md7056}
Input\+: 
\begin{DoxyCode}{0}
\DoxyCodeLine{body \{}
\DoxyCodeLine{    display: block;}
\DoxyCodeLine{    animation: none;}
\DoxyCodeLine{    color: \#C55;}
\DoxyCodeLine{    border: 0;}
\DoxyCodeLine{\} }

\end{DoxyCode}


Output\+: 
\begin{DoxyCode}{0}
\DoxyCodeLine{body \{}
\DoxyCodeLine{    animation: none;}
\DoxyCodeLine{    border: 0;}
\DoxyCodeLine{    color: \#C55;}
\DoxyCodeLine{    display: block;}
\DoxyCodeLine{\} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_css_declaration_sorter_readme_autotoc_md7057}{}\doxysubsection{Niceness}\label{md_sfcode_node_modules_css_declaration_sorter_readme_autotoc_md7057}

\begin{DoxyItemize}
\item Up-\/to-\/date CSS properties fetched from the \href{https://developer.mozilla.org/}{\texttt{ MDN Web Platform}}.
\item Sort using your own defined order.
\item Nested rules sorting support.
\item Less and SCSS support when combined with either \href{https://github.com/postcss/postcss-scss}{\texttt{ postcss-\/scss}} or \href{https://github.com/webschik/postcss-less}{\texttt{ postcss-\/less}}.
\item Thought-\/out sorting orders out of the box, {\bfseries{approved by their authors}}.
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_css_declaration_sorter_readme_autotoc_md7058}{}\doxysubsection{Sorting orders}\label{md_sfcode_node_modules_css_declaration_sorter_readme_autotoc_md7058}

\begin{DoxyItemize}
\item Alphabetically ~\newline
 {\ttfamily alphabetically} ~\newline
 {\itshape Default, ordering in a simple alphabetical manner from a -\/ z.}
\item \href{https://smacss.com/book/formatting\#grouping}{\texttt{ SMACSS}} ~\newline
 {\ttfamily smacss} ~\newline
 {\itshape Ordering from most important, flow affecting properties, to least important properties.}
\begin{DoxyItemize}
\item Box
\item Border
\item Background
\item Text
\item Other
\end{DoxyItemize}
\item \href{https://github.com/brandon-rhodes/Concentric-CSS}{\texttt{ Concentric CSS}} ~\newline
 {\ttfamily concentric-\/css} ~\newline
 {\itshape Starts outside the box model, moves inward.}
\begin{DoxyItemize}
\item Positioning
\item Visibility
\item Box model
\item Dimensions
\item Text
\end{DoxyItemize}
\item Custom order ~\newline
 {\itshape Provide your own order by passing the location of a JSON file containing an array.}
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_css_declaration_sorter_readme_autotoc_md7059}{}\doxysubsection{Usage}\label{md_sfcode_node_modules_css_declaration_sorter_readme_autotoc_md7059}
{\ttfamily npm install css-\/declaration-\/sorter -\/-\/save-\/dev}\hypertarget{md_sfcode_node_modules_css_declaration_sorter_readme_autotoc_md7060}{}\doxysubsubsection{CLI}\label{md_sfcode_node_modules_css_declaration_sorter_readme_autotoc_md7060}
This module does not include its own CLI but works with the official \href{https://github.com/postcss/postcss-cli}{\texttt{ Post\+CSS CLI}}. To use the examples below, install {\ttfamily postcss-\/cli} or prefix with {\ttfamily npx}.

Piping out result from file\+: ~\newline
 {\ttfamily postcss input.\+css -\/-\/use css-\/declaration-\/sorter $\vert$ cat}

Sorting multiple files by overwriting\+: ~\newline
 {\ttfamily postcss $\ast$.css -\/-\/use css-\/declaration-\/sorter -\/-\/replace -\/-\/no-\/map}\hypertarget{md_sfcode_node_modules_css_declaration_sorter_readme_autotoc_md7061}{}\doxysubsubsection{Vanilla JS}\label{md_sfcode_node_modules_css_declaration_sorter_readme_autotoc_md7061}

\begin{DoxyCode}{0}
\DoxyCodeLine{const fs = require('fs');}
\DoxyCodeLine{const postcss = require('postcss');}
\DoxyCodeLine{const cssDeclarationSorter = require('css-\/declaration-\/sorter');}
\DoxyCodeLine{}
\DoxyCodeLine{postcss([cssDeclarationSorter(\{order: 'smacss'\})])}
\DoxyCodeLine{  .process(fs.readFileSync('some.css'))}
\DoxyCodeLine{  .then(function (result) \{}
\DoxyCodeLine{    fs.writeFileSync('some.css', result.css);}
\DoxyCodeLine{  \}); }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_css_declaration_sorter_readme_autotoc_md7062}{}\doxysubsubsection{Gulp}\label{md_sfcode_node_modules_css_declaration_sorter_readme_autotoc_md7062}

\begin{DoxyCode}{0}
\DoxyCodeLine{const gulp = require('gulp');}
\DoxyCodeLine{const gulpPostcss = require('gulp-\/postcss');}
\DoxyCodeLine{const cssDeclarationSorter = require('css-\/declaration-\/sorter');}
\DoxyCodeLine{}
\DoxyCodeLine{gulp.task('css', function () \{}
\DoxyCodeLine{  return gulp.src('some.css')}
\DoxyCodeLine{    .pipe(gulpPostcss([cssDeclarationSorter(\{order: 'smacss'\})]))}
\DoxyCodeLine{    .pipe(gulp.dest('./'));}
\DoxyCodeLine{\}); }

\end{DoxyCode}
 See \href{https://github.com/postcss/postcss}{\texttt{ Post\+CSS}} documentation for more examples and other environments. 