flexibility: temporary core util for refactoring to vanilla css

packages/core/jest.config.js

@@ -0,0 +1,11 @@
+const path = require('path')
+
+const baseConfig = require('../../jest/base.config.js')
+const { name } = require('./package.json')
+
+module.exports = {
+  ...baseConfig,
+  displayName: name,
+  name: name,
+  testMatch: [path.join(__dirname, '/**/*/?(*.)+(spec|test).(js|ts|tsx)')]
+}

packages/core/package.json

@@ -12,7 +12,8 @@
     "build": "run-s build:cjs build:esm build:css",
     "build:cjs": "tsc --project tsconfig.build.json --module commonjs --target es5 --outDir dist/cjs",
     "build:css": "node ./build",
-    "build:esm": "tsc --project tsconfig.build.json --module es2015 --target es5 --outDir dist/esm"
+    "build:esm": "tsc --project tsconfig.build.json --module es2015 --target es5 --outDir dist/esm",
+    "test": "tsc --noEmit --project ./tsconfig.json && jest"
   },
   "sideEffects": false,
   "style": "dist/css/index.css",

packages/core/src/refactor/__specs__/__snapshots__/index.spec.ts.snap

@@ -0,0 +1,298 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`tokens 1`] = `
+Object {
+  "breakpoints": Object {
+    "large": "var(--psBreakpointsLarge)",
+    "medium": "var(--psBreakpointsMedium)",
+    "small": "var(--psBreakpointsSmall)",
+    "xLarge": "var(--psBreakpointsXLarge)",
+    "xSmall": "var(--psBreakpointsXSmall)",
+  },
+  "colorsBackgroundDark": Object {
+    "1": "var(--psColorsBackgroundDark1)",
+    "2": "var(--psColorsBackgroundDark2)",
+    "3": "var(--psColorsBackgroundDark3)",
+  },
+  "colorsBackgroundLight": Object {
+    "1": "var(--psColorsBackgroundLight1)",
+    "2": "var(--psColorsBackgroundLight2)",
+    "3": "var(--psColorsBackgroundLight3)",
+  },
+  "colorsBackgroundUtility": Object {
+    "10": "var(--psColorsBackgroundUtility10)",
+    "15": "var(--psColorsBackgroundUtility15)",
+    "20": "var(--psColorsBackgroundUtility20)",
+    "25": "var(--psColorsBackgroundUtility25)",
+    "30": "var(--psColorsBackgroundUtility30)",
+    "40": "var(--psColorsBackgroundUtility40)",
+    "60": "var(--psColorsBackgroundUtility60)",
+    "base": "var(--psColorsBackgroundUtilityBase)",
+  },
+  "colorsBlack": Object {
+    "0": "var(--psColorsBlack0)",
+    "1": "var(--psColorsBlack1)",
+    "2": "var(--psColorsBlack2)",
+    "3": "var(--psColorsBlack3)",
+    "4": "var(--psColorsBlack4)",
+    "5": "var(--psColorsBlack5)",
+    "6": "var(--psColorsBlack6)",
+  },
+  "colorsBlue": Object {
+    "1": "var(--psColorsBlue1)",
+    "10": "var(--psColorsBlue10)",
+    "2": "var(--psColorsBlue2)",
+    "3": "var(--psColorsBlue3)",
+    "4": "var(--psColorsBlue4)",
+    "5": "var(--psColorsBlue5)",
+    "6": "var(--psColorsBlue6)",
+    "7": "var(--psColorsBlue7)",
+    "8": "var(--psColorsBlue8)",
+    "9": "var(--psColorsBlue9)",
+    "base": "var(--psColorsBlueBase)",
+  },
+  "colorsBorder": Object {
+    "highOnDark": "var(--psColorsBorderHighOnDark)",
+    "highOnLight": "var(--psColorsBorderHighOnLight)",
+    "lowOnDark": "var(--psColorsBorderLowOnDark)",
+    "lowOnLight": "var(--psColorsBorderLowOnLight)",
+  },
+  "colorsCode": Object {
+    "blue": "var(--psColorsCodeBlue)",
+    "gray": "var(--psColorsCodeGray)",
+    "green": "var(--psColorsCodeGreen)",
+    "orange": "var(--psColorsCodeOrange)",
+    "purple": "var(--psColorsCodePurple)",
+    "red": "var(--psColorsCodeRed)",
+    "sand": "var(--psColorsCodeSand)",
+    "turquoise": "var(--psColorsCodeTurquoise)",
+    "white": "var(--psColorsCodeWhite)",
+    "yellow": "var(--psColorsCodeYellow)",
+  },
+  "colorsGradient": Object {
+    "flowBackground": "var(--psColorsGradientFlowBackground)",
+    "flowStop0": "var(--psColorsGradientFlowStop0)",
+    "flowStop100": "var(--psColorsGradientFlowStop100)",
+    "skillsBackground": "var(--psColorsGradientSkillsBackground)",
+    "skillsStop0": "var(--psColorsGradientSkillsStop0)",
+    "skillsStop100": "var(--psColorsGradientSkillsStop100)",
+  },
+  "colorsGreen": Object {
+    "1": "var(--psColorsGreen1)",
+    "10": "var(--psColorsGreen10)",
+    "2": "var(--psColorsGreen2)",
+    "3": "var(--psColorsGreen3)",
+    "4": "var(--psColorsGreen4)",
+    "5": "var(--psColorsGreen5)",
+    "6": "var(--psColorsGreen6)",
+    "7": "var(--psColorsGreen7)",
+    "8": "var(--psColorsGreen8)",
+    "9": "var(--psColorsGreen9)",
+    "base": "var(--psColorsGreenBase)",
+  },
+  "colorsLime": Object {
+    "1": "var(--psColorsLime1)",
+    "10": "var(--psColorsLime10)",
+    "2": "var(--psColorsLime2)",
+    "3": "var(--psColorsLime3)",
+    "4": "var(--psColorsLime4)",
+    "5": "var(--psColorsLime5)",
+    "6": "var(--psColorsLime6)",
+    "7": "var(--psColorsLime7)",
+    "8": "var(--psColorsLime8)",
+    "9": "var(--psColorsLime9)",
+    "base": "var(--psColorsLimeBase)",
+  },
+  "colorsOrange": Object {
+    "1": "var(--psColorsOrange1)",
+    "10": "var(--psColorsOrange10)",
+    "2": "var(--psColorsOrange2)",
+    "3": "var(--psColorsOrange3)",
+    "4": "var(--psColorsOrange4)",
+    "5": "var(--psColorsOrange5)",
+    "6": "var(--psColorsOrange6)",
+    "7": "var(--psColorsOrange7)",
+    "8": "var(--psColorsOrange8)",
+    "9": "var(--psColorsOrange9)",
+    "base": "var(--psColorsOrangeBase)",
+  },
+  "colorsPink": Object {
+    "1": "var(--psColorsPink1)",
+    "10": "var(--psColorsPink10)",
+    "2": "var(--psColorsPink2)",
+    "3": "var(--psColorsPink3)",
+    "4": "var(--psColorsPink4)",
+    "5": "var(--psColorsPink5)",
+    "6": "var(--psColorsPink6)",
+    "7": "var(--psColorsPink7)",
+    "8": "var(--psColorsPink8)",
+    "9": "var(--psColorsPink9)",
+    "base": "var(--psColorsPinkBase)",
+  },
+  "colorsPrimaryAction": Object {
+    "background": "var(--psColorsPrimaryActionBackground)",
+    "textDarkTheme": "var(--psColorsPrimaryActionTextDarkTheme)",
+    "textLightTheme": "var(--psColorsPrimaryActionTextLightTheme)",
+  },
+  "colorsPurple": Object {
+    "1": "var(--psColorsPurple1)",
+    "10": "var(--psColorsPurple10)",
+    "2": "var(--psColorsPurple2)",
+    "3": "var(--psColorsPurple3)",
+    "4": "var(--psColorsPurple4)",
+    "5": "var(--psColorsPurple5)",
+    "6": "var(--psColorsPurple6)",
+    "7": "var(--psColorsPurple7)",
+    "8": "var(--psColorsPurple8)",
+    "9": "var(--psColorsPurple9)",
+    "base": "var(--psColorsPurpleBase)",
+  },
+  "colorsRed": Object {
+    "1": "var(--psColorsRed1)",
+    "10": "var(--psColorsRed10)",
+    "2": "var(--psColorsRed2)",
+    "3": "var(--psColorsRed3)",
+    "4": "var(--psColorsRed4)",
+    "5": "var(--psColorsRed5)",
+    "6": "var(--psColorsRed6)",
+    "7": "var(--psColorsRed7)",
+    "8": "var(--psColorsRed8)",
+    "9": "var(--psColorsRed9)",
+    "base": "var(--psColorsRedBase)",
+  },
+  "colorsStatus": Object {
+    "error": "var(--psColorsStatusError)",
+    "info": "var(--psColorsStatusInfo)",
+    "success": "var(--psColorsStatusSuccess)",
+    "warning": "var(--psColorsStatusWarning)",
+  },
+  "colorsTeal": Object {
+    "1": "var(--psColorsTeal1)",
+    "10": "var(--psColorsTeal10)",
+    "2": "var(--psColorsTeal2)",
+    "3": "var(--psColorsTeal3)",
+    "4": "var(--psColorsTeal4)",
+    "5": "var(--psColorsTeal5)",
+    "6": "var(--psColorsTeal6)",
+    "7": "var(--psColorsTeal7)",
+    "8": "var(--psColorsTeal8)",
+    "9": "var(--psColorsTeal9)",
+    "base": "var(--psColorsTealBase)",
+  },
+  "colorsTextIcon": Object {
+    "highOnDark": "var(--psColorsTextIconHighOnDark)",
+    "highOnLight": "var(--psColorsTextIconHighOnLight)",
+    "lowOnDark": "var(--psColorsTextIconLowOnDark)",
+    "lowOnLight": "var(--psColorsTextIconLowOnLight)",
+  },
+  "colorsWhite": Object {
+    "0": "var(--psColorsWhite0)",
+    "1": "var(--psColorsWhite1)",
+    "2": "var(--psColorsWhite2)",
+    "3": "var(--psColorsWhite3)",
+    "4": "var(--psColorsWhite4)",
+    "5": "var(--psColorsWhite5)",
+    "6": "var(--psColorsWhite6)",
+  },
+  "colorsYellow": Object {
+    "1": "var(--psColorsYellow1)",
+    "10": "var(--psColorsYellow10)",
+    "2": "var(--psColorsYellow2)",
+    "3": "var(--psColorsYellow3)",
+    "4": "var(--psColorsYellow4)",
+    "5": "var(--psColorsYellow5)",
+    "6": "var(--psColorsYellow6)",
+    "7": "var(--psColorsYellow7)",
+    "8": "var(--psColorsYellow8)",
+    "9": "var(--psColorsYellow9)",
+    "base": "var(--psColorsYellowBase)",
+  },
+  "layers": Object {
+    "globalDropdown": "var(--psLayersGlobalDropdown)",
+    "globalSidenav": "var(--psLayersGlobalSidenav)",
+    "globalSkipToContentBanner": "var(--psLayersGlobalSkipToContentBanner)",
+    "globalTopnav": "var(--psLayersGlobalTopnav)",
+    "main": "var(--psLayersMain)",
+  },
+  "layout": Object {
+    "spacingLarge": "var(--psLayoutSpacingLarge)",
+    "spacingMedium": "var(--psLayoutSpacingMedium)",
+    "spacingSmall": "var(--psLayoutSpacingSmall)",
+    "spacingXLarge": "var(--psLayoutSpacingXLarge)",
+    "spacingXSmall": "var(--psLayoutSpacingXSmall)",
+    "spacingXXLarge": "var(--psLayoutSpacingXXLarge)",
+    "spacingXXSmall": "var(--psLayoutSpacingXXSmall)",
+  },
+  "motion": Object {
+    "speedFast": "var(--psMotionSpeedFast)",
+    "speedNormal": "var(--psMotionSpeedNormal)",
+    "speedSlow": "var(--psMotionSpeedSlow)",
+    "speedXFast": "var(--psMotionSpeedXFast)",
+    "speedXSlow": "var(--psMotionSpeedXSlow)",
+  },
+  "type": Object {
+    "fontFamily": "var(--psTypeFontFamily)",
+    "fontFamilyCode": "var(--psTypeFontFamilyCode)",
+    "fontSize100": "var(--psTypeFontSize100)",
+    "fontSize1000": "var(--psTypeFontSize1000)",
+    "fontSize1100": "var(--psTypeFontSize1100)",
+    "fontSize1200": "var(--psTypeFontSize1200)",
+    "fontSize200": "var(--psTypeFontSize200)",
+    "fontSize300": "var(--psTypeFontSize300)",
+    "fontSize400": "var(--psTypeFontSize400)",
+    "fontSize500": "var(--psTypeFontSize500)",
+    "fontSize600": "var(--psTypeFontSize600)",
+    "fontSize700": "var(--psTypeFontSize700)",
+    "fontSize800": "var(--psTypeFontSize800)",
+    "fontSize900": "var(--psTypeFontSize900)",
+    "fontSizeBase": "var(--psTypeFontSizeBase)",
+    "fontSizeGigantic": "var(--psTypeFontSizeGigantic)",
+    "fontSizeJumbo": "var(--psTypeFontSizeJumbo)",
+    "fontSizeLarge": "var(--psTypeFontSizeLarge)",
+    "fontSizeMedium": "var(--psTypeFontSizeMedium)",
+    "fontSizeSmall": "var(--psTypeFontSizeSmall)",
+    "fontSizeXLarge": "var(--psTypeFontSizeXLarge)",
+    "fontSizeXSmall": "var(--psTypeFontSizeXSmall)",
+    "fontSizeXXLarge": "var(--psTypeFontSizeXXLarge)",
+    "fontWeight100": "var(--psTypeFontWeight100)",
+    "fontWeight200": "var(--psTypeFontWeight200)",
+    "fontWeight300": "var(--psTypeFontWeight300)",
+    "fontWeight400": "var(--psTypeFontWeight400)",
+    "fontWeight500": "var(--psTypeFontWeight500)",
+    "fontWeight600": "var(--psTypeFontWeight600)",
+    "fontWeight700": "var(--psTypeFontWeight700)",
+    "fontWeight800": "var(--psTypeFontWeight800)",
+    "fontWeight900": "var(--psTypeFontWeight900)",
+    "fontWeightBlack": "var(--psTypeFontWeightBlack)",
+    "fontWeightBold": "var(--psTypeFontWeightBold)",
+    "fontWeightBook": "var(--psTypeFontWeightBook)",
+    "fontWeightDefault": "var(--psTypeFontWeightDefault)",
+    "fontWeightDemiBold": "var(--psTypeFontWeightDemiBold)",
+    "fontWeightLight": "var(--psTypeFontWeightLight)",
+    "fontWeightMedium": "var(--psTypeFontWeightMedium)",
+    "fontWeightRegular": "var(--psTypeFontWeightRegular)",
+    "fontWeightStrong": "var(--psTypeFontWeightStrong)",
+    "fontWeightThin": "var(--psTypeFontWeightThin)",
+    "fontWeightXBold": "var(--psTypeFontWeightXBold)",
+    "fontWeightXLight": "var(--psTypeFontWeightXLight)",
+    "letterSpacingAllCaps": "var(--psTypeLetterSpacingAllCaps)",
+    "letterSpacingGigantic": "var(--psTypeLetterSpacingGigantic)",
+    "letterSpacingJumbo": "var(--psTypeLetterSpacingJumbo)",
+    "letterSpacingLarge": "var(--psTypeLetterSpacingLarge)",
+    "letterSpacingLoose": "var(--psTypeLetterSpacingLoose)",
+    "letterSpacingLooser": "var(--psTypeLetterSpacingLooser)",
+    "letterSpacingMedium": "var(--psTypeLetterSpacingMedium)",
+    "letterSpacingNone": "var(--psTypeLetterSpacingNone)",
+    "letterSpacingSmall": "var(--psTypeLetterSpacingSmall)",
+    "letterSpacingTight": "var(--psTypeLetterSpacingTight)",
+    "letterSpacingTighter": "var(--psTypeLetterSpacingTighter)",
+    "letterSpacingXLarge": "var(--psTypeLetterSpacingXLarge)",
+    "letterSpacingXSmall": "var(--psTypeLetterSpacingXSmall)",
+    "letterSpacingXXLarge": "var(--psTypeLetterSpacingXXLarge)",
+    "lineHeightExtra": "var(--psTypeLineHeightExtra)",
+    "lineHeightHuge": "var(--psTypeLineHeightHuge)",
+    "lineHeightStandard": "var(--psTypeLineHeightStandard)",
+    "lineHeightTight": "var(--psTypeLineHeightTight)",
+  },
+}
+`;

