{"action":"created","issue":{"url":"https://api.github.com/repos/material-components/material-components-web-codelabs/issues/52","repository_url":"https://api.github.com/repos/material-components/material-components-web-codelabs","labels_url":"https://api.github.com/repos/material-components/material-components-web-codelabs/issues/52/labels{/name}","comments_url":"https://api.github.com/repos/material-components/material-components-web-codelabs/issues/52/comments","events_url":"https://api.github.com/repos/material-components/material-components-web-codelabs/issues/52/events","html_url":"https://github.com/material-components/material-components-web-codelabs/issues/52","id":347638810,"node_id":"MDU6SXNzdWUzNDc2Mzg4MTA=","number":52,"title":"[MDC-103] <No mixin named mdc-typography-baseline-top>","user":{"login":"zdolson","id":32683056,"node_id":"MDQ6VXNlcjMyNjgzMDU2","avatar_url":"https://avatars2.githubusercontent.com/u/32683056?v=4","gravatar_id":"","url":"https://api.github.com/users/zdolson","html_url":"https://github.com/zdolson","followers_url":"https://api.github.com/users/zdolson/followers","following_url":"https://api.github.com/users/zdolson/following{/other_user}","gists_url":"https://api.github.com/users/zdolson/gists{/gist_id}","starred_url":"https://api.github.com/users/zdolson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zdolson/subscriptions","organizations_url":"https://api.github.com/users/zdolson/orgs","repos_url":"https://api.github.com/users/zdolson/repos","events_url":"https://api.github.com/users/zdolson/events{/privacy}","received_events_url":"https://api.github.com/users/zdolson/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-08-04T18:28:02Z","updated_at":"2018-08-13T18:51:17Z","closed_at":null,"author_association":"NONE","body":"Following tutorial MDC-103 Web: Material Theming with Color, Shape, Elevation and Type (Web) (https://codelabs.developers.google.com/codelabs/mdc-103-web/#3)\r\n\r\nOn part 4, we introduce the typography module. After adding the snippets of code for *app.scss* and *home.html*, refreshing the localhost:8080 page results in no changes due to webpack throwing a compilation error.\r\n```\r\nERROR in ./app.scss\r\n    Module build failed: \r\n      @include mdc-typography-baseline-top($mdc-list-item-primary-text-baseline-height_);\r\n              ^\r\n          No mixin named mdc-typography-baseline-top\r\n          in node_modules/@material/list/mdc-list.scss (line 109, column 12)\r\n     @ multi (webpack)-dev-server/client?http://localhost:8080 ./app.scss\r\n```\r\n\r\nAfter looking through some of the typography module code, perhaps there is confusion between the imported *_mixins.scss* file and *@material/typography/mixins*?\r\n\r\nIssue from the tutorial side is line 113 in *app.scss*:\r\n```\r\n@include mdc-list-item-primary-text-ink-color(on-primary);\r\n```\r\nThis line is then calling line 109 (line 3 in the following class snippet) from *node_modules/@material/list/mdc-list.scss*:\r\n```\r\n.mdc-list-item__primary-text {\r\n  @include mdc-typography-overflow-ellipsis;\r\n  @include mdc-typography-baseline-top($mdc-list-item-primary-text-baseline-height_);\r\n  @include mdc-typography-baseline-bottom($mdc-list-item-secondary-text-baseline-height_);\r\n\r\n  display: block;\r\n\r\n  // stylelint-disable plugin/selector-bem-pattern\r\n  .mdc-list--dense & {\r\n    @include mdc-typography-baseline-top($mdc-list-dense-item-primary-text-baseline-height_);\r\n    @include mdc-typography-baseline-bottom($mdc-list-item-secondary-text-baseline-height_);\r\n  }\r\n  // stylelint-enable plugin/selector-bem-pattern\r\n}\r\n```\r\n\r\nHope this helps address the issue properly."},"comment":{"url":"https://api.github.com/repos/material-components/material-components-web-codelabs/issues/comments/412624677","html_url":"https://github.com/material-components/material-components-web-codelabs/issues/52#issuecomment-412624677","issue_url":"https://api.github.com/repos/material-components/material-components-web-codelabs/issues/52","id":412624677,"node_id":"MDEyOklzc3VlQ29tbWVudDQxMjYyNDY3Nw==","user":{"login":"kfranqueiro","id":398379,"node_id":"MDQ6VXNlcjM5ODM3OQ==","avatar_url":"https://avatars2.githubusercontent.com/u/398379?v=4","gravatar_id":"","url":"https://api.github.com/users/kfranqueiro","html_url":"https://github.com/kfranqueiro","followers_url":"https://api.github.com/users/kfranqueiro/followers","following_url":"https://api.github.com/users/kfranqueiro/following{/other_user}","gists_url":"https://api.github.com/users/kfranqueiro/gists{/gist_id}","starred_url":"https://api.github.com/users/kfranqueiro/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kfranqueiro/subscriptions","organizations_url":"https://api.github.com/users/kfranqueiro/orgs","repos_url":"https://api.github.com/users/kfranqueiro/repos","events_url":"https://api.github.com/users/kfranqueiro/events{/privacy}","received_events_url":"https://api.github.com/users/kfranqueiro/received_events","type":"User","site_admin":false},"created_at":"2018-08-13T18:51:17Z","updated_at":"2018-08-13T18:51:17Z","author_association":"CONTRIBUTOR","body":"We were discussing this again today, and realized that while the 103 codelab pins its install commands at 0.35.0, the instructions in 101 and 102 were not doing the same, which could potentially lead to mixed results and errors when following each of these codelabs consecutively. The commands in MDC-101 and MDC-102 have since been corrected (thanks @williamernest!).\r\n\r\nIf you clear your `node_modules` and `package.json` dependencies and then re-do the `npm install` commands for each of the packages installed throughout 101, 102, and 103, all with `@0.35.0`, it should work. Alternatively, starting with `mdc-103/starter` should already have the previous packages from 101 and 102 fixed at v0.35.0.\r\n\r\nHope this helps, and sorry for all the trouble! I'll also be entering an issue for us to update the codelabs to use a more recent MDC Web release which should also avoid this particular issue."}}
{"actor":{"display_login":"kfranqueiro"}}