Merge pull request #694 from system-ui/ts-presets

Convert all presets to TypeScript

Author: mxstbr

.circleci/config.yml

@@ -5,14 +5,4 @@ jobs:
       - image: circleci/node:lts
     working_directory: ~/repo
     steps:
-      - checkout
-      - restore_cache:
-          keys:
-            - v2-dependencies-{{ checksum "package.json" }}
-            - v2-dependencies-
-      - run: yarn install
-      - save_cache:
-          paths:
-            - node_modules
-          key: v2-dependencies-{{ checksum "package.json" }}
-      - run: yarn test --coverage
+      - run: echo "Nope"

.github/workflows/ci.yml

@@ -0,0 +1,26 @@
+name: CI
+
+on: [push]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v1
+      with: 
+        node-version: 12.x
+    - name: Get yarn cache directory path
+      id: yarn-cache-dir 
+      run: echo "::set-output name=dir::$(yarn cache dir)"
+
+    - uses: actions/cache@v1
+      with:
+        path: ${{ steps.yarn-cache-dir.outputs.dir }}
+        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+        restore-keys: |
+          ${{ runner.os }}-yarn-
+    - run: yarn
+    - run: yarn test --coverage

packages/preset-bootstrap/package.json

@@ -3,6 +3,8 @@
   "version": "0.3.0",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "source": "src/index.ts",
   "author": "Brent Jackson",
   "license": "MIT",
   "scripts": {

packages/preset-bootstrap/src/index.js renamed to packages/preset-bootstrap/src/index.ts

@@ -53,6 +53,8 @@ export const fonts = {
   heading: 'inherit',
   monospace:
     'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+  // NOTE(@mxstbr): TypeScript does not let us do the self-references below if we don't provide "default" values
+  sans: '',
 }
 fonts.sans = fonts.body
 
@@ -61,11 +63,16 @@ export const fontWeights = {
   heading: 500,
   bold: 700,
   light: 300,
+  // NOTE(@mxstbr): TypeScript does not let us do the self-references below if we don't provide "default" values
+  normal: 0,
+  display: 0,
 }
 fontWeights.normal = fontWeights.body
 fontWeights.display = fontWeights.light
 
-export const fontSizes = [
+export const fontSizes: Array<string> & {
+  lead?: string
+} = [
   '0.75rem', // '80%',
   '0.875rem',
   '1rem',

packages/preset-bootstrap/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "strict": true
+  }
+}

packages/preset-bulma/package.json

@@ -3,6 +3,8 @@
   "version": "0.3.0",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "source": "src/index.ts",
   "author": "Brent Jackson",
   "license": "MIT",
   "scripts": {

packages/preset-bulma/src/index.js renamed to packages/preset-bulma/src/index.ts

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "strict": true
+  }
+}

packages/preset-bulma/tsconfig.json

@@ -3,6 +3,8 @@
   "version": "0.3.0",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "source": "src/index.ts",
   "author": "Brent Jackson",
   "license": "MIT",
   "scripts": {

packages/preset-dark/package.json

@@ -107,7 +107,7 @@ export default {
       my: 4,
       borderCollapse: 'separate',
       borderSpacing: 0,
-      [['th', 'td']]: {
+      'th,td': {
         textAlign: 'left',
         py: '4px',
         pr: '4px',
@@ -134,48 +134,19 @@ export default {
     },
   },
   prism: {
-    [[
-      '.comment',
-      '.prolog',
-      '.doctype',
-      '.cdata',
-      '.punctuation',
-      '.operator',
-      '.entity',
-      '.url',
-    ]]: {
+    '.comment,.prolog,.doctype,.cdata,.punctuation,.operator,.entity,.url': {
       color: 'gray',
     },
     '.comment': {
       fontStyle: 'italic',
     },
-    [[
-      '.property',
-      '.tag',
-      '.boolean',
-      '.number',
-      '.constant',
-      '.symbol',
-      '.deleted',
-      '.function',
-      '.class-name',
-      '.regex',
-      '.important',
-      '.variable',
-    ]]: {
+    '.property,.tag,.boolean,.number,.constant,.symbol,.deleted,.function,.class-name,.regex,.important,.variable': {
       color: 'purple',
     },
-    [['.atrule', '.attr-value', '.keyword']]: {
+    '.atrule,.attr-value,.keyword': {
       color: 'primary',
     },
-    [[
-      '.selector',
-      '.attr-name',
-      '.string',
-      '.char',
-      '.builtin',
-      '.inserted',
-    ]]: {
+    '.selector,.attr-name,.string,.char,.builtin,.inserted': {
       color: 'secondary',
     },
   },