Skip to content

Commit

Permalink
refactor(@angular-devkit/build-angular): remove support for Stylus
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@alan-agius4 @dgp1130
alan-agius4 authored and dgp1130 committed Sep 16, 2022
1 parent 12931ba commit 2ba44a4
Show file tree
Hide file tree
Showing 17 changed files with 18 additions and 143 deletions.
3 changes: 1 addition & 2 deletions docs/design/build-system-overview.dot
View file
Expand Up @@ -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"
}
}
4 changes: 2 additions & 2 deletions docs/design/build-system.md
View file
Expand Up @@ -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

Expand Down
2 changes: 0 additions & 2 deletions package.json
View file
Expand Up @@ -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",
Expand Down
2 changes: 0 additions & 2 deletions packages/angular_devkit/build_angular/BUILD.bazel
View file
Expand Up @@ -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",
Expand Down
2 changes: 0 additions & 2 deletions packages/angular_devkit/build_angular/package.json
View file
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions packages/angular_devkit/build_angular/src/builders/browser-esbuild/schema.json
View file
Expand Up @@ -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",
Expand All @@ -91,7 +91,7 @@
{
"type": "string",
"description": "The file to include.",
"pattern": "\\.(?:css|scss|sass|less|styl)$"
"pattern": "\\.(?:css|scss|sass|less)$"
}
]
}
Expand Down
4 changes: 2 additions & 2 deletions packages/angular_devkit/build_angular/src/builders/browser/schema.json
View file
Expand Up @@ -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",
Expand All @@ -91,7 +91,7 @@
{
"type": "string",
"description": "The file to include.",
"pattern": "\\.(?:css|scss|sass|less|styl)$"
"pattern": "\\.(?:css|scss|sass|less)$"
}
]
}
Expand Down
7 changes: 2 additions & 5 deletions packages/angular_devkit/build_angular/src/builders/browser/specs/styles_spec.ts
View file
Expand Up @@ -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" />
Expand Down Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion ...es/angular_devkit/build_angular/src/builders/browser/tests/options/bundle-budgets_spec.ts
View file
Expand Up @@ -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"', () => {
Expand Down
23 changes: 0 additions & 23 deletions ...lar_devkit/build_angular/src/builders/browser/tests/options/inline-style-language_spec.ts
View file
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/angular_devkit/build_angular/src/builders/extract-i18n/index.ts
View file
Expand Up @@ -224,7 +224,7 @@ export async function execute(
module: {
rules: [
{
test: /\.(css|scss|sass|styl|less)$/,
test: /\.(css|scss|sass|less)$/,
loader: require.resolve('./empty-loader'),
},
],
Expand Down
4 changes: 2 additions & 2 deletions packages/angular_devkit/build_angular/src/builders/karma/schema.json
View file
Expand Up @@ -76,7 +76,7 @@
"input": {
"type": "string",
"description": "The file to include.",
"pattern": "\\.(?:css|scss|sass|less|styl)$"
"pattern": "\\.(?:css|scss|sass|less)$"
},
"bundleName": {
"type": "string",
Expand All @@ -95,7 +95,7 @@
{
"type": "string",
"description": "The file to include.",
"pattern": "\\.(?:css|scss|sass|less|styl)$"
"pattern": "\\.(?:css|scss|sass|less)$"
}
]
}
Expand Down
23 changes: 0 additions & 23 deletions packages/angular_devkit/build_angular/src/webpack/configs/styles.ts
View file
Expand Up @@ -101,13 +101,6 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration {
extraPlugins.push(new RemoveHashPlugin({ chunkNames: noInjectNames, hashFormat }));
}

if (globalStylePaths.some((p) => p.endsWith('.styl'))) {
wco.logger.warn(
'Stylus usage is deprecated and will be removed in a future major version. ' +
'To opt-out of the deprecated behaviour, please migrate to another stylesheet language.',
);
}

const sassImplementation = new SassWorkerImplementation();
const sassTildeUsageMessage = new Set<string>();

Expand Down Expand Up @@ -366,22 +359,6 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration {
},
],
},
{
extensions: ['styl'],
use: [
{
loader: require.resolve('stylus-loader'),
options: {
sourceMap: cssSourceMap,
stylusOptions: {
compress: false,
sourceMap: { comment: false },
paths: includePaths,
},
},
},
],
},
];

