feat(react): deprecate styl from react and next for 17 (#16135)

docs/generated/packages/next/generators/application.json

@@ -37,10 +37,6 @@
               "value": "scss",
               "label": "SASS(.scss)       [ http://sass-lang.com          ]"
             },
-            {
-              "value": "styl",
-              "label": "Stylus(.styl)     [ http://stylus-lang.com        ]"
-            },
             {
               "value": "less",
               "label": "LESS              [ http://lesscss.org            ]"
@@ -56,6 +52,11 @@
             {
               "value": "styled-jsx",
               "label": "styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]"
+            },
+            { "value": "none", "label": "None" },
+            {
+              "value": "styl",
+              "label": "Stylus(.styl)     [ http://stylus-lang.com        ] (DEPRECATED)"
             }
           ]
         }

docs/generated/packages/next/generators/component.json

@@ -38,10 +38,6 @@
               "value": "scss",
               "label": "SASS(.scss)       [ http://sass-lang.com          ]"
             },
-            {
-              "value": "styl",
-              "label": "Stylus(.styl)     [ http://stylus-lang.com        ]"
-            },
             {
               "value": "less",
               "label": "LESS              [ http://lesscss.org            ]"
@@ -58,7 +54,11 @@
               "value": "styled-jsx",
               "label": "styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]"
             },
-            { "value": "none", "label": "None" }
+            { "value": "none", "label": "None" },
+            {
+              "value": "styl",
+              "label": "Stylus(.styl)     [ http://stylus-lang.com        ] (DEPRECATED)"
+            }
           ]
         }
       },

docs/generated/packages/next/generators/library.json

@@ -37,10 +37,6 @@
               "value": "scss",
               "label": "SASS(.scss)       [ http://sass-lang.com          ]"
             },
-            {
-              "value": "styl",
-              "label": "Stylus(.styl)     [ http://stylus-lang.com        ]"
-            },
             {
               "value": "less",
               "label": "LESS              [ http://lesscss.org            ]"
@@ -57,7 +53,11 @@
               "value": "styled-jsx",
               "label": "styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]"
             },
-            { "value": "none", "label": "None" }
+            { "value": "none", "label": "None" },
+            {
+              "value": "styl",
+              "label": "Stylus(.styl)     [ http://stylus-lang.com        ] (DEPRECATED)"
+            }
           ]
         }
       },

docs/generated/packages/next/generators/page.json

@@ -44,10 +44,6 @@
               "value": "scss",
               "label": "SASS(.scss)       [ http://sass-lang.com          ]"
             },
-            {
-              "value": "styl",
-              "label": "Stylus(.styl)     [ http://stylus-lang.com        ]"
-            },
             {
               "value": "less",
               "label": "LESS              [ http://lesscss.org            ]"
@@ -64,7 +60,11 @@
               "value": "styled-jsx",
               "label": "styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]"
             },
-            { "value": "none", "label": "None" }
+            { "value": "none", "label": "None" },
+            {
+              "value": "styl",
+              "label": "Stylus(.styl)     [ http://stylus-lang.com        ] (DEPRECATED)"
+            }
           ]
         },
         "x-priority": "important"

docs/generated/packages/react/generators/application.json

@@ -51,10 +51,6 @@
               "value": "scss",
               "label": "SASS(.scss)       [ http://sass-lang.com                     ]"
             },
-            {
-              "value": "styl",
-              "label": "Stylus(.styl)     [ http://stylus-lang.com                   ]"
-            },
             {
               "value": "less",
               "label": "LESS              [ http://lesscss.org                       ]"
@@ -71,7 +67,11 @@
               "value": "styled-jsx",
               "label": "styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]"
             },
-            { "value": "none", "label": "None" }
+            { "value": "none", "label": "None" },
+            {
+              "value": "styl",
+              "label": "Stylus(.styl)     [ http://stylus-lang.com                   ] (DEPRECATED)"
+            }
           ]
         }
       },

docs/generated/packages/react/generators/component.json

@@ -48,10 +48,6 @@
               "value": "scss",
               "label": "SASS(.scss)       [ http://sass-lang.com          ]"
             },
-            {
-              "value": "styl",
-              "label": "Stylus(.styl)     [ http://stylus-lang.com        ]"
-            },
             {
               "value": "less",
               "label": "LESS              [ http://lesscss.org            ]"
@@ -68,7 +64,11 @@
               "value": "styled-jsx",
               "label": "styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]"
             },
-            { "value": "none", "label": "None" }
+            { "value": "none", "label": "None" },
+            {
+              "value": "styl",
+              "label": "Stylus(.styl)     [ http://stylus-lang.com        ] (DEPRECATED)"
+            }
           ]
         }
       },

