refactor(@angular-devkit/build-angular): remove support for Stylus

The usage of Stylus in the CLI is minimal and this package never reached version 1.

BREAKING CHANGE:

Deprecated support for Stylus has been removed. The Stylus package has never reached a stable version and its usage in the Angular CLI is minimal. It's recommended to migrate to another CSS preprocessor that the Angular CLI supports.

Author: alan-agius4

docs/design/build-system-overview.dot

@@ -8,9 +8,8 @@ digraph G {
   "*.css" -> "postcss-loader with postcss-import, ./postcss-cli-resources.ts, autoprefixer";
   "*.scss\|sass" -> "sass-loader" -> "postcss-loader with postcss-import, ./postcss-cli-resources.ts, autoprefixer";
   "*.less" -> "less-loader" -> "postcss-loader with postcss-import, ./postcss-cli-resources.ts, autoprefixer";
-  "*.styl" -> "stylus-loader" -> "postcss-loader with postcss-import, ./postcss-cli-resources.ts, autoprefixer";
   "postcss-loader with postcss-import, ./postcss-cli-resources.ts, autoprefixer" -> "raw-loader, ./optimize-css-webpack-plugin.ts"  [label="component style?"];
   "raw-loader" -> "./optimize-css-webpack-plugin.ts"
   "postcss-loader with postcss-import, ./postcss-cli-resources.ts, autoprefixer" -> "style-loader, ./raw-css-loader.ts, and mini-css-extract-plugin" [label="global style?"];
   "style-loader, ./raw-css-loader.ts, and mini-css-extract-plugin" -> "./optimize-css-webpack-plugin.ts"
-}
+}

docs/design/build-system.md

@@ -54,8 +54,8 @@ This is used for conditional loading of code at build time.
 Two types of stylesheets are used in the build system: global stylesheets and component stylesheets.
 Global stylesheets are injected into the `index.html` file, while component stylesheets are loaded directly into compiled Angular components.
 
-The build system supports plain CSS stylesheets as well as the Sass, LESS and Stylus CSS pre-processors.
-Stylesheet processing functionality is provided by `sass-loader`, `less-loader`, `stylus-loader`, `postcss-loader`, `postcss-import`, augmented in the build system by custom webpack plugins.
+The build system supports plain CSS stylesheets as well as the Sass and LESS CSS pre-processors.
+Stylesheet processing functionality is provided by `sass-loader`, `less-loader`, `postcss-loader`, `postcss-import`, augmented in the build system by custom webpack plugins.
 
 ### Assets
 

package.json

@@ -204,8 +204,6 @@
     "source-map-loader": "4.0.0",
     "source-map-support": "0.5.21",
     "spdx-satisfies": "^5.0.0",
-    "stylus": "0.59.0",
-    "stylus-loader": "7.0.0",
     "symbol-observable": "4.0.0",
     "tar": "^6.1.6",
     "terser": "5.15.0",

packages/angular_devkit/build_angular/BUILD.bazel

@@ -170,8 +170,6 @@ ts_library(
         "@npm//semver",
         "@npm//source-map-loader",
         "@npm//source-map-support",
-        "@npm//stylus",
-        "@npm//stylus-loader",
         "@npm//terser",
         "@npm//text-table",
         "@npm//tree-kill",

packages/angular_devkit/build_angular/package.json

@@ -57,8 +57,6 @@
     "semver": "7.3.7",
     "source-map-loader": "4.0.0",
     "source-map-support": "0.5.21",
-    "stylus": "0.59.0",
-    "stylus-loader": "7.0.0",
     "terser": "5.15.0",
     "text-table": "0.2.0",
     "tree-kill": "1.2.2",

packages/angular_devkit/build_angular/src/builders/browser-esbuild/schema.json

@@ -72,7 +72,7 @@
               "input": {
                 "type": "string",
                 "description": "The file to include.",
-                "pattern": "\\.(?:css|scss|sass|less|styl)$"
+                "pattern": "\\.(?:css|scss|sass|less)$"
               },
               "bundleName": {
                 "type": "string",
@@ -91,7 +91,7 @@
           {
             "type": "string",
             "description": "The file to include.",
-            "pattern": "\\.(?:css|scss|sass|less|styl)$"
+            "pattern": "\\.(?:css|scss|sass|less)$"
           }
         ]
       }

