Not initial commit

.gitignore

@@ -0,0 +1,2 @@
+*.js
+node_modules

.npmignore

@@ -0,0 +1,5 @@
+*.ts
+.vscode
+lib/__tests__
+tsconfig.json
+tslint.json

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "files.exclude": { "**/*.js": { "when": "$(basename).ts" } },
+    "prettier.tabWidth": 4,
+    "prettier.trailingComma": "all",
+    "tslint.autoFixOnSave": true
+}

README.md

@@ -1 +1,29 @@
-# CSS-in-JS-generator
+# CSS-in-JS-generator
+
+__CSS-in-JS-generator__ is a tool to generate trendy CSS-in-JS files from regular CSS.
+
+## Install
+
+```sh
+npm install css-in-js-generator
+```
+
+## Usage
+
+Here is a demo to convert [Bootstrap](http://getbootstrap.com/) to CSS-in-JS usable by [emotion](https://emotion.sh/).
+
+```sh
+mkdir bootstrap
+
+curl https://unpkg.com/bootstrap@4.0.0-beta/dist/css/bootstrap.css | \
+    node ./node_modules/css-in-js-generator/index.js | \
+    tar -xz --directory=bootstrap
+```
+
+## Demo
+
+A demo using next.js, emotion and bootstrap is available [here](https://css-in-js-experiences.ga/bootstrap/), source code of demo is [here](https://github.com/brikou/CSS-in-JS-experiences).
+
+## License
+
+MIT

index.ts

@@ -0,0 +1,29 @@
+// tslint:disable no-console
+
+import * as archiver from "archiver";
+import { createWriteStream, readFileSync } from "fs";
+
+import { convertCssForEmotion } from "./lib/convertCssForEmotion";
+
+const convertedCss = convertCssForEmotion(readFileSync("/dev/stdin").toString());
+
+const writeStream = createWriteStream("/dev/stdout");
+
+const archive = archiver("tar", {
+    gzip: true,
+    gzipOptions: {
+        level: 1,
+    },
+});
+
+archive.on("error", (error) => {
+    throw error;
+});
+
+archive.pipe(writeStream);
+
+convertedCss.forEach((source, name) => {
+    archive.append(source, { name });
+});
+
+archive.finalize();

lib/__tests__/convertCssForEmotion.test.ts

@@ -0,0 +1,294 @@
+import { convertCssForEmotion } from "../convertCssForEmotion";
+
+test("convertCssForEmotion", () => {
+    const css = `*,
+*::before,
+*::after {
+    box-sizing: inherit;
+}
+
+@-ms-viewport {
+    width: device-width;
+}
+
+@media print {
+    .badge {
+        border: 1px solid #000;
+    }
+}
+
+select.form-control:not([size]):not([multiple]) {
+    height: calc(2.25rem + 2px);
+}
+
+.alert-dismissible .close {
+    position: relative;
+    top: -0.75rem;
+    right: -1.25rem;
+    padding: 0.75rem 1.25rem;
+    color: inherit;
+}
+
+.alert-link {
+    font-weight: bold;
+}
+
+.alert-primary {
+    color: #004085;
+    background-color: #cce5ff;
+    border-color: #b8daff;
+}
+
+.alert-primary hr {
+    border-top-color: #9fcdff;
+}
+
+.alert-primary .alert-link {
+    color: #002752;
+}
+
+.badge {
+    display: inline-block;
+    padding: 0.25em 0.4em;
+    font-size: 75%;
+    font-weight: bold;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: 0.25rem;
+}
+
+.badge-danger {
+    color: #fff;
+    background-color: #dc3545;
+}
+
+.badge-danger[href]:focus,
+.badge-danger[href]:hover {
+    color: #fff;
+    text-decoration: none;
+    background-color: #bd2130;
+}
+
+.badge:empty {
+    display: none;
+}
+
+.blockquote-footer {
+    display: block;
+    font-size: 80%;
+    color: #868e96;
+}
+
+.blockquote-footer::before {
+    content: "\\2014 \\00A0";
+}
+
+.close {
+    float: right;
+    font-size: 1.5rem;
+    font-weight: bold;
+    line-height: 1;
+    color: #000;
+    text-shadow: 0 1px 0 #fff;
+    opacity: .5;
+}
+
+.display-1 {
+    font-size: 6rem;
+    font-weight: 300;
+    line-height: 1.1;
+}
+
+.display-2 {
+    font-size: 5.5rem;
+    font-weight: 300;
+    line-height: 1.1;
+}
+
+.form-control::placeholder {
+    color: #868e96;
+    opacity: 1;
+}
+`;
+
+    const cssForEmotion = new Map([
+        [
+            "index.js",
+            `import { injectGlobal } from "emotion";
+
+export default () => injectGlobal\`
+    *,
+    *::before,
+    *::after {
+        box-sizing: inherit;
+    }
+
+    @-ms-viewport {
+        width: device-width;
+    }
+\`;
+`,
+        ],
+        [
+            "alert/dismissible.js",
+            `import { css } from "emotion";
+
+import { close } from "../close";
+
+export const alertDismissible = css\`
+    & .\${close} {
+        position: relative;
+        top: -0.75rem;
+        right: -1.25rem;
+        padding: 0.75rem 1.25rem;
+        color: inherit;
+    }
+\`;
+`,
+        ],
+        [
+            "alert/link.js",
+            `import { css } from "emotion";
+
+export const alertLink = css\`font-weight: bold;\`;
+`,
+        ],
+        [
+            "alert/primary.js",
+            `import { css } from "emotion";
+
+import { alertLink } from "./link";
+
+export const alertPrimary = css\`
+    color: #004085;
+    background-color: #cce5ff;
+    border-color: #b8daff;
+
+    & hr {
+        border-top-color: #9fcdff;
+    }
+
+    & .\${alertLink} {
+        color: #002752;
+    }
+\`;
+`,
+        ],
+        [
+            "badge.js",
+            `import { css } from "emotion";
+
+export const badge = css\`
+    @media print {
+        & {
+            border: 1px solid #000;
+        }
+    }
+
+    display: inline-block;
+    padding: 0.25em 0.4em;
+    font-size: 75%;
+    font-weight: bold;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: 0.25rem;
+
+    &:empty {
+        display: none;
+    }
+\`;
+`,
+        ],
+        [
+            "badge/danger.js",
+            `import { css } from "emotion";
+
+export const badgeDanger = css\`
+    color: #fff;
+    background-color: #dc3545;
+
+    &[href]:focus,
+    &[href]:hover {
+        color: #fff;
+        text-decoration: none;
+        background-color: #bd2130;
+    }
+\`;
+`,
+        ],
+        [
+            "blockquote-footer.js",
+            `import { css } from "emotion";
+
+export const blockquoteFooter = css\`
+    display: block;
+    font-size: 80%;
+    color: #868e96;
+
+    &::before {
+        content: "\\\\2014 \\\\00A0";
+    }
+\`;
+`,
+        ],
+        [
+            "close.js",
+            `import { css } from "emotion";
+
+export const close = css\`
+    float: right;
+    font-size: 1.5rem;
+    font-weight: bold;
+    line-height: 1;
+    color: #000;
+    text-shadow: 0 1px 0 #fff;
+    opacity: 0.5;
+\`;
+`,
+        ],
+        [
+            "display/1.js",
+            `import { css } from "emotion";
+
+export const display1 = css\`
+    font-size: 6rem;
+    font-weight: 300;
+    line-height: 1.1;
+\`;
+`,
+        ],
+        [
+            "display/2.js",
+            `import { css } from "emotion";
+
+export const display2 = css\`
+    font-size: 5.5rem;
+    font-weight: 300;
+    line-height: 1.1;
+\`;
+`,
+        ],
+        [
+            "form-control.js",
+            `import { css } from "emotion";
+
+export const formControl = css\`
+    select&:not([size]):not([multiple]) {
+        height: calc(2.25rem + 2px);
+    }
+
+    &::placeholder {
+        color: #868e96;
+        opacity: 1;
+    }
+\`;
+`,
+        ],
+    ]);
+
+    expect(convertCssForEmotion(css)).toEqual(cssForEmotion);
+});

lib/__tests__/convertScopeToModuleName.test.ts

@@ -0,0 +1,14 @@
+import { convertScopeToModuleName } from "../convertScopeToModuleName";
+
+test("convertScopeToModuleName", () => {
+    [
+        ["root", "root"],
+        [".list-group", "listGroup"],
+        [".border-top-0", "borderTop0"],
+        [".navbar-expand-sm", "navbarExpandSm"],
+    ].forEach(([scope, moduleName]) => {
+        expect(
+            convertScopeToModuleName(scope as string),
+        ).toEqual(moduleName);
+    });
+});