├── .gitignore
├── .netlify
├── .prettierrc
├── .babelrc
├── README.md
├── next.config.js
├── components
    ├── NavbarToggler.js
    ├── FormInline.js
    ├── Navbar.js
    ├── Jumbotron.js
    ├── Container.js
    └── NavbarNav.js
├── pages
    ├── index.js
    ├── bootstrap.js
    └── _document.js
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | .next
2 | node_modules
3 | out
4 | 


--------------------------------------------------------------------------------
/.netlify:
--------------------------------------------------------------------------------
1 | {"site_id":"c869247e-41b1-4267-9898-fe5792e17696","path":"out"}


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |     "tabWidth": 4,
3 |     "trailingComma": "all"
4 | }


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |     "presets": ["next/babel"],
3 |     "plugins": [["emotion", { "inline": true }]]
4 | }
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | CSS-in-JS experiences
2 | =====================
3 | 
4 | Hosted experiences can be found [here](https://css-in-js-experiences.ga/).
5 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     exportPathMap() {
 3 |         return {
 4 |             "/": { page: "/" },
 5 |             "/bootstrap": { page: "/bootstrap" },
 6 |         };
 7 |     },
 8 |     webpack(config, { dev }) {
 9 |         if (dev) {
10 |             return config;
11 |         }
12 | 
13 |         config.resolve.alias = {
14 |             react: "preact-compat/dist/preact-compat",
15 |             "react-dom": "preact-compat/dist/preact-compat"
16 |         };
17 | 
18 |         return config;
19 |     },
20 | };
21 | 


--------------------------------------------------------------------------------
/components/NavbarToggler.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |     navbarCollapse,
 3 |     navbarToggler,
 4 |     navbarTogglerIcon,
 5 |     show,
 6 | } from "../styles/bootstrap.js";
 7 | 
 8 | export const NavbarToggler = () => (
 9 |     <button
10 |         className={navbarToggler}
11 |         onClick={() => {
12 |             document
13 |                 .getElementsByClassName(navbarCollapse)[0]
14 |                 .classList.toggle(show);
15 |         }}
16 |         type="button"
17 |     >
18 |         <span className={navbarTogglerIcon} />
19 |     </button>
20 | );
21 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | 
 3 | export default () => (
 4 |     <div style={{ padding: "2em" }}>
 5 |         <h1>
 6 |             <Link href="/bootstrap">
 7 |                 <a>Integration of Bootstrap with Emotion</a>
 8 |             </Link>
 9 |         </h1>
10 |         <p>
11 |             Original example can be found{" "}
12 |             <a href="http://getbootstrap.com/docs/4.0/examples/jumbotron/">
13 |                 here
14 |             </a>.<br />
15 |             Github repository is{" "}
16 |             <a href="https://github.com/brikou/CSS-in-JS-experiences">here</a>.
17 |         </p>
18 |     </div>
19 | );
20 | 


--------------------------------------------------------------------------------
/components/FormInline.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |     btn,
 3 |     btnOutlineSuccess,
 4 |     formControl,
 5 |     formInline,
 6 |     mrSm2,
 7 |     my2,
 8 |     myLg0,
 9 |     mySm0,
10 | } from "../styles/bootstrap.js";
11 | 
12 | export const FormInline = () => (
13 |     <form className={`${formInline} ${my2} ${myLg0}`}>
14 |         <input
15 |             className={`${formControl} ${mrSm2}`}
16 |             type="text"
17 |             placeholder="Search"
18 |             aria-label="Search"
19 |         />
20 |         <button className={`${btn} ${btnOutlineSuccess} ${my2} ${mySm0}`} type="submit">
21 |             Search
22 |         </button>
23 |     </form>
24 | );
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "dependencies": {
 3 |         "babel-plugin-emotion": "8.0.2",
 4 |         "emotion": "8.0.2",
 5 |         "emotion-server": "8.0.2",
 6 |         "module-alias": "2.0.1",
 7 |         "next": "3.2.2",
 8 |         "preact": "8.2.5",
 9 |         "preact-compat": "3.17.0",
10 |         "react": "15.6.1",
11 |         "react-dom": "15.6.1"
12 |     },
13 |     "scripts": {
14 |         "dev": "next dev",
15 |         "build": "next build",
16 |         "preexport": "npm run-script build",
17 |         "export": "next export",
18 |         "predeploy": "npm run-script export",
19 |         "deploy": "npx netlify deploy",
20 |         "prestart": "npm run-script export",
21 |         "start": "cd out && python3 -m http.server"
22 |     }
23 | }
24 | 


