Replace 'transition-property' with 'transition'

[fcrwx]

react-scripts uses postcss which warns about using the CSS property 'transition-property' instead of 'transition'. When building in a CI environment react-scripts treats warnings as errors so this CSS property results in a failed build.

❯ CI=true ./node_modules/.bin/react-scripts build
Creating an optimized production build...

Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.

Failed to compile.

Warning
(31:28656) autoprefixer: Replace transition-property to transition, because Autoprefixer could not support any cases of transition-property and other transition-*

❯ echo $?
1

The following files use this property:

❯ find node_modules/mdb-react-ui-kit -type f |xargs grep transition-property |cut -b 1-75
node_modules/mdb-react-ui-kit/dist/css/mdb.min.css:*/::-webkit-search-decor
node_modules/mdb-react-ui-kit/dist/css/mdb.min.css: */i.flag:not(.icon){dis
node_modules/mdb-react-ui-kit/dist/scss/bootstrap/_carousel.scss:    transi
node_modules/mdb-react-ui-kit/dist/scss/free/_ripple.scss:  transition-prop
node_modules/mdb-react-ui-kit/dist/scss/bootstrap-rtl-fix/_carousel.scss:

Steps to reproduce:

1. Create a create-react-app application: npx create-react-app mdb-test --template typescript
2. NPM install mdb-react-ui-kit (in the created app directory): npm install mdb-react-ui-kit@latest
3. Import mdb.min.css in src/index.tsx: import 'mdb-react-ui-kit/dist/css/mdb.min.css'
4. Build the app using react-scripts, making sure the CI environment variable is true: CI=true ./node_modules/.bin/react-scripts build

[Wojstan]

Thanks for reporting it. We will take a look at this problem.

[Zwiebeln]

In case someone has met the same error, I have configured the process.env.CI to false, in order to let pipeline run further, even if it meets some warning. This is working with Github deployment now

env: 
    CI: false