Graham/angular-cli
1
0
Fork 0
mirror of https://github.com/angular/angular-cli.git synced 2025-05-23 15:36:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(@angular/cli): support inlining stylesheet resource tilde paths

Browse Source
This commit is contained in:
Charles Lyding 2017-12-07 13:29:02 -05:00 committed by Filipe Silva
parent 64b4b03fb5
commit 9caa7ca0d1
2 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/@angular/cli/models/webpack-configs/styles.ts
View File

@ -46,6 +46,10 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
const postcssPluginCreator = function() { const postcssPluginCreator = function() {
return [ return [
postcssUrl({
filter: ({ url }: { url: string }) => url.startsWith('~'),
url: ({ url }: { url: string }) => path.join(projectRoot, 'node_modules', url.substr(1)),
}),
postcssUrl([ postcssUrl([
{ {
// Only convert root relative URLs, which CSS-Loader won't process into require(). // Only convert root relative URLs, which CSS-Loader won't process into require().
@ -83,7 +87,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
'postcss-url': 'postcssUrl', 'postcss-url': 'postcssUrl',
'postcss-custom-properties': 'customProperties' 'postcss-custom-properties': 'customProperties'
}, },
variables: { minimizeCss, baseHref, deployUrl } variables: { minimizeCss, baseHref, deployUrl, projectRoot }
}; };
// determine hashing format // determine hashing format

17
tests/e2e/tests/build/styles/inline-urls.ts
View File

@ -1,4 +1,4 @@
import { ng } from '../../../utils/process'; import { ng, silentNpm } from '../../../utils/process';
import { import {
expectFileToMatch, expectFileToMatch,
expectFileToExist, expectFileToExist,
@ -7,6 +7,7 @@ import {
} from '../../../utils/fs'; } from '../../../utils/fs';
import { copyProjectAsset } from '../../../utils/assets'; import { copyProjectAsset } from '../../../utils/assets';
import { expectToFail } from '../../../utils/utils'; import { expectToFail } from '../../../utils/utils';
import { updateJsonFile } from '../../../utils/project';
const imgSvg = ` const imgSvg = `
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
@ -16,8 +17,11 @@ const imgSvg = `
export default function () { export default function () {
return Promise.resolve() return Promise.resolve()
.then(() => silentNpm('install', 'font-awesome@4.7.0'))
.then(() => writeMultipleFiles({ .then(() => writeMultipleFiles({
'src/styles.css': ` 'src/styles.scss': `
$fa-font-path: "~font-awesome/font";
@import "~font-awesome/scss/font-awesome";
h1 { background: url('./assets/large.png'); } h1 { background: url('./assets/large.png'); }
h2 { background: url('./assets/small.svg'); } h2 { background: url('./assets/small.svg'); }
p { background: url('./assets/small-id.svg#testID'); } p { background: url('./assets/small-id.svg#testID'); }
@ -30,7 +34,16 @@ export default function () {
'src/assets/small-id.svg': imgSvg 'src/assets/small-id.svg': imgSvg
})) }))
.then(() => copyProjectAsset('images/spectrum.png', './assets/large.png')) .then(() => copyProjectAsset('images/spectrum.png', './assets/large.png'))
.then(() => updateJsonFile('.angular-cli.json', configJson => {
const app = configJson['apps'][0];
app['styles'] = ['styles.scss'];
}))
.then(() => ng('build', '--extract-css', '--aot')) .then(() => ng('build', '--extract-css', '--aot'))
.then(({ stdout }) => {
if (stdout.match(/postcss-url: \.+: Can't read file '\.+', ignoring/)) {
throw new Error('Expected no postcss-url file read warnings.');
}
})
// Check paths are correctly generated. // Check paths are correctly generated.
.then(() => expectFileToMatch('dist/styles.bundle.css', .then(() => expectFileToMatch('dist/styles.bundle.css',
/url\([\'"]?large\.[0-9a-f]{20}\.png[\'"]?\)/)) /url\([\'"]?large\.[0-9a-f]{20}\.png[\'"]?\)/))