--------------------------------------------------------------------------------
/components/Navbar.js:
--------------------------------------------------------------------------------
 1 | import { FormInline } from "./FormInline";
 2 | import { NavbarNav } from "./NavbarNav";
 3 | import { NavbarToggler } from "./NavbarToggler";
 4 | import {
 5 |     bgDark,
 6 |     collapse,
 7 |     fixedTop,
 8 |     navbar,
 9 |     navbarBrand,
10 |     navbarCollapse,
11 |     navbarDark,
12 |     navbarExpandMd,
13 | } from "../styles/bootstrap.js";
14 | 
15 | export const Navbar = () => (
16 |     <nav
17 |         className={`${navbar} ${navbarExpandMd} ${navbarDark} ${fixedTop} ${bgDark}`}
18 |         style={{ position: "fixed" }}
19 |     >
20 |         <a className={navbarBrand} href="/">
21 |             Navbar
22 |         </a>
23 |         <NavbarToggler />
24 |         <div className={`${collapse} ${navbarCollapse}`}>
25 |             <NavbarNav />
26 |             <FormInline />
27 |         </div>
28 |     </nav>
29 | );
30 | 


--------------------------------------------------------------------------------
/pages/bootstrap.js:
--------------------------------------------------------------------------------
 1 | import { hydrate } from "emotion-server";
 2 | import Head from "next/head";
 3 | 
 4 | import { Navbar } from "../components/Navbar";
 5 | import { Jumbotron } from "../components/Jumbotron";
 6 | import { Container } from "../components/Container";
 7 | 
 8 | if (typeof window !== "undefined") {
 9 |     hydrate(window.__NEXT_DATA__.ids);
10 | }
11 | 
12 | export default () => (
13 |     <div style={{ paddingTop: "3.5rem" }}>
14 |         <Head>
15 |             <meta
16 |                 content={[
17 |                     "initial-scale=1",
18 |                     "shrink-to-fit=no",
19 |                     "width=device-width",
20 |                 ].toString()}
21 |                 name="viewport"
22 |             />
23 |         </Head>
24 |         <Navbar />
25 |         <Jumbotron />
26 |         <Container />
27 |     </div>
28 | );
29 | 


--------------------------------------------------------------------------------
/components/Jumbotron.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |     btn,
 3 |     btnLg,
 4 |     btnPrimary,
 5 |     container,
 6 |     display3,
 7 |     jumbotron,
 8 | } from "../styles/bootstrap.js";
 9 | 
10 | export const Jumbotron = () => (
11 |     <div className={jumbotron}>
12 |         <div className={container}>
13 |             <h1 className={display3}>Hello, world!</h1>
14 |             <p>
15 |                 This is a template for a simple marketing or informational
16 |                 website. It includes a large callout called a jumbotron and
17 |                 three supporting pieces of content. Use it as a starting point
18 |                 to create something more unique.
19 |             </p>
20 |             <p>
21 |                 <a
22 |                     className={`${btn} ${btnPrimary} ${btnLg}`}
23 |                     href="#"
24 |                     role="button"
25 |                 >
26 |                     Learn more »
27 |                 </a>
28 |             </p>
29 |         </div>
30 |     </div>
31 | );
32 | 


