{"action":"created","issue":{"url":"https://api.github.com/repos/straker/livingcss/issues/19","repository_url":"https://api.github.com/repos/straker/livingcss","labels_url":"https://api.github.com/repos/straker/livingcss/issues/19/labels{/name}","comments_url":"https://api.github.com/repos/straker/livingcss/issues/19/comments","events_url":"https://api.github.com/repos/straker/livingcss/issues/19/events","html_url":"https://github.com/straker/livingcss/issues/19","id":170880608,"number":19,"title":"Issues with Shadow DOM?","user":{"login":"IORoot","id":8770616,"avatar_url":"https://avatars.githubusercontent.com/u/8770616?v=3","gravatar_id":"","url":"https://api.github.com/users/IORoot","html_url":"https://github.com/IORoot","followers_url":"https://api.github.com/users/IORoot/followers","following_url":"https://api.github.com/users/IORoot/following{/other_user}","gists_url":"https://api.github.com/users/IORoot/gists{/gist_id}","starred_url":"https://api.github.com/users/IORoot/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/IORoot/subscriptions","organizations_url":"https://api.github.com/users/IORoot/orgs","repos_url":"https://api.github.com/users/IORoot/repos","events_url":"https://api.github.com/users/IORoot/events{/privacy}","received_events_url":"https://api.github.com/users/IORoot/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2016-08-12T14:13:51Z","updated_at":"2016-08-12T16:52:49Z","closed_at":null,"body":"Hi there,\r\nSo, I've been using your livingcss (which is awesome BTW) and it's been working locally without a hitch, but I've started trying to run it on my server and the livingcss gulp process doesn't seem to be working quite right...\r\nI've stripped everything down to a single livingcss comment block and the gulp process only has a src > livingcss > destination, but still things are not as they should be.\r\n\r\nThe first issue is that when I look at the Devtools on server, it doesn't seem to be loading the shadow DOM and any Shady DOM Styles:\r\n![screen shot 2016-08-12 at 15 01 40](https://cloud.githubusercontent.com/assets/8770616/17624724/c65af620-609d-11e6-8877-619383d24edf.png)\r\n(The local file doesn't have this).\r\n\r\nMy gulpfile looks like this:\r\n\r\n```javascript\r\n// Tell node.js about these modules.\r\nvar gulp         = require('gulp');\r\nvar include      = require(\"gulp-include\");\r\nvar concat       = require(\"gulp-concat\");\r\nvar sass         = require('gulp-sass');\r\nvar livingcss    = require('gulp-livingcss');\r\nvar autoprefixer = require('gulp-autoprefixer');\r\n\r\n// CONCAT / SASS Compile into CSS file.\r\ngulp.task('livingcss-sass', function(){\r\n    return gulp.src([\r\n            './resources/assets/sass/molecules/swatch.scss',\r\n    ])\r\n        .pipe(concat('styles.scss'))\r\n        .pipe(sass())\r\n        .pipe(gulp.dest('./public/livingcss/src/'))\r\n});\r\n\r\n//Run the Living Stylesheet creator.\r\ngulp.task('livingcss',['livingcss-sass'], function () {\r\n    gulp.src('./public/livingcss/src/styles.css')\r\n        .pipe(livingcss())\r\n        .pipe(gulp.dest('./public/livingcss/dist/'))\r\n});\r\n```\r\n\r\nThe swatch.scss file has the following:\r\n\r\n```css\r\n/**\r\n * Swatch\r\n *\r\n * Everything to do with the combinations of Atom components into Molecules.\r\n *\r\n * @section Swatch\r\n * @page Molecules\r\n *\r\n * @example\r\n * <div class=\"rk-swatch\">\r\n *  <div class=\"rk-swatch-col\"></div>\r\n * </div>\r\n */\r\n\r\n$rk-white :                    #f7f7f7;\r\n\r\n.rk-swatch {\r\n\r\n  // Display & Positioning\r\n\r\n  // Box Model\r\n  width : 150px;\r\n  margin: 10px;\r\n  padding-bottom: 5px;\r\n\r\n  // Colour\r\n  background: $rk-white;\r\n\r\n}\r\n\r\n.rk-swatch-col {\r\n  display: block;\r\n  // Box Model\r\n  width: 100px;\r\n  height: 150px;\r\n\r\n  background: #990000;\r\n}\r\n```\r\n\r\nThis creates the result:\r\n\r\n![screen shot 2016-08-12 at 15 10 47](https://cloud.githubusercontent.com/assets/8770616/17625049/091b37ee-609f-11e6-8ace-17e5c886eabf.png)\r\n\r\nWhich is not the result that should be displayed. The styling for the `rk-swatch-col` DIV is not applied and the shadow DOM is not present.\r\n\r\nNot sure what's happening at all. I've got it all successfully running locally and the results are fine. \r\n\r\nIs this an issue here?\r\n"},"comment":{"url":"https://api.github.com/repos/straker/livingcss/issues/comments/239499575","html_url":"https://github.com/straker/livingcss/issues/19#issuecomment-239499575","issue_url":"https://api.github.com/repos/straker/livingcss/issues/19","id":239499575,"user":{"login":"straker","id":2433219,"avatar_url":"https://avatars.githubusercontent.com/u/2433219?v=3","gravatar_id":"","url":"https://api.github.com/users/straker","html_url":"https://github.com/straker","followers_url":"https://api.github.com/users/straker/followers","following_url":"https://api.github.com/users/straker/following{/other_user}","gists_url":"https://api.github.com/users/straker/gists{/gist_id}","starred_url":"https://api.github.com/users/straker/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/straker/subscriptions","organizations_url":"https://api.github.com/users/straker/orgs","repos_url":"https://api.github.com/users/straker/repos","events_url":"https://api.github.com/users/straker/events{/privacy}","received_events_url":"https://api.github.com/users/straker/received_events","type":"User","site_admin":false},"created_at":"2016-08-12T16:52:49Z","updated_at":"2016-08-12T16:52:49Z","body":"So there does seem to be a bug in the web component that prevents styling correctly. Every element in the example should have the class `livingcss-example` appended to it, but for some reason your inner `rk-swatch-col` div doesn't. I'll take a look and see what happened."}}
{"actor":{"display_login":"straker"}}