René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Invalid inline CSS @ 5.0.0-beta.4-1c2f3d4","articleBody":"## I'm submitting a...\r\n\u003c!-- Check one of the following options with \"x\" --\u003e\r\n\u003cpre\u003e\u003ccode\u003e\r\n[ ] Regression (a behavior that used to work and stopped working in a new release)\r\n[x] Bug report  \u003c!-- Please search GitHub for a similar issue or PR before submitting --\u003e\r\n[ ] Feature request\r\n[ ] Documentation issue or request\r\n[ ] Support request =\u003e Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question\r\n\u003c/code\u003e\u003c/pre\u003e\r\n\r\n## Current behavior\r\n\u003c!-- Describe how the issue manifests. --\u003e\r\nWhen using `ngc` from the latest master (or `angular/compiler-cli-builds`), and compiling components with styles containing properties with a dash (like `line-height`), sometimes invalid code is generated in which objects contain the invalid `line-height` property.\r\n\r\nThis doesn't seem to always happen though. \r\n\r\nIt can be seen in `@angular/material@2.0.0-beta.8`, in the `MdExpansionPanelHeader` component. It contains the following styles array:\r\n```\r\nstyles: [\".mat-expansion-panel-header{cursor:pointer;display:flex;flex-direction:row;height:48px;line-height:48px;padding:0 24px}.mat-expansion-panel-header.mat-expanded{height:64px;line-height:64px}.mat-expansion-panel-header:focus,.mat-expansion-panel-header:hover{outline:0}.mat-expansion-panel-header.mat-expanded:focus,.mat-expansion-panel-header.mat-expanded:hover{background:inherit}.mat-content{display:flex;flex:1;flex-direction:row;overflow:hidden}.mat-expansion-panel-header-title{display:flex;flex-grow:1;font-size:15px;margin-right:16px}.mat-expansion-panel-header-description{display:flex;flex-grow:2;font-size:15px;margin-right:16px}.mat-expansion-indicator::after{border-style:solid;border-width:0 2px 2px 0;content:'';display:inline-block;padding:3px;transform:rotate(45deg);vertical-align:middle}\"],\r\n```\r\n\r\nThere's a lot of things here but the important ones are `line-height:48px;` and `line-height:64px`.\r\n\r\nWhen compiled through `ngc`, the following code is generated:\r\n```\r\nvar styles_MdExpansionPanelHeader = [\".mat-expansion-panel-header{cursor:pointer;display:flex;flex-direction:row;height:48px;line-height:48px;padding:0 24px}.mat-expansion-panel-header.mat-expanded{height:64px;line-height:64px}.mat-expansion-panel-header:focus,.mat-expansion-panel-header:hover{outline:0}.mat-expansion-panel-header.mat-expanded:focus,.mat-expansion-panel-header.mat-expanded:hover{background:inherit}.mat-content{display:flex;flex:1;flex-direction:row;overflow:hidden}.mat-expansion-panel-header-title{display:flex;flex-grow:1;font-size:15px;margin-right:16px}.mat-expansion-panel-header-description{display:flex;flex-grow:2;font-size:15px;margin-right:16px}.mat-expansion-indicator::after{border-style:solid;border-width:0 2px 2px 0;content:'';display:inline-block;padding:3px;transform:rotate(45deg);vertical-align:middle}\"];\r\nvar RenderType_MdExpansionPanelHeader = i0.ɵcrt({ encapsulation: 2, styles: styles_MdExpansionPanelHeader, data: { \"animation\": [{ type: 7, name: \"indicatorRotate\", definitions: [{ type: 0, name: \"collapsed\", styles: { type: 6, styles: { transform: \"rotate(0deg)\" }, offset: null }, options: undefined }, { type: 0, name: \"expanded\", styles: { type: 6, styles: { transform: \"rotate(180deg)\" }, offset: null }, options: undefined }, { type: 1, expr: \"expanded \u003c=\u003e collapsed\", animation: { type: 4, styles: null, timings: \"225ms cubic-bezier(0.4,0.0,0.2,1)\" }, options: null }], options: {} }, { type: 7, name: \"expansionHeight\", definitions: [{ type: 0, name: \"collapsed\", styles: { type: 6, styles: { height: \"48px\", line-height: \"48px\" }, offset: null }, options: undefined }, { type: 0, name: \"expanded\", styles: { type: 6, styles: { height: \"64px\", line-height: \"68px\" }, offset: null }, options: undefined }, { type: 1, expr: \"expanded \u003c=\u003e collapsed\", animation: { type: 4, styles: null, timings: \"225ms cubic-bezier(0.4,0.0,0.2,1)\" }, options: null }], options: {} }] } });\r\n```\r\n\r\nThe important parts are these two objects:\r\n```\r\n{ height: \"48px\", line-height: \"48px\" }\r\n{ height: \"64px\", line-height: \"68px\" }\r\n```\r\n\r\nThese are invalid JavaScript because the `line-height` key contains a dash, and should be enclosed in quotes instead (`\"line-height\"`).\r\n\r\n\r\n## Expected behavior\r\nValid JS code should be generated.\r\n\r\n\r\n## Minimal reproduction of the problem with instructions\r\nCompile AIO with the new `ngc`.\r\n\r\n## What is the motivation / use case for changing the behavior?\r\n\u003c!-- Describe the motivation or the concrete use case. --\u003e\r\nInvalid code generated.\r\n\r\n\r\n## Environment\r\n\r\n\u003cpre\u003e\u003ccode\u003e\r\nAngular version: `5.0.0-beta.4-1c2f3d4`\r\n\u003c!-- Check whether this is still an issue in the most recent Angular version --\u003e\r\n\r\nBrowser:\r\n- [ ] Chrome (desktop) version XX\r\n- [ ] Chrome (Android) version XX\r\n- [ ] Chrome (iOS) version XX\r\n- [ ] Firefox version XX\r\n- [ ] Safari (desktop) version XX\r\n- [ ] Safari (iOS) version XX\r\n- [ ] IE version XX\r\n- [ ] Edge version XX\r\n \r\nFor Tooling issues:\r\n- Node version: 6.11.1\r\n- Platform:  Windows\r\n\r\nOthers:\r\n\u003c!-- Anything else relevant?  Operating system version, IDE, package manager, HTTP server, ... --\u003e\r\n\u003c/code\u003e\u003c/pre\u003e\r\n/cc @tbosch \r\n","author":{"url":"https://github.com/filipesilva","@type":"Person","name":"filipesilva"},"datePublished":"2017-08-25T20:07:46.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":7},"url":"https://github.com/18883/angular/issues/18883"}