Restructured packages and using different sass-render

[chanar]

Quick overview of changes I have done:

• No usage of scripts folder, instead using https://www.npmjs.com/package/wc-sass-render
• Moved package//scss contents to package//src/components/styles
• Added webpack config from your lit-components folder
• Demo folder for running components in html
• Added new commands

"bootstrap": "lerna bootstrap",
"start:watch": "sass-render ./packages/*/src/components/styles/*.scss -w -t sass-template.tmpl",
"start:dev": "webpack-dev-server --open",
"start:storybook": "start-storybook -p 6006",
"start": "npm-run-all --parallel start:*"

• Removed picka (I was unable to npm run dist as pack was not recognized even after globally installing it. Didn't have any instructions either).

Compilations are now super fast, support running in dev sever and builds.

So first install wc-sass-render globally yarn global add wc-sass-render and then npm run bootstrap

[web-padawan]

Please don't change the style of the CSS functions.

[chanar]

Oh right. This is due to node-sass (if i'm not wrong) unable to compile rgb using css variables and default values. sass/node-sass#2251

[web-padawan]

The existing script works, and we shouldn't change valid CSS because of weird bugs in tools.

[web-padawan]

Please don't remove this script and relevant @pika/pack sections as they are needed.

[chanar]

Could you explain why you have choosen picka/pack packages. But anyway, was not my intention to remove them. Just to get this stuff running.

[web-padawan]

These are needed to prepare ES module version and bundled version for CDN.
Check https://github.com/pikapkg/pack for more details.

And yes, the scss files are in the separate folders intentionally, so as Pack doesn't attempt to process those (it only picks anything inside src).

[web-padawan]

1. Please remove any .DS_Store files from the PR

2. Please restore the dist scripts and @pika/pack sections, we need those for publishing.

3. I don't see any need in committing custom-elements-es5-adapter.js to this repo, neither webcomponents-bundle.js. You should be able to resolve those from the node_modules

[lkraav]

@web-padawan checked your comments, looks like all achievable. Overall do you see this PR going in a useful direction, though?

[web-padawan]

@lkraav yes, the overall direction seems reasonable to me.

The only thing what I would like to keep is folders structure. So basically .scss files should stay in scss folders as they are. When placing them into src, Pack tries to process them and fails.

[lkraav]

@chanar did you push updates yet? Not seeing anything here.

[chanar]

For this, I haven't. I'm still waiting for padawan comment on rgb.

[lkraav]

@chanar in addition to #15 (comment) or...?

[lkraav]

@chanar on feature branch development, git pull --rebase is usually the best (read: cleanest, most readable) process vs repeated master merges.

[lkraav]

@chanar I'm not understanding the need to introduce package-lock.json here, why wouldn't continuing with just yarn not work?

[web-padawan]

Yes, please use yarn.lock instead of package-lock.json as the project is using Yarn workspaces.
See also finnhvman/matter#5 (comment) for details about rgb issue in node-sass.

[web-padawan]

I merged #18 with adapted changes based on #17 so let me close this PR.