PostCSS and Sass

WordPressify uses PostCSS by default. You can add, remove, or swap plugins to build the exact CSS feature set you need.

The plugin lists are defined in gulpfile.js:

Development plugins (pluginsListDev):

partialimport
postcssPresetEnv
postCSSMixins
autoprefixer

Production plugins (pluginsListProd):

partialimport
postcssPresetEnv
postCSSMixins
autoprefixer
cssnano (minification)

Writing CSS

The main CSS entry point is:

src/assets/css/style.css

This file contains the WordPress template header comment and imports for your stylesheets.

To use Sass instead of PostCSS, install the required packages:

npm install sass gulp-sass

Rename the entry point src/assets/css/style.css to style.scss, keeping the WordPress template header comment.

Then update gulpfile.js. Add the imports and create the Sass compiler:

import zip from "gulp-vinyl-zip";
import cssnano from "cssnano";
+import dartSass from "sass";
+import gulpSass from "gulp-sass";

const { series, dest, src, watch } = pkg;
+const sass = gulpSass(dartSass);

Update the stylesDev task:

function stylesDev() {
-  return src("./src/assets/css/style.css")
+  return src("./src/assets/css/style.scss")
    .pipe(plumber({ errorHandler: onError }))
    .pipe(sourcemaps.init())
-    .pipe(postcss(pluginsListDev))
+    .pipe(sass({ includePaths: "node_modules" }).on("error", sass.logError))
    .pipe(sourcemaps.write("."))
    .pipe(dest("./build/wordpress/wp-content/themes/" + themeName))
    .pipe(browserSync.stream({ match: "**/*.css" }));
}

Update the CSS watcher to monitor .scss files:

  const watcherCSS = watch(
-    ["./src/assets/css/**/*.css", "!./**/.DS_Store"],
+    ["./src/assets/css/**/*.scss", "!./**/.DS_Store"],
    watchOptions,
  );

gulpfile.js is baked into the Node.js Docker image, so after these changes run npm run build before starting the server. See Build Changes.

Update the stylesProd task:

function stylesProd() {
-  return src("./src/assets/css/style.css")
+  return src("./src/assets/css/style.scss")
    .pipe(plumber({ errorHandler: onError }))
-    .pipe(postcss(pluginsListProd))
+    .pipe(sass({ includePaths: "node_modules" }).on("error", sass.logError))
    .pipe(dest("./dist/themes/" + themeName));
}

Linting

CSS is linted with Stylelint, configured in .stylelintrc in the project root. Run it with:

npm run lintcss

This runs Stylelint against all CSS files in src/ inside the Node.js container.