Yelp / lemon-reset

Consistent, cross-browser React DOM tags, powered by CSS Modules. 🍋
MIT License
131 stars 13 forks source link

add a UMD distribution #69

Closed mxmul closed 5 years ago

mxmul commented 5 years ago

Current ES / CommonJS distributions of lemon-reset make some assumptions about your build process (namely that you have css-loader, extract-text, etc... set up). This provides a pair of JS / CSS bundles that can be used independently in any module system, or directly in a browser without a build step. E.g:

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./dist/lemon-reset.css" />
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="./dist/lemon-reset.js"></script>
</head>
<body>
    <div id="app" />
    <script>
        ReactDOM.render(
            React.createElement(
                LemonReset.H1,
                null,
                ['hello!'],
            ),
            document.getElementById('app')
        );
    </script>
</body>

I also refactored a bunch of stuff to make the build smaller while I was here (the JS bundle is now 8K / 2K gzipped, down from 22K).

Having the standalone CSS bundle is especially helpful when you want to include lemon-reset in multiple JS bundles on a page without worrying about the reset styles in the second bundle overriding custom styles from the first bundle.