return {
Expand Down
2 changes: 1 addition & 1 deletion ...es/angular_devkit/build_angular/src/webpack/plugins/any-component-style-budget-checker.ts
View file
Expand Up @@ -47,7 +47,7 @@ export class AnyComponentStyleBudgetChecker {
return;
}

const cssExtensions = ['.css', '.scss', '.less', '.styl', '.sass'];
const cssExtensions = ['.css', '.scss', '.less', '.sass'];

const componentStyles = Object.keys(compilation.assets)
.filter((name) => cssExtensions.includes(path.extname(name)))
Expand Down
2 changes: 1 addition & 1 deletion packages/angular_devkit/build_angular/src/webpack/plugins/css-optimizer-plugin.ts
View file
Expand Up @@ -52,7 +52,7 @@ export class CssOptimizerPlugin {

logger.time('optimize css assets');
for (const assetName of Object.keys(compilationAssets)) {
if (!/\.(?:css|scss|sass|less|styl)$/.test(assetName)) {
if (!/\.(?:css|scss|sass|less)$/.test(assetName)) {
continue;
}

Expand Down
24 changes: 3 additions & 21 deletions tests/legacy-cli/e2e/tests/build/styles/include-paths.ts
View file
Expand Up @@ -18,17 +18,6 @@ export default async function () {
@import 'variables';
h2 { background-color: $primary-color; }
`,
'src/style-paths/variables.styl': '$primary-color = green',
'src/styles.styl': `
@import 'variables'
h3
color: $primary-color
`,
'src/app/app.component.styl': `
@import 'variables'
h4
background-color: $primary-color
`,
'src/style-paths/variables.less': '@primary-color: #ADDADD;',
'src/styles.less': `
@import 'variables';
Expand All @@ -43,17 +32,14 @@ export default async function () {
await replaceInFile(
'src/app/app.component.ts',
`'./app.component.css\'`,
`'./app.component.scss'` + (esbuild ? '' : `, './app.component.styl', './app.component.less'`),
`'./app.component.scss'` + (esbuild ? '' : `, './app.component.less'`),
);

await updateJsonFile('angular.json', (workspaceJson) => {
const appArchitect = workspaceJson.projects['test-project'].architect;
appArchitect.build.options.styles = [{ input: 'src/styles.scss' }];
if (!esbuild) {
appArchitect.build.options.styles.push(
{ input: 'src/styles.styl' },
{ input: 'src/styles.less' },
);
appArchitect.build.options.styles.push({ input: 'src/styles.less' });
}
appArchitect.build.options.stylePreprocessorOptions = {
includePaths: ['src/style-paths'],
Expand All @@ -64,9 +50,7 @@ export default async function () {
await expectFileToMatch('dist/test-project/styles.css', /h1\s*{\s*color: red;\s*}/);
await expectFileToMatch('dist/test-project/main.js', /h2.*{.*color: red;.*}/);
if (!esbuild) {
// These checks are for the less and stylus files
await expectFileToMatch('dist/test-project/styles.css', /h3\s*{\s*color: #008000;\s*}/);
await expectFileToMatch('dist/test-project/main.js', /h4.*{.*color: #008000;.*}/);
// These checks are for the less files
await expectFileToMatch('dist/test-project/styles.css', /h5\s*{\s*color: #ADDADD;\s*}/);
await expectFileToMatch('dist/test-project/main.js', /h6.*{.*color: #ADDADD;.*}/);
}
Expand All @@ -77,8 +61,6 @@ export default async function () {

await expectFileToMatch('dist/test-project/styles.css', /h1\s*{\s*color: red;\s*}/);
await expectFileToMatch('dist/test-project/main.js', /h2.*{.*color: red;.*}/);
await expectFileToMatch('dist/test-project/styles.css', /h3\s*{\s*color: #008000;\s*}/);
await expectFileToMatch('dist/test-project/main.js', /h4.*{.*color: #008000;.*}/);
await expectFileToMatch('dist/test-project/styles.css', /h5\s*{\s*color: #ADDADD;\s*}/);
await expectFileToMatch('dist/test-project/main.js', /h6.*{.*color: #ADDADD;.*}/);
}
Expand Down
51 changes: 0 additions & 51 deletions tests/legacy-cli/e2e/tests/build/styles/stylus.ts
View file

This file was deleted.

0 comments on commit 2ba44a4

Please sign in to comment.