Experiments with newLimina & generics + inference

kohlmannj · May 27, 2019 · facc128 · facc128
1 parent 5b70013
commit facc128
Show file tree

Hide file tree

Showing 13 changed files with 487 additions and 3 deletions.
diff --git a/.stylelintignore b/.stylelintignore
@@ -1 +1,3 @@
-lib
+lib
+dist
+*.d.ts
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -30,6 +30,20 @@
       "windows": {
         "program": "${workspaceFolder}/node_modules/jest/bin/jest"
       }
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "scratchpad (ts-node)",
+      "program": "${workspaceFolder}/node_modules/.bin/ts-node",
+      "args": [
+        "-T",
+        "--compiler-options",
+        "{ \"module\": \"commonjs\" }",
+        "${workspaceFolder}/packages/core/src/scratchpad.ts"
+      ],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen"
     }
   ]
 }
diff --git a/package.json b/package.json
@@ -94,6 +94,8 @@
     "jest-emotion": "^10.0.11",
     "lerna": "^3.14.1",
     "lint-staged": "^8.1.7",
+    "postcss": "^7.0.16",
+    "postcss-media-query-parser": "^0.2.3",
     "prettier": "^1.17.1",
     "react": "^16.8.6",
     "react-docgen-typescript-loader": "^3.1.0",
@@ -114,6 +116,7 @@
     "stylelint-scss": "^3.6.1",
     "ts-jest": "^24.0.2",
     "ts-loader": "^6.0.1",
+    "ts-node": "^8.2.0",
     "tslib": "^1.9.3",
     "typescript": "^3.4.5",
     "webpack": "^4.32.2"

diff --git a/packages/core/@types/postcss-media-query-parser.d.ts b/packages/core/@types/postcss-media-query-parser.d.ts
@@ -0,0 +1,41 @@
+declare module 'postcss-media-query-parser' {
+  export interface MediaQueryListNode extends import('postcss').Node {
+    type: 'media-query-list';
+    nodes: MediaQueryNode[];
+  }
+
+  export interface MediaQueryNode extends import('postcss').Node {
+    type: 'media-query';
+    nodes: (KeywordNode | MediaTypeNode | MediaFeatureExpressionNode)[];
+  }
+
+  export interface KeywordNode extends import('postcss').Node {
+    type: 'keyword';
+    // value: '@media' | 'not' | 'only' | 'and';
+  }
+
+  export interface MediaTypeNode extends import('postcss').Node {
+    type: 'media-type';
+  }
+
+  export interface ColonNode extends import('postcss').Node {
+    type: 'keyword';
+    value: ':';
+  }
+
+  export interface ValueNode extends import('postcss').Node {
+    type: 'value';
+  }
+
+  export interface MediaFeatureExpressionNode extends import('postcss').Node {
+    type: 'media-feature-expression';
+    nodes: [MediaFeatureNode, ColonNode, ValueNode];
+  }
+
+  export interface MediaFeatureNode extends import('postcss').Node {
+    type: 'media-feature';
+  }
+
+  // eslint-disable-next-line import/no-default-export
+  export default function parseMedia(mediaQuery: string, index = 0): MediaQueryListNode;
+}
diff --git a/packages/core/exampleParsedMediaQuery.json b/packages/core/exampleParsedMediaQuery.json
@@ -0,0 +1,8 @@
+{
+  "after": "",
+  "before": "",
+  "nodes": [],
+  "sourceIndex": 0,
+  "type": "media-query-list",
+  "value": "@media (min-width: 480px)"
+}
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -19,8 +19,11 @@
   ],
   "dependencies": {
     "csstype": "^2.6.4",
+    "lodash.difference": "^4.5.0",
     "lodash.merge": "^4.6.1",
     "ml-regression-simple-linear": "^2.0.1",
+    "mq-polyfill": "^1.1.8",
+    "postcss-media-query-parser": "^0.2.3",
     "units-css": "^0.4.0"
   },
   "gitHead": "5bf75ff47081672d5fd06ca6c101f5e6fd3c99ad"