packages/core/src/refactor/__specs__/index.spec.ts

@@ -0,0 +1,4 @@
+import { refactorCssVars } from '..'
+test('tokens', () => {
+  expect(refactorCssVars).toMatchSnapshot()
+})

packages/core/src/refactor/index.ts

@@ -0,0 +1,35 @@
+import breakpoints from '../js/breakpoints'
+import layers from '../js/layers'
+import layout from '../js/layout'
+import type from '../js/type'
+import motion from '../js/motion'
+import * as colors from '../js/colors'
+
+const capitalizeFirstLetter = (str: string) => {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
+type Tokens = {
+  breakpoints: typeof breakpoints
+  layers: typeof layers
+  layout: typeof layout
+  type: typeof type
+  motion: typeof motion
+} & typeof colors
+
+export const refactorCssVars = Object.entries({
+  breakpoints,
+  layers,
+  layout,
+  type,
+  motion,
+  ...colors
+}).reduce((acc, [group, obj]) => {
+  const keys: Record<string, string> = {}
+  Object.keys(obj).forEach(key => {
+    keys[key] = `var(--ps${capitalizeFirstLetter(group)}${capitalizeFirstLetter(
+      key
+    )})`
+  })
+  return { ...acc, [group]: { ...keys } }
+}, {}) as Tokens

packages/core/tsconfig.json

@@ -6,6 +6,10 @@
     "rootDir": null,
     "strict": true
   },
-  "exclude": ["node_modules"],
-  "include": ["js/*.ts"]
-}
+  "exclude": [
+    "node_modules"
+  ],
+  "include": [
+    "src/*.ts"
+  ]
+}