docs/generated/packages/react/generators/host.json

@@ -37,10 +37,6 @@
               "value": "scss",
               "label": "SASS(.scss)       [ http://sass-lang.com                     ]"
             },
-            {
-              "value": "styl",
-              "label": "Stylus(.styl)     [ http://stylus-lang.com                   ]"
-            },
             {
               "value": "less",
               "label": "LESS              [ http://lesscss.org                       ]"
@@ -57,7 +53,11 @@
               "value": "styled-jsx",
               "label": "styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]"
             },
-            { "value": "none", "label": "None" }
+            { "value": "none", "label": "None" },
+            {
+              "value": "styl",
+              "label": "Stylus(.styl)     [ http://stylus-lang.com                   ] (DEPRECATED)"
+            }
           ]
         }
       },

docs/generated/packages/react/generators/library.json

@@ -47,10 +47,6 @@
               "value": "scss",
               "label": "SASS(.scss)       [ http://sass-lang.com          ]"
             },
-            {
-              "value": "styl",
-              "label": "Stylus(.styl)     [ http://stylus-lang.com        ]"
-            },
             {
               "value": "less",
               "label": "LESS              [ http://lesscss.org            ]"
@@ -67,7 +63,11 @@
               "value": "styled-jsx",
               "label": "styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]"
             },
-            { "value": "none", "label": "None" }
+            { "value": "none", "label": "None" },
+            {
+              "value": "styl",
+              "label": "Stylus(.styl)     [ http://stylus-lang.com        ] (DEPRECATED)"
+            }
           ]
         }
       },

docs/generated/packages/react/generators/remote.json

@@ -37,10 +37,6 @@
               "value": "scss",
               "label": "SASS(.scss)       [ http://sass-lang.com                     ]"
             },
-            {
-              "value": "styl",
-              "label": "Stylus(.styl)     [ http://stylus-lang.com                   ]"
-            },
             {
               "value": "less",
               "label": "LESS              [ http://lesscss.org                       ]"
@@ -57,6 +53,10 @@
               "value": "styled-jsx",
               "label": "styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]"
             },
+            {
+              "value": "styl",
+              "label": "DEPRECATD: Stylus(.styl) [ http://stylus-lang.com            ]"
+            },
             { "value": "none", "label": "None" }
           ]
         }

docs/generated/packages/web/generators/application.json

@@ -33,10 +33,6 @@
               "value": "scss",
               "label": "SASS(.scss)  [ http://sass-lang.com   ]"
             },