diff --git a/packages/core/src/__tests__/__snapshots__/newLimina.test.ts.snap b/packages/core/src/__tests__/__snapshots__/newLimina.test.ts.snap
@@ -0,0 +1,203 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`newLimina works 1`] = `
+Object {
+  "mediaQueries": Map {
+    "@media (min-width: 0)" => Node {
+      "after": "",
+      "before": "",
+      "nodes": Array [
+        Node {
+          "after": "",
+          "before": "",
+          "nodes": Array [
+            Node {
+              "after": " ",
+              "before": "",
+              "parent": [Circular],
+              "sourceIndex": 0,
+              "type": "media-type",
+              "value": "@media",
+            },
+            Node {
+              "after": "",
+              "before": " ",
+              "nodes": Array [
+                Object {
+                  "after": "",
+                  "before": "",
+                  "parent": [Circular],
+                  "sourceIndex": 8,
+                  "type": "media-feature",
+                  "value": "min-width",
+                },
+                Object {
+                  "after": " ",
+                  "before": "",
+                  "parent": [Circular],
+                  "sourceIndex": 17,
+                  "type": "colon",
+                  "value": ":",
+                },
+                Object {
+                  "after": "",
+                  "before": " ",
+                  "parent": [Circular],
+                  "sourceIndex": 19,
+                  "type": "value",
+                  "value": "0",
+                },
+              ],
+              "parent": [Circular],
+              "sourceIndex": 7,
+              "type": "media-feature-expression",
+              "value": "(min-width: 0)",
+            },
+          ],
+          "parent": [Circular],
+          "sourceIndex": 0,
+          "type": "media-query",
+          "value": "@media (min-width: 0)",
+        },
+      ],
+      "sourceIndex": 0,
+      "type": "media-query-list",
+      "value": "@media (min-width: 0)",
+    },
+    "@media (min-width: 720px)" => Node {
+      "after": "",
+      "before": "",
+      "nodes": Array [
+        Node {
+          "after": "",
+          "before": "",
+          "nodes": Array [
+            Node {
+              "after": " ",
+              "before": "",
+              "parent": [Circular],
+              "sourceIndex": 0,
+              "type": "media-type",
+              "value": "@media",
+            },
+            Node {
+              "after": "",
+              "before": " ",
+              "nodes": Array [
+                Object {
+                  "after": "",
+                  "before": "",
+                  "parent": [Circular],
+                  "sourceIndex": 8,
+                  "type": "media-feature",
+                  "value": "min-width",
+                },
+                Object {
+                  "after": " ",
+                  "before": "",
+                  "parent": [Circular],
+                  "sourceIndex": 17,
+                  "type": "colon",
+                  "value": ":",
+                },
+                Object {
+                  "after": "",
+                  "before": " ",
+                  "parent": [Circular],
+                  "sourceIndex": 19,
+                  "type": "value",
+                  "value": "720px",
+                },
+              ],
+              "parent": [Circular],
+              "sourceIndex": 7,
+              "type": "media-feature-expression",
+              "value": "(min-width: 720px)",
+            },
+          ],
+          "parent": [Circular],
+          "sourceIndex": 0,
+          "type": "media-query",
+          "value": "@media (min-width: 720px)",
+        },
+      ],
+      "sourceIndex": 0,
+      "type": "media-query-list",
+      "value": "@media (min-width: 720px)",
+    },
+    "@media (min-width: 1280px)" => Node {
+      "after": "",
+      "before": "",
+      "nodes": Array [
+        Node {
+          "after": "",
+          "before": "",
+          "nodes": Array [
+            Node {
+              "after": " ",
+              "before": "",
+              "parent": [Circular],
+              "sourceIndex": 0,
+              "type": "media-type",
+              "value": "@media",
+            },
+            Node {
+              "after": "",
+              "before": " ",
+              "nodes": Array [
+                Object {
+                  "after": "",
+                  "before": "",
+                  "parent": [Circular],
+                  "sourceIndex": 8,
+                  "type": "media-feature",
+                  "value": "min-width",
+                },
+                Object {
+                  "after": " ",
+                  "before": "",
+                  "parent": [Circular],
+                  "sourceIndex": 17,
+                  "type": "colon",
+                  "value": ":",
+                },
+                Object {
+                  "after": "",
+                  "before": " ",
+                  "parent": [Circular],
+                  "sourceIndex": 19,
+                  "type": "value",
+                  "value": "1280px",
+                },
+              ],
+              "parent": [Circular],
+              "sourceIndex": 7,
+              "type": "media-feature-expression",
+              "value": "(min-width: 1280px)",
+            },
+          ],
+          "parent": [Circular],
+          "sourceIndex": 0,
+          "type": "media-query",
+          "value": "@media (min-width: 1280px)",
+        },
+      ],
+      "sourceIndex": 0,
+      "type": "media-query-list",
+      "value": "@media (min-width: 1280px)",
+    },
+  },
+  "stylesByMediaQueryString": Map {
+    "@media (min-width: 720px)" => Object {
+      "fontSize": 48,
+    },
+    "@media (min-width: 1280px)" => Object {
+      "fontSize": 56,
+    },
+    "@media (min-width: 0)" => Object {
+      "fontSize": 32,
+      "lineHeight": 48,
+    },
+  },
+}
+`;
diff --git a/packages/core/src/__tests__/newLimina.test.ts b/packages/core/src/__tests__/newLimina.test.ts
@@ -0,0 +1,18 @@
+import { newLimina } from '..';
+
+describe('newLimina', () => {
+  it('works', () => {
+    const heading /* css( */ = newLimina({
+      fontSize: 32,
+      lineHeight: 48,
+      '@media (min-width: 720px)': {
+        fontSize: 48,
+      },
+      '@media (min-width: 1280px)': {
+        fontSize: 56,
+      },
+    });
+    /* ) */
+    expect(heading).toMatchSnapshot();
+  });
+});
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -3,3 +3,4 @@ export * from './breakpointValue';
 export * from './createBreakpoints';
 export * from './createLimina';
 export * from './limina';
+export * from './newLimina';