Add postcss and remove node-sass

[LasaleFamine]

Need to implement the postcss-loader with webpack during development and also for the production build.

[equinusocio]

We also need to enable this PostCSS plugin (included) to incapsulate CSS:

• Autoprefixer

We can also consider to add these plugins as a "starter kit":

• CssNext
• PostCSS Nested

[LasaleFamine]

Useful: posthtml-postcss

[equinusocio]

Absolutely!

[equinusocio]

PostHTML Loader

[LasaleFamine]

Give a try: feature/postcss

  $ yarn dev:postcss

And start playing with the webpack-app.usable.html component. Could be a solution? Currently only the autoprefixer plugin is loaded, but we can add other plugins easily.

If it's good, I think we can create a simple loader for Webpack (the PostHTML Loader seems not work), remove the .usable.html file and work directly on the main HTML file. 🚀

[LasaleFamine]

Changed files, now we have:

• webpack-app.html (main HTML with styles imported)
• webpack-app.style.html (CSS file compiled with POSTCSS and included within the main HTML
• webpack-app.postcss.html (PostCSS file that is watched during the yarn dev:postcss

Of course we need to avoid the .style file during development as we can load everything with Webpack. Need some changes to achieve this.

[equinusocio]

I can suggest a naming convention:

• webpack-app.es6.js
• webpack-app.html (main HTML with styles imported)
• style-module.html (CSS file compiled with POSTCSS and included within the main HTML)
• webpack-app.style.html (PostCSS file that is watched during the yarn dev:postcss without .postcss reference)

Since style-module.html will be generated on build time, during development will we have only:

• webpack-app.es6.js
• webpack-app.html
• webpack-app.style.html

What do you think? style-module is the official name of this kind of file. Check the Polymer Doc

[LasaleFamine]

Looks great!

[LasaleFamine]

Of course we need to avoid the .style file during development as we can load everything with Webpack. Need some changes to achieve this.

I think we simply can't.
I tried some configurations with Wepback but there is no way to just load the compiled file in memory and read it from the component HTML file, since we are obligated to require the CSS within the es6.js to be able to show it to Webpack file and this is not good, because the best thing we can do is to encapsulate the CSS within the JS (and after within the body) and not the component itself.

What do you think if we maintain the four files with the names you proposed? I pushed some changes, if you will run yarn dev it will watch both .es6.js and .style.html files and of course turn on a web server.
yarn dev:style (the old yarn dev:postcss) and yarn dev:js (the old yarn dev) are still present.

We can think about further development in the future.

[equinusocio]

we can have this? (a pure .postcss file) I think this is better than an .html file with css inside, if we can..

• webpack-app.es6.js
• webpack-app.html (main HTML with styles imported)
• style-module.html (CSS file compiled with POSTCSS and included within the main HTML)
• webpack-app.postcss (PostCSS file that is watched during the yarn dev:postcss without .postcss reference)

[LasaleFamine]

Oh yep, this could be a solution: compiling the postcss and inject it within the style-module. Will work on this ASAP.

[equinusocio]

I think is better have a webpack-app.postcss file rather than an "un-named" style.postcss.

This could be an example of component structure

style-module.html

<dom-module id='webpack-app-style'>
  <template>
    <style>
      /* inject point */
    </style>
  </template>
</dom-module>

webpack-app.html

<!-- Import the component css module-->
<link rel='import' href='style-module.html'>

<dom-module is='webpack-app'>
  <template>

    <!-- CSS inclusion point -->
    <style include='webpack-app-style'>
         /* ...additional CSS */
    </style>

    <content></content>

  </template>
</dom-module>