packages/angular_devkit/build_angular/src/builders/browser/schema.json

@@ -72,7 +72,7 @@
               "input": {
                 "type": "string",
                 "description": "The file to include.",
-                "pattern": "\\.(?:css|scss|sass|less|styl)$"
+                "pattern": "\\.(?:css|scss|sass|less)$"
               },
               "bundleName": {
                 "type": "string",
@@ -91,7 +91,7 @@
           {
             "type": "string",
             "description": "The file to include.",
-            "pattern": "\\.(?:css|scss|sass|less|styl)$"
+            "pattern": "\\.(?:css|scss|sass|less)$"
           }
         ]
       }

packages/angular_devkit/build_angular/src/builders/browser/specs/styles_spec.ts

@@ -13,8 +13,8 @@ import { dirname } from 'path';
 import { browserBuild, createArchitect, host } from '../../../testing/test-utils';
 
 describe('Browser Builder styles', () => {
-  const extensionsWithImportSupport = ['css', 'scss', 'less', 'styl'];
-  const extensionsWithVariableSupport = ['scss', 'less', 'styl'];
+  const extensionsWithImportSupport = ['css', 'scss', 'less'];
+  const extensionsWithVariableSupport = ['scss', 'less'];
   const imgSvg = `
     <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
       <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
@@ -223,9 +223,6 @@ describe('Browser Builder styles', () => {
       if (ext === 'scss') {
         variableAssignment = '$primary-color:';
         variablereference = '$primary-color';
-      } else if (ext === 'styl') {
-        variableAssignment = '$primary-color =';
-        variablereference = '$primary-color';
       } else if (ext === 'less') {
         variableAssignment = '@primary-color:';
         variablereference = '@primary-color';

packages/angular_devkit/build_angular/src/builders/browser/tests/options/bundle-budgets_spec.ts

@@ -13,7 +13,7 @@ import { Type } from '../../schema';
 import { BASE_OPTIONS, BROWSER_BUILDER_INFO, describeBuilder } from '../setup';
 
 describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
-  const CSS_EXTENSIONS = ['css', 'scss', 'less', 'styl'];
+  const CSS_EXTENSIONS = ['css', 'scss', 'less'];
   const BUDGET_NOT_MET_REGEXP = /Budget .+ was not met by/;
 
   describe('Option: "bundleBudgets"', () => {

packages/angular_devkit/build_angular/src/builders/browser/tests/options/inline-style-language_spec.ts

@@ -58,29 +58,6 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
           harness.expectFile('dist/main.js').content.toContain('color: green');
         });
 
-        // Stylus currently does not function due to the sourcemap logic within the `stylus-loader`
-        // which tries to read each stylesheet directly from disk. In this case, each stylesheet is
-        // virtual and cannot be read from disk. This issue affects data URIs in general.
-        // xit('supports Stylus inline component styles when set to "stylus"', async () => {
-        //   harness.useTarget('build', {
-        //     ...BASE_OPTIONS,
-        //     inlineStyleLanguage: InlineStyleLanguage.Stylus,
-        //     aot,
-        //   });
-
-        //   await harness.modifyFile('src/app/app.component.ts', (content) =>
-        //     content.replace(
-        //       '__STYLE_MARKER__',
-        //       '$primary = green;\\nh1 { color: $primary; }',
-        //     ),
-        //   );
-
-        //   const { result } = await harness.executeOnce();
-
-        //   expect(result?.success).toBe(true);
-        //   harness.expectFile('dist/main.js').content.toContain('color: green');
-        // });
-
         it('supports Less inline component styles when set to "less"', async () => {
           harness.useTarget('build', {
             ...BASE_OPTIONS,