Angular 7 remove duplicate attributes in SCSS

Question

Angular SASS (.scss) Strips properties. How do I prevent this from happening so I can embed duplicate attributes for cross-browser compatibility?

To copy, create a new Angular 7.2 project

{
      "name": "default-app",
      "version": "0.0.0",
      "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
      },
      "private": true,
      "dependencies": {
        "@angular/animations": "~7.2.0",
        "@angular/common": "~7.2.0",
        "@angular/compiler": "~7.2.0",
        "@angular/core": "~7.2.0",
        "@angular/forms": "~7.2.0",
        "@angular/platform-browser": "~7.2.0",
        "@angular/platform-browser-dynamic": "~7.2.0",
        "@angular/router": "~7.2.0",
        "core-js": "^2.5.4",
        "rxjs": "~6.3.3",
        "tslib": "^1.9.0",
        "zone.js": "~0.8.26"
      },
      "devDependencies": {
        "@angular-devkit/build-angular": "~0.13.0",
        "@angular/cli": "~7.3.9",
        "@angular/compiler-cli": "~7.2.0",
        "@angular/language-service": "~7.2.0",
        "@types/node": "~8.9.4",
        "@types/jasmine": "~2.8.8",
        "@types/jasminewd2": "~2.0.3",
        "codelyzer": "~4.5.0",
        "jasmine-core": "~2.99.1",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~4.0.0",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.1",
        "karma-jasmine": "~1.1.2",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.4.0",
        "ts-node": "~7.0.0",
        "tslint": "~5.11.0",
        "typescript": "~3.2.2"
      }
    }

Add the "teststyle" class to any element in the component.

<div style="text-align:center" class="teststyle">Hello
</div>
<router-outlet></router-outlet>

Apply in the .scss file corresponding to the component

.teststyle
{
    background: #a64bf4;
    background: -webkit-linear-gradient(right, #6ab443, #04a95f, #00d421);
    background: -o-linear-gradient(right, #6ab443, #04a95f, #00d421);
    background: -moz-linear-gradient(right, #6ab443, #04a95f, #00d421);
    background: linear-gradient(right, #6ab443, #04a95f, #00d421);
    
}

The Angular preprocessor removes everything except the first and last attributes. The corresponding css is like this. -webkit-linear-gradient, -o-linear-gradient and -moz-linear-gradient are not translated css/js files. This is a tarnspilation issue, not a browser issue.

I see this when I use direct css and it is correct.

Also includes angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "default-app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/default-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [],
            "es5BrowserSupport": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "default-app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "default-app:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "default-app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "default-app-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "default-app:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "default-app:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "default-app"
}

Answer 1

Angular uses Autoprefixer to add any required vendor prefixes and remove unwanted ones. Basically you don't have to worry about adding anything as they will be added for you. The ones that were removed were because they were not needed.

View: https://caniuse.com/?search=linear-gradient Use and Support

• -webkit-linear-gradient Only required

  • Chrome 4-25 (released 2010-2013) - 0% of browsers worldwide
  • Safari 4-6.1 (released 2010-2013) - 0.01% of global browsers
  • iOS Safari 3.2-6.1 (released 2010-2013) - 0.01% of global browsers
  • Android Browser 2.1-4.3 (released 2009-2013) - 0.13% of global browsers

• -o-linear-gradient Required only for Opera 11.5 and Opera mobile 12 (2011-2012 releases), 0% of browsers worldwide

• -moz-linear-gradient Only required by Firefox 3.5-15 (2010-2012 release), 0.01% of browsers

---

If you still want/need support for CSS gradients in 0% 10+ year old browsers in Angular versions launched in 2018, you can just add a src/browserslist file ( Related questions) You can learn about this file format here