How to use postcss-sorting - 5 common examples

To help you get started, we’ve selected a few postcss-sorting examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github fs / backbone-base / gulp / build / stylesheets.js View on Github external
gulp.task('stylesheets-sort', () => {
  return gulp.src(`${config.appDir}/stylesheets/**/*.css`)
    .pipe(plumber())
    .pipe(postcss([postcssSorting(postcssSortingConfig)]))
    .on('error', notify.onError())
    .pipe(gulp.dest(`${config.appDir}/stylesheets`));
});
github mlaursen / react-md / packages / dev-utils / src / compileScss.ts View on Github external
"postcss-preset-env",
        "postcss-flexbugs-fixes",
        "postcss-sorting",
        production && "cssnano",
        production && "postcss-combine-duplicated-selectors",
        production && "css-mqpacker",
      ].filter(Boolean)
    )
  );
  log.debug("");

  const result = await nodePostcss(
    [
      postcssPresetEnv({ stage: 3, autoprefixer: { flexbox: "no-2009" } }),
      postcssFlexbugsFixes(),
      sorting({
        order: ["custom-properties", "declarations"],
        "properties-order": "alphabetical",
        "unspecified-properties-position": "bottom",
      }),
      production && combineMediaQueries(),
      production && combineDuplicatedSelectors,
      production && cssnano({ preset: "default" }),
    ].filter(Boolean)
  ).process(css, {
    from: srcFile,
    to: outFile,
    map: !production && { inline: false },
  });

  checkForInvalidCSS(result.css);
github mlaursen / react-md / packages / dev-utils / src / utils / createThemes.ts View on Github external
@import 'react-md/dist/scss/styles';
`;

  const outFile = join(cssDist, `react-md.${theme}.min.css`);
  const unmodifiedCSS = renderSync({
    data,
    outFile,
    sourceMap: false,
    includePaths: [tempStylesDir],
  }).css.toString();

  const { css } = await postcss([
    postcssPresetEnv({ stage: 3, autoprefixer: { flexbox: "no-2009" } }),
    postcssFlexbugsFixes(),
    sorting({
      order: ["custom-properties", "declarations"],
      "properties-order": "alphabetical",
      "unspecified-properties-position": "bottom",
    }),
    combineMediaQueries(),
    combineDuplicatedSelectors,
    cssnano({ preset: "default" }),
  ]).process(unmodifiedCSS, { from: outFile });

  checkForInvalidCSS(css);
  await writeFile(outFile, css);
  return css;
}
github andrew--r / frontendbookshelf / gulp / tasks / format-styles.js View on Github external
gulp.task('format:styles', () => {
	return gulp
		.src(`${PATHS.source.styles.allStylesGlob}/**/*.css`)
		.pipe(plumber(getPluginOptions('plumber')))
		.pipe(postcss([
			sorting(getPluginOptions('postcssSorting')),
		]))
		.pipe(gulp.dest(PATHS.source.base));
});
github fs / backbone-base / gulp / build / stylesheets.js View on Github external
gulp.task('stylesheets-sort', () => {
  return gulp.src(`${config.appDir}/stylesheets/**/*.css`)
    .pipe(plumber())
    .pipe(postcss([postcssSorting(postcssSortingConfig)]))
    .on('error', notify.onError())
    .pipe(gulp.dest(`${config.appDir}/stylesheets`));
});

postcss-sorting

PostCSS plugin to keep rules and at-rules content in order.

MIT
Latest version published 14 days ago

Package Health Score

83 / 100
Full package analysis

Popular postcss-sorting functions