--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import Document, { Head, Main, NextScript } from "next/document";
 2 | import { extractCritical } from "emotion-server";
 3 | import { flush } from "emotion";
 4 | 
 5 | const dev = process.env.NODE_ENV !== "production";
 6 | 
 7 | export default class MyDocument extends Document {
 8 |     static getInitialProps({ renderPage }) {
 9 |         if (dev) {
10 |             flush();
11 |         }
12 |         const page = renderPage();
13 |         const styles = extractCritical(page.html);
14 |         return { ...page, ...styles };
15 |     }
16 | 
17 |     constructor(props) {
18 |         super(props);
19 |         const { __NEXT_DATA__, ids } = props;
20 |         if (ids) {
21 |             __NEXT_DATA__.ids = ids;
22 |         }
23 |     }
24 | 
25 |     render() {
26 |         return (
27 |             <html>
28 |                 <Head>
29 |                     <title>CSS-in-JS-experiences</title>
30 |                     <style
31 |                         dangerouslySetInnerHTML={{ __html: this.props.css }}
32 |                     />
33 |                 </Head>
34 |                 <body>
35 |                     <Main />
36 |                     <NextScript />
37 |                 </body>
38 |             </html>
39 |         );
40 |     }
41 | }
42 | 


--------------------------------------------------------------------------------
/components/Container.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |     btn,
 3 |     btnSecondary,
 4 |     colMd4,
 5 |     container,
 6 |     row,
 7 | } from "../styles/bootstrap.js";
 8 | 
 9 | export const Container = () => (
10 |     <div className={container}>
11 |         <div className={row}>
12 |             {[...Array(3)].map((_, key) => (
13 |                 <div key={key} className={colMd4}>
14 |                     <h2>Heading</h2>
15 |                     <p>
16 |                         Donec id elit non mi porta gravida at eget metus. Fusce
17 |                         dapibus, tellus ac cursus commodo, tortor mauris
18 |                         condimentum nibh, ut fermentum massa justo sit amet
19 |                         risus. Etiam porta sem malesuada magna mollis euismod.
20 |                         Donec sed odio dui.{" "}
21 |                     </p>
22 |                     <p>
23 |                         <a
24 |                             className={`${btn} ${btnSecondary}`}
25 |                             href="#"
26 |                             role="button"
27 |                         >
28 |                             View details »
29 |                         </a>
30 |                     </p>
31 |                 </div>
32 |             ))}
33 |         </div>
34 |         <hr />
35 |         <footer>
36 |             <p>© Company 2017</p>
37 |         </footer>
38 |     </div>
39 | );
40 | 


--------------------------------------------------------------------------------
/components/NavbarNav.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |     active,
 3 |     dropdown,
 4 |     dropdownItem,
 5 |     dropdownMenu,
 6 |     dropdownToggle,
 7 |     mrAuto,
 8 |     navLink,
 9 |     navbarNav,
10 |     show,
11 |     srOnly,
12 | } from "../styles/bootstrap.js";
13 | 
14 | export const NavbarNav = () => (
15 |     <ul className={`${navbarNav} ${mrAuto}`}>
16 |         <li className={`nav-item ${active}`}>
17 |             <a className={navLink} href="#">
18 |                 Home <span className={`${srOnly}`}>(current)</span>
19 |             </a>
20 |         </li>
21 |         <li className="nav-item">
22 |             <a className={navLink} href="#">
23 |                 Link
24 |             </a>
25 |         </li>
26 |         <li className="nav-item">
27 |             <a className={`${navLink} disabled`} href="#">
28 |                 Disabled
29 |             </a>
30 |         </li>
31 |         <li className={`nav-item ${dropdown}`}>
32 |             <a
33 |                 className={`${navLink} ${dropdownToggle}`}
34 |                 href="#"
35 |                 onClick={() => {
36 |                     document
37 |                         .getElementsByClassName(dropdown)[0]
38 |                         .classList.toggle(show);
39 |                     document
40 |                         .getElementsByClassName(dropdownMenu)[0]
41 |                         .classList.toggle(show);
42 |                 }}
43 |             >
44 |                 Dropdown
45 |             </a>
46 |             <div className={dropdownMenu}>
47 |                 <a className={dropdownItem} href="#">
48 |                     Action
49 |                 </a>
50 |                 <a className={dropdownItem} href="#">
51 |                     Another action
52 |                 </a>
53 |                 <a className={dropdownItem} href="#">
54 |                     Something else here
55 |                 </a>
56 |             </div>
57 |         </li>
58 |     </ul>
59 | );
60 | 


--------------------------------------------------------------------------------