Skip to content

Commit

Permalink
x
Browse files Browse the repository at this point in the history
  • Loading branch information
@alan-agius4
alan-agius4 committed Aug 31, 2022
1 parent e10ea14 commit 5ca5ea8
Show file tree
Hide file tree
Showing 16 changed files with 17 additions and 73 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, 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 @@ -205,8 +205,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.14.2",
Expand Down
2 changes: 0 additions & 2 deletions packages/angular_devkit/build_angular/BUILD.bazel
View file
Expand Up @@ -171,8 +171,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.14.2",
"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 @@ -215,9 +215,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 @@ -104,13 +104,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 @@ -368,22 +361,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
4 changes: 2 additions & 2 deletions tests/legacy-cli/e2e/tests/build/styles/include-paths.ts
View file
Expand Up @@ -43,7 +43,7 @@ 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) => {
Expand All @@ -64,7 +64,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
// These checks are for the less files
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*}/);
Expand Down

0 comments on commit 5ca5ea8

Please sign in to comment.