PostCSS

WordPressify seamlessly integrates with PostCSS, a powerful preprocessor offering enhanced functionality compared to Sass and Less. Notably, PostCSS boasts impressive speed, being three times faster than Sass and four times faster than Less. Its versatility lies in the form of PostCSS plugins, akin to Lego pieces that can transform CSS features. With PostCSS, you can assemble these plugins to create a customized feature set, adjusting them as needed.

• Development Environment Plugins pluginsListDev:
  • partialimport
  • postcssPresetEnv
  • postCSSMixins
  • autoprefixer
• Production Task Plugins pluginsListProd:
  • partialimport
  • postcssPresetEnv
  • postCSSMixins
  • autoprefixer
  • cssnano

Writing CSS

The primary CSS file in WordPressify is located at:

src/assets/css/style.css

This file serves as the starting point for CSS styling, including template definitions and imports for stylesheets.

Sass Integration

WordPressify offers flexibility by supporting Sass as the primary CSS preprocessor. To utilize Sass:

• Install sass and gulp-sass:

npm install sass gulp-sass

• Include the sass and gulp-sass in gulpfile.js:

import dartSass from 'sass';
import gulpSass from 'gulp-sass';
const sass = gulpSass(dartSass);

• Update the stylesDev gulp task to:

function stylesDev() {
  return src('./src/assets/css/style.scss')
    .pipe(sourcemaps.init())
    .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' }));
}

Modify the watch task to monitor .scss filetypes:

watch('./src/assets/css/**/*.scss', stylesDev);

• Adjust the stylesProd gulp task to:

function stylesProd() {
  return src('./src/assets/css/style.scss')
    .pipe(sass({includePaths: 'node_modules'}).on('error', sass.logError))
	 .pipe(dest('./dist/themes/' + themeName));
}

By following these guidelines, you can effectively leverage PostCSS and Sass within WordPressify for efficient and customizable CSS development.