{"action":"created","issue":{"url":"https://api.github.com/repos/devtools-html/debugger.html/issues/923","repository_url":"https://api.github.com/repos/devtools-html/debugger.html","labels_url":"https://api.github.com/repos/devtools-html/debugger.html/issues/923/labels{/name}","comments_url":"https://api.github.com/repos/devtools-html/debugger.html/issues/923/comments","events_url":"https://api.github.com/repos/devtools-html/debugger.html/issues/923/events","html_url":"https://github.com/devtools-html/debugger.html/issues/923","id":182548171,"number":923,"title":"Investigate introducing PostCSS","user":{"login":"jasonLaster","id":254562,"avatar_url":"https://avatars.githubusercontent.com/u/254562?v=3","gravatar_id":"","url":"https://api.github.com/users/jasonLaster","html_url":"https://github.com/jasonLaster","followers_url":"https://api.github.com/users/jasonLaster/followers","following_url":"https://api.github.com/users/jasonLaster/following{/other_user}","gists_url":"https://api.github.com/users/jasonLaster/gists{/gist_id}","starred_url":"https://api.github.com/users/jasonLaster/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jasonLaster/subscriptions","organizations_url":"https://api.github.com/users/jasonLaster/orgs","repos_url":"https://api.github.com/users/jasonLaster/repos","events_url":"https://api.github.com/users/jasonLaster/events{/privacy}","received_events_url":"https://api.github.com/users/jasonLaster/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2016-10-12T14:56:55Z","updated_at":"2016-11-08T22:16:00Z","closed_at":null,"body":"It would be nice to know if we could easily introduce PostCSS into our webpack pipeline. There are several potential benefits of PostCSS plugins, but one of the most important would be polyfilling features that are only partially supported like [margin-inline-start](https://github.com/gasolin/postcss-bidirection).\n\nThis came up in @amitzur's RTL pr #903.\n\nIncluding @gasolin as he's in our Taiwan office and wrote postcss-bidirection.\n"},"comment":{"url":"https://api.github.com/repos/devtools-html/debugger.html/issues/comments/259276780","html_url":"https://github.com/devtools-html/debugger.html/issues/923#issuecomment-259276780","issue_url":"https://api.github.com/repos/devtools-html/debugger.html/issues/923","id":259276780,"user":{"login":"amitzur","id":394320,"avatar_url":"https://avatars.githubusercontent.com/u/394320?v=3","gravatar_id":"","url":"https://api.github.com/users/amitzur","html_url":"https://github.com/amitzur","followers_url":"https://api.github.com/users/amitzur/followers","following_url":"https://api.github.com/users/amitzur/following{/other_user}","gists_url":"https://api.github.com/users/amitzur/gists{/gist_id}","starred_url":"https://api.github.com/users/amitzur/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/amitzur/subscriptions","organizations_url":"https://api.github.com/users/amitzur/orgs","repos_url":"https://api.github.com/users/amitzur/repos","events_url":"https://api.github.com/users/amitzur/events{/privacy}","received_events_url":"https://api.github.com/users/amitzur/received_events","type":"User","site_admin":false},"created_at":"2016-11-08T22:16:00Z","updated_at":"2016-11-08T22:16:00Z","body":"I did just now, but not successful yet.\r\nThere's an issue with postcss-bidirection not working properly. It throws the error below (also reproduced with postcss-cli).\r\nI managed to make postcss to work with just autoprefixer as a POC. Take a look at this commit 763c4fec33885ae9bc441f604eb0a1f9cfb1bdd3 to see my changes. I intentionally targeted only Sources.css until I get it to work.\r\nAny clue?\r\n\r\n```\r\n$ postcss --use postcss-bidirection public/js/components/Sources.css --local-plugins\r\nTypeError: [tcomb] Invalid value {\r\n  \"raws\": {\r\n    \"before\": \"\\n  \",\r\n    \"between\": \": \"\r\n  },\r\n  \"type\": \"decl\",\r\n  \"source\": {\r\n    \"start\": {\r\n      \"line\": 2,\r\n      \"column\": 3\r\n    },\r\n    \"input\": {\r\n      \"css\": \".sources-panel {\\n  flex: 1;\\n  display: flex;\\n  flex-direction: column;\\n  overflow: hidden;\\n}\\n\\n.sources-panel * {\\n  -moz-user-select: none;\\n  user-select: none;\\n}\\n\\n.sources-header {\\n  height: 30px;\\n  border-bottom: 1px solid var(--theme-splitter-color);\\n  padding-top: 0px;\\n  padding-bottom: 0px;\\n  line-height: 30px;\\n  font-size: 1.2em;\\n  display: flex;\\n  align-items: baseline;\\n  justify-content: space-between;\\n  -moz-user-select: none;\\n  user-select: none;\\n}\\n\\n.sources-header {\\n  padding-inline-start: 10px;\\n  text-align: start;\\n}\\n\\n.sources-header-info {\\n  font-size: 12px;\\n  color: var(--theme-comment-alt);\\n  font-weight: lighter;\\n  white-space: nowrap;\\n}\\n\\nhtml:not([dir=\\\"rtl\\\"]) .sources-header-info {\\n  padding-right: 10px;\\n  float: right;\\n}\\n\\nhtml[dir=\\\"rtl\\\"] .sources-header-info {\\n  padding-left: 10px;\\n  float: left;\\n}\\n\\n.sources-list {\\n  flex: 1;\\n  display: flex;\\n  overflow: hidden;\\n}\\n\\n.arrow,\\n.folder,\\n.domain,\\n.file,\\n.worker {\\n  fill: var(--theme-splitter-color);\\n}\\n\\n.domain,\\n.file,\\n.worker {\\n  position: relative;\\n  top: 1px;\\n}\\n\\n.worker,\\n.folder {\\n  position: relative;\\n  top: 2px;\\n}\\n\\n.domain svg,\\n.folder svg,\\n.worker svg {\\n  width: 15px;\\n}\\n\\n.file svg {\\n  width: 13px;\\n}\\n\\nhtml:not([dir=\\\"rtl\\\"]) .file svg,\\nhtml:not([dir=\\\"rtl\\\"]) .domain svg,\\nhtml:not([dir=\\\"rtl\\\"]) .folder svg,\\nhtml:not([dir=\\\"rtl\\\"]) .worker svg {\\n  margin-right: 5px;\\n}\\n\\nhtml[dir=\\\"rtl\\\"] .file svg,\\nhtml[dir=\\\"rtl\\\"] .domain svg,\\nhtml[dir=\\\"rtl\\\"] .folder svg,\\nhtml[dir=\\\"rtl\\\"] .worker svg {\\n  margin-left: 5px;\\n}\\n\\n.tree {\\n  -webkit-user-select: none;\\n  -moz-user-select: none;\\n  -ms-user-select: none;\\n  -o-user-select: none;\\n  user-select: none;\\n\\n  flex: 1;\\n  white-space: nowrap;\\n  overflow: auto;\\n}\\n\\n.tree button {\\n  display: block;\\n}\\n\\n.tree .node {\\n  padding: 2px 5px;\\n  position: relative;\\n  cursor: pointer;\\n}\\n\\n.tree .node:hover {\\n  background: var(--theme-tab-toolbar-background);\\n}\\n\\n.tree .node.focused {\\n  color: white;\\n  background-color: var(--theme-selection-background);\\n}\\n\\n.tree .node > div {\\n  margin-left: 10px;\\n}\\n\\n.tree .node.focused svg {\\n  fill: white;\\n}\\n\\n.sources-list .tree-node button {\\n  position: fixed;\\n}\\n\",\r\n      \"file\": \"/Users/amit/projects/debugger.html/public/js/components/Sources.css\"\r\n    },\r\n    \"end\": {\r\n      \"line\": 2,\r\n      \"column\": 10\r\n    }\r\n  },\r\n  \"prop\": \"flex\",\r\n  \"value\": \"1\"\r\n} supplied to [PostCSS#Container, Function]/0: PostCSS#Container\r\n    at Function.fail (/Users/amit/projects/debugger.html/node_modules/tcomb-postcss/node_modules/tcomb/lib/fail.js:2:9)\r\n    at assert (/Users/amit/projects/debugger.html/node_modules/tcomb-postcss/node_modules/tcomb/lib/assert.js:14:12)\r\n    at Irreducible (/Users/amit/projects/debugger.html/node_modules/tcomb-postcss/node_modules/tcomb/lib/irreducible.js:18:7)\r\n    at create (/Users/amit/projects/debugger.html/node_modules/tcomb-postcss/node_modules/tcomb/lib/create.js:11:53)\r\n    at Tuple (/Users/amit/projects/debugger.html/node_modules/tcomb-postcss/node_modules/tcomb/lib/tuple.js:42:22)\r\n    at fn (/Users/amit/projects/debugger.html/node_modules/tcomb-postcss/node_modules/tcomb/lib/func.js:84:14)\r\n    at /Users/amit/projects/debugger.html/node_modules/postcss-bidirection/index.js:72:13\r\n    at /usr/local/lib/node_modules/postcss-cli/node_modules/postcss/lib/container.js:148:26\r\n    at Rule.each (/usr/local/lib/node_modules/postcss-cli/node_modules/postcss/lib/container.js:114:22)\r\n    at Rule.walk (/usr/local/lib/node_modules/postcss-cli/node_modules/postcss/lib/container.js:147:21)\r\n```\r\n\r\n"}}
{"actor":{"display_login":"amitzur"}}