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

**URL:** <https://discourse.aurelia.io/t/resolved-adding-postcss-and-postcss-preset-env-to-an-old-project/5004>\
**Category:** Help Requests\
**Created:** [November 30, 2022, 7:07pm UTC](https://discourse.aurelia.io/t/resolved-adding-postcss-and-postcss-preset-env-to-an-old-project/5004 "2022-11-30T19:07:53Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![TomorrowToday](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/tomorrowtoday/32/2343_2.png) [@TomorrowToday](https://discourse.aurelia.io/u/TomorrowToday)\
**Post date:** [November 30, 2022, 7:07pm UTC](https://discourse.aurelia.io/t/resolved-adding-postcss-and-postcss-preset-env-to-an-old-project/5004/1 "2022-11-30T19:07:53Z")

</div>

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.

```auto
//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());
}

```

```auto
//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"
  ],

...

```

---

<div class="post-metadata">

**Author:** ![TomorrowToday](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/tomorrowtoday/32/2343_2.png) [@TomorrowToday](https://discourse.aurelia.io/u/TomorrowToday)\
**Post date:** [December 1, 2022, 1:02am UTC](https://discourse.aurelia.io/t/resolved-adding-postcss-and-postcss-preset-env-to-an-old-project/5004/2 "2022-12-01T01:02:35Z")

</div>

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:

```auto
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'...

```

---

<div class="post-metadata">

**Author:** ![TomorrowToday](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/tomorrowtoday/32/2343_2.png) [@TomorrowToday](https://discourse.aurelia.io/u/TomorrowToday)\
**Post date:** [December 1, 2022, 7:20pm UTC](https://discourse.aurelia.io/t/resolved-adding-postcss-and-postcss-preset-env-to-an-old-project/5004/3 "2022-12-01T19:20:53Z")

</div>

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.