-            {
-              "value": "styl",
-              "label": "Stylus(.styl)[ http://stylus-lang.com ]"
-            },
             {
               "value": "less",
               "label": "LESS         [ http://lesscss.org     ]"

docs/generated/packages/webpack/documents/webpack-plugins.md

@@ -37,7 +37,7 @@ module.exports = composePlugins(withNx(), (config) => {
 
 ## withWeb
 
-The `withWeb` plugin adds support for CSS/SASS/Less/Stylus stylesheets, assets (such as images and fonts), and `index.html` processing.
+The `withWeb` plugin adds support for CSS/SASS/Less stylesheets, assets (such as images and fonts), and `index.html` processing.
 
 ### Options
 

docs/generated/packages/workspace/generators/preset.json

@@ -42,10 +42,6 @@
               "value": "scss",
               "label": "SASS(.scss)  [ http://sass-lang.com   ]"
             },
-            {
-              "value": "styl",
-              "label": "Stylus(.styl)[ http://stylus-lang.com ]"
-            },
             {
               "value": "less",
               "label": "LESS         [ http://lesscss.org     ]"

docs/shared/packages/webpack/webpack-plugins.md

@@ -37,7 +37,7 @@ module.exports = composePlugins(withNx(), (config) => {
 
 ## withWeb
 
-The `withWeb` plugin adds support for CSS/SASS/Less/Stylus stylesheets, assets (such as images and fonts), and `index.html` processing.
+The `withWeb` plugin adds support for CSS/SASS/Less stylesheets, assets (such as images and fonts), and `index.html` processing.
 
 ### Options
 

nx-dev/nx-dev/lib/rspack/content/rspack-plugin.ts

@@ -25,7 +25,7 @@ module.exports = composePlugins(withNx(), (config) => {
 
 ## withWeb
 
-The \`withWeb\` plugin adds support for CSS/SASS/Less/Stylus stylesheets, assets (such as images and fonts), and \`index.html\` processing.
+The \`withWeb\` plugin adds support for CSS/SASS/Less stylesheets, assets (such as images and fonts), and \`index.html\` processing.
 
 ### Options
 

nx-dev/nx-dev/lib/rspack/schema/generators/application.ts

@@ -43,16 +43,16 @@ export const schema = {
               label:
                 'SASS(.scss)       [ http://sass-lang.com                     ]',
             },
-            {
-              value: 'styl',
-              label:
-                'Stylus(.styl)     [ http://stylus-lang.com                   ]',
-            },
             {
               value: 'less',
               label:
                 'LESS              [ http://lesscss.org                       ]',
             },
+            {
+              value: 'styl',
+              label:
+                'DEPRECATED: Stylus(.styl) [ http://stylus-lang.com           ]',
+            },
             {
               value: 'none',
               label: 'None',

packages/create-nx-workspace/bin/create-nx-workspace.ts

@@ -589,13 +589,6 @@ async function determineStyle(
     },
   ];
 
-  if (![Preset.AngularMonorepo, Preset.AngularStandalone].includes(preset)) {
-    choices.push({
-      name: 'styl',
-      message: 'Stylus(.styl)     [ http://stylus-lang.com ]',
-    });
-  }
-
   if (
     [Preset.ReactMonorepo, Preset.ReactStandalone, Preset.NextJs].includes(
       preset

packages/next/src/generators/application/schema.json

@@ -37,10 +37,6 @@
             "value": "scss",
             "label": "SASS(.scss)       [ http://sass-lang.com          ]"
           },
-          {
-            "value": "styl",
-            "label": "Stylus(.styl)     [ http://stylus-lang.com        ]"
-          },
           {
             "value": "less",
             "label": "LESS              [ http://lesscss.org            ]"
@@ -56,6 +52,14 @@
           {
             "value": "styled-jsx",
             "label": "styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]"
+          },
+          {
+            "value": "none",
+            "label": "None"
+          },
+          {
+            "value": "styl",
+            "label": "Stylus(.styl)     [ http://stylus-lang.com        ] (DEPRECATED)"
           }
         ]
       }

packages/next/src/generators/component/schema.json

@@ -40,10 +40,6 @@
             "value": "scss",
             "label": "SASS(.scss)       [ http://sass-lang.com          ]"
           },
-          {
-            "value": "styl",
-            "label": "Stylus(.styl)     [ http://stylus-lang.com        ]"
-          },
           {
             "value": "less",
             "label": "LESS              [ http://lesscss.org            ]"
@@ -63,6 +59,10 @@
           {
             "value": "none",
             "label": "None"
+          },
+          {
+            "value": "styl",
+            "label": "Stylus(.styl)     [ http://stylus-lang.com        ] (DEPRECATED)"
           }
         ]
       }

packages/next/src/generators/library/schema.json

@@ -37,10 +37,6 @@
             "value": "scss",
             "label": "SASS(.scss)       [ http://sass-lang.com          ]"
           },
-          {
-            "value": "styl",
-            "label": "Stylus(.styl)     [ http://stylus-lang.com        ]"
-          },
           {
             "value": "less",
             "label": "LESS              [ http://lesscss.org            ]"
@@ -60,6 +56,10 @@
           {
             "value": "none",
             "label": "None"
+          },
+          {
+            "value": "styl",
+            "label": "Stylus(.styl)     [ http://stylus-lang.com        ] (DEPRECATED)"
           }
         ]
       }

packages/next/src/generators/page/schema.json

@@ -46,10 +46,6 @@
             "value": "scss",
             "label": "SASS(.scss)       [ http://sass-lang.com          ]"
           },
-          {
-            "value": "styl",
-            "label": "Stylus(.styl)     [ http://stylus-lang.com        ]"
-          },
           {
             "value": "less",
             "label": "LESS              [ http://lesscss.org            ]"
@@ -69,6 +65,10 @@
           {
             "value": "none",
             "label": "None"
+          },
+          {
+            "value": "styl",
+            "label": "Stylus(.styl)     [ http://stylus-lang.com        ] (DEPRECATED)"
           }
         ]
       },

packages/react/src/generators/application/lib/install-common-dependencies.ts

@@ -23,7 +23,7 @@ export function installCommonDependencies(
       case 'less':
         devDependencies = { less: lessVersion };
         break;
-      case 'styl':
+      case 'styl': // @TODO(17): deprecated, going to be removed in Nx 17
         devDependencies = { stylus: stylusVersion };
         break;
     }

packages/react/src/generators/application/schema.json

@@ -54,10 +54,6 @@
             "value": "scss",
             "label": "SASS(.scss)       [ http://sass-lang.com                     ]"
           },
-          {
-            "value": "styl",
-            "label": "Stylus(.styl)     [ http://stylus-lang.com                   ]"
-          },
           {
             "value": "less",
             "label": "LESS              [ http://lesscss.org                       ]"
@@ -77,6 +73,10 @@
           {
             "value": "none",
             "label": "None"
+          },
+          {
+            "value": "styl",
+            "label": "Stylus(.styl)     [ http://stylus-lang.com                   ] (DEPRECATED)"
           }
         ]
       }

packages/react/src/generators/component/schema.json

@@ -50,10 +50,6 @@
             "value": "scss",
             "label": "SASS(.scss)       [ http://sass-lang.com          ]"
           },
-          {
-            "value": "styl",
-            "label": "Stylus(.styl)     [ http://stylus-lang.com        ]"
-          },
           {
             "value": "less",
             "label": "LESS              [ http://lesscss.org            ]"
@@ -73,6 +69,10 @@
           {
             "value": "none",
             "label": "None"
+          },
+          {
+            "value": "styl",
+            "label": "Stylus(.styl)     [ http://stylus-lang.com        ] (DEPRECATED)"
           }
         ]
       }

packages/react/src/generators/host/schema.json

@@ -40,10 +40,6 @@
             "value": "scss",
             "label": "SASS(.scss)       [ http://sass-lang.com                     ]"
           },
-          {
-            "value": "styl",
-            "label": "Stylus(.styl)     [ http://stylus-lang.com                   ]"
-          },
           {
             "value": "less",
             "label": "LESS              [ http://lesscss.org                       ]"
@@ -63,6 +59,10 @@
           {
             "value": "none",
             "label": "None"
+          },
+          {
+            "value": "styl",
+            "label": "Stylus(.styl)     [ http://stylus-lang.com                   ] (DEPRECATED)"
           }
         ]
       }

packages/react/src/generators/library/lib/install-common-dependencies.ts

@@ -27,7 +27,7 @@ export function installCommonDependencies(
       case 'less':
         devDependencies['less'] = lessVersion;
         break;
-      case 'styl':
+      case 'styl': // @TODO(17): deprecated, going to be removed in Nx 17
         devDependencies['stylus'] = stylusVersion;
         break;
     }

packages/react/src/generators/library/schema.json

@@ -47,10 +47,6 @@
             "value": "scss",
             "label": "SASS(.scss)       [ http://sass-lang.com          ]"
           },
-          {
-            "value": "styl",
-            "label": "Stylus(.styl)     [ http://stylus-lang.com        ]"
-          },
           {
             "value": "less",
             "label": "LESS              [ http://lesscss.org            ]"
@@ -70,6 +66,10 @@
           {
             "value": "none",
             "label": "None"
+          },
+          {
+            "value": "styl",
+            "label": "Stylus(.styl)     [ http://stylus-lang.com        ] (DEPRECATED)"
           }
         ]
       }

packages/react/src/generators/remote/schema.json

@@ -40,10 +40,6 @@
             "value": "scss",
             "label": "SASS(.scss)       [ http://sass-lang.com                     ]"
           },
-          {
-            "value": "styl",
-            "label": "Stylus(.styl)     [ http://stylus-lang.com                   ]"
-          },
           {
             "value": "less",
             "label": "LESS              [ http://lesscss.org                       ]"
@@ -60,6 +56,10 @@
             "value": "styled-jsx",
             "label": "styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]"
           },
+          {
+            "value": "styl",
+            "label": "DEPRECATD: Stylus(.styl) [ http://stylus-lang.com            ]"
+          },
           {
             "value": "none",
             "label": "None"

packages/react/src/utils/assertion.ts

@@ -2,7 +2,7 @@ const VALID_STYLES = [
   'css',
   'scss',
   'less',
-  'styl',
+  'styl', // @TODO(17): deprecated, going to be removed in Nx 17
   'styled-components',
   '@emotion/styled',
   'styled-jsx',

packages/react/typings/style.d.ts

@@ -1,7 +1,7 @@
 export type SupportedStyles =
   | 'css'
   | 'scss'
-  | 'styl'
+  | 'styl' // @TODO(17): deprecated, going to be removed in Nx 17
   | 'less'
   | 'styled-components'
   | '@emotion/styled'

packages/web/src/generators/application/schema.json

@@ -36,10 +36,6 @@
             "value": "scss",
             "label": "SASS(.scss)  [ http://sass-lang.com   ]"
           },
-          {
-            "value": "styl",
-            "label": "Stylus(.styl)[ http://stylus-lang.com ]"
-          },
           {
             "value": "less",
             "label": "LESS         [ http://lesscss.org     ]"

packages/workspace/src/generators/preset/schema.json

@@ -45,10 +45,6 @@
             "value": "scss",
             "label": "SASS(.scss)  [ http://sass-lang.com   ]"
           },
-          {
-            "value": "styl",
-            "label": "Stylus(.styl)[ http://stylus-lang.com ]"
-          },
           {
             "value": "less",
             "label": "LESS         [ http://lesscss.org     ]"