[RESOLVED] Adding PostCSS and postcss-preset-env to an old project

Help Requests
1

I’m working on an older project that uses the Aurelia bundler. The project was not originally built with PostCSS, but now I’d like to add it in so I can use the postcss-preset-env plugin to automagically create CSS polyfills. Strangely everything runs exactly as before and postcss plugins don’t seem to do anything… not even throw errors. What have I missed?

Edit: read the docs a little better so now I’m getting debug output. Looks like it’s trying to do its work but now I’m getting other build errors—possibly unrelated.

//process-css.js
import {build} from 'aurelia-cli';
import gulp from 'gulp';
import project from '../aurelia.json';
import plumber from 'gulp-plumber';
import notify from 'gulp-notify';
import less from 'gulp-less';
import postcss from 'gulp-postcss';
import presetEnv from 'postcss-preset-env';

export default function processCSS() {
  return gulp.src(project.cssProcessor.source, {sourcemaps: true})
    .pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }))
    .pipe(less())
    .pipe(postcss([presetEnv({
        debug:true,
    })]))
    .pipe(build.bundle());
}

//package.json

...

"devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-proposal-decorators": "^7.8.3",
    "@babel/preset-env": "^7.8.4",
    "@babel/register": "^7.8.3",
    "aurelia-cli": "^3.0.1",
    "aurelia-testing": "^1.0.0",
    "babel-eslint": "^10.1.0",
    "browser-sync": "^2.26.7",
    "connect-history-api-fallback": "^1.6.0",
    "debounce": "^1.2.0",
    "gulp": "^4.0.0",
    "gulp-babel": "^8.0.0",
    "gulp-cache": "^1.1.3",
    "gulp-eslint": "^6.0.0",
    "gulp-less": "^4.0.1",
    "gulp-notify": "^3.2.0",
    "gulp-plumber": "^1.2.1",
    "gulp-postcss": "^9.0.1",
    "gulp-rename": "^2.0.0",
    "gulp-watch": "^5.0.1",
    "minimatch": "^3.0.4",
    "postcss": "^8.4.19",
    "postcss-preset-env": "^7.8.3",
    "promise-polyfill": "^8.1.3",
    "regenerator-runtime": "^0.13.3",
    "requirejs": "^2.3.6",
    "text": "requirejs/text#latest",
    "through2": "^3.0.1",
    "vinyl-fs": "^3.0.3"
  },
 "browserslist" : [
    "last 2 versions",
    "not dead",
    "iOS 12"
  ],

...
2

I’ve resolved the build issue and still a bit stumped. The debug makes it seem like polyfills are being selected (although not as intelligently as expected), but nothing gets bundled:

Finished 'readProjectConfiguration'
Starting 'processMarkup'...
Starting 'processJson'...
Starting 'processCSS'...
Starting 'copyFiles'...
Starting 'configureEnvironment'...
Finished 'copyFiles'
Finished 'processJson'
Finished 'configureEnvironment'
Starting 'buildJavaScript'...
[18:11:00] gulp-postcss: app.css
postcss-preset-env: Using features from Stage 2 (default)
postcss-preset-env:   font-format-keywords with stage 1 has been disabled
postcss-preset-env:   environment-variables with stage 0 has been disabled
postcss-preset-env:   nesting-rules with stage 1 has been disabled
postcss-preset-env:   custom-selectors with stage 1 has been disabled
postcss-preset-env: Adding area[href] fallbacks for ":any-link" support in Edge and IE.
postcss-preset-env: Enabling the following feature(s):
postcss-preset-env:   clamp
postcss-preset-env:   color-function
postcss-preset-env:   display-two-values
postcss-preset-env:   ic-unit
postcss-preset-env:   nested-calc
postcss-preset-env:   oklab-function
postcss-preset-env:   opacity-percentage
postcss-preset-env:   text-decoration-shorthand
postcss-preset-env:   unset-value
postcss-preset-env:   custom-media-queries
postcss-preset-env:   custom-properties
postcss-preset-env:   image-set-function
postcss-preset-env:   media-query-ranges
postcss-preset-env:   prefers-color-scheme-query
postcss-preset-env:   any-link-pseudo-class
postcss-preset-env:   case-insensitive-attributes
postcss-preset-env:   focus-visible-pseudo-class
postcss-preset-env:   focus-within-pseudo-class
postcss-preset-env:   not-pseudo-class
postcss-preset-env:   logical-properties-and-values
postcss-preset-env:   dir-pseudo-class
postcss-preset-env:   all-property
postcss-preset-env:   color-functional-notation
postcss-preset-env:   double-position-gradients
postcss-preset-env:   hexadecimal-alpha-notation
postcss-preset-env:   hwb-function
postcss-preset-env:   lab-function
postcss-preset-env:   rebeccapurple-color
postcss-preset-env:   blank-pseudo-class
postcss-preset-env:   break-properties
postcss-preset-env:   font-variant-property
postcss-preset-env:   is-pseudo-class
postcss-preset-env:   has-pseudo-class
postcss-preset-env:   gap-properties
postcss-preset-env:   overflow-property
postcss-preset-env:   overflow-wrap-property
postcss-preset-env:   place-properties
postcss-preset-env:   system-ui-font-family
postcss-preset-env:   cascade-layers
postcss-preset-env:   stepped-value-functions
postcss-preset-env:   trigonometric-functions
postcss-preset-env: These feature(s) need a browser library to work:
postcss-preset-env:  prefers-color-scheme-query: https://github.com/csstools/postcss-plugins/blob/main/plugins/css-prefers-color-scheme/README-BROWSER.md
postcss-preset-env:  focus-visible-pseudo-class: https://github.com/WICG/focus-visible
postcss-preset-env:  focus-within-pseudo-class: https://github.com/jsxtools/focus-within/blob/master/README-BROWSER.md
postcss-preset-env:  blank-pseudo-class: https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README-BROWSER.md
postcss-preset-env:  has-pseudo-class: https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README-BROWSER.md
Finished 'processMarkup'
Finished 'processCSS'
Finished 'buildJavaScript'
Starting 'writeBundles'...
3

So there might have been two problems, the first was magically resolved when I reinstalled the project and ran it exactly as above and it worked.

There is also an undocumented bug in postcss-preset-env where overriding the default stage option seems to also turn off the transpile.

2 Likes