How to Use

[prateekbh]

A lot of components are now ready and working in the sample folder.

Until Uglify does not tree shake IIFE/classes(mishoo/UglifyJS#1261), we have a way to separately use the JS files like
import Button from 'preact-material-components/Button'
import Card from 'preact-material-components/Card' etc...

and for CSS i can think of something like
import 'preact-material-components/Button/Button.css'

but then there are css like typography, theme may be more..
and this pkg doesnt have any control regarding the typography, theme etc as these are mere classes without any DOM.

any Ideas about how to bundle CSS?
need an easy way to keep them separate else people will start falling back to complete bundle.

@developit

[developit]

@prateekbh I think most people would be using this via webpack or rollup, which would mean importing CSS is okay - maybe for ease-of-use Button straight up imports Button.css? I know we went the opposite route with preact-mdl, but that was because the coupling was so loose (people load MDL from a CDN, etc). Here it seems worthwhile to just get the CSS when you import the component.

Could then just have preact-material-components/global.css point to the global css.

[laggingreflex]

Tree shaking may also be applicable to CSS in future, with plugin like dead-css-loader which ATM depends on changes to css-loader (#402) and style-loader (#166) that haven't been merged yet.

[prateekbh]

are you saying that the Button component should also import '@material/button/dist/button.css' within itself?
Do you think it'll work all over without any errors?
Honestly i've not seen a huge enough kinda build system configurations to take this decision.

What if someone is working with scss and there loader does not even include .css files?
Suddenly they might start getting errors.

[prateekbh]

@laggingreflex that'd be great, but we need the solution for till that time..
anything in your mind?

[developit]

Hmm, yeah that's true. Maybe the build job for this repo could inline the CSS? (for now at least?)
Interesting point.

[prateekbh]

Had the exact same thing in my mind, do u happen to know any way to do it?
All the ways i know are specific to webpack or roll-up or something else

[Download]

Why not let the user take care of importing whatever CSS they need?
Just give some clear examples, one with Webpack, one with inline CSS, one with external stylesheet (on CDN) etc.

If the naming is consistent (as it is now), it's dead simple for the user and he can use any build tool he wants.

[developit]

@Download ideal would be both options. Currently delegating CSS imports to the user is a little ugly:

import Button from 'preact-material-components/Button';
import 'preact-material-components/Button/style.css';

import Card from 'preact-material-components/Card';
import 'preact-material-components/Card/style.css';

import Switch from 'preact-material-components/Switch';
import 'preact-material-components/Switch/style.css';

Also for ES imports:

import { Button, Card, Switch } from 'preact-material-components';
// still need to import all these :(
import 'preact-material-components/Button/style.css';
import 'preact-material-components/Card/style.css';
import 'preact-material-components/Switch/style.css';

It'd be really neat if there was an option to import it either way though:

import { Button, Card, Switch } from 'preact-material-components';
import 'preact-material-components/style';

// or

import Button from 'preact-material-components/Button';
import 'preact-material-components/Button.css';

[prateekbh]

@developit yes thats the plan to support both the ways.

1.) import the entire css
2.) import css module by module :)