fixes

lukasoppermann · lukasoppermann · commit 604c42c24f2a · 2024-08-10T08:57:59.000+02:00
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1,3 @@
 *.d.ts
-src/build.test.js
+src/build.test.js
+tests/build.test.ts
diff --git a/eslint.tsconfig.json b/eslint.tsconfig.json
@@ -1,5 +1,5 @@
 {
   "extends": "./tsconfig.json",
   "include": ["src/**/*.ts", "vitest.config.ts"],
-  "exclude": ["node_modules", "src/build.test.js"]
+  "exclude": ["node_modules", "src/build.test.js", "tests/build.test.ts"]
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,8 +15,7 @@
     ".": "./dist/index.js"
   },
   "files": [
-    "dist/*",
-    "src/**/*.ts"
+    "dist/*"
   ],
   "scripts": {
     "test": "npm run build && npx vitest run && npm run lint",
@@ -45,14 +44,15 @@
     "json5": "^2.2.1"
   },
   "devDependencies": {
+    "@types/node": "^22.2.0",
     "eslint": "^8.57.0",
     "eslint-plugin-github": "^4.10.2",
     "prettier": "^3.3.3",
-    "style-dictionary": "^4.0.0",
-    "typescript": "^5.5.3",
-    "vitest": "^2.0.3"
+    "style-dictionary": "^4.0.1",
+    "typescript": "^5.5.2",
+    "vitest": "^2.0.4"
   },
   "peerDependencies": {
-    "style-dictionary": "^3.7.1"
+    "style-dictionary": "^4"
   }
 }
diff --git a/src/format/css-advanced.test.ts b/src/format/css-advanced.test.ts
@@ -1,4 +1,4 @@
-import { cssAdvanced } from './css-advanced'
+import { cssAdvanced } from './css-advanced.js'
 import { TransformedToken } from 'style-dictionary/types'
 
 describe('Format: CSS Advanced', () => {
diff --git a/src/format/javascript-commonJs.test.ts b/src/format/javascript-commonJs.test.ts
@@ -1,4 +1,4 @@
-import { javascriptCommonJs } from './javascript-commonJs'
+import { javascriptCommonJs } from './javascript-commonJs.js'
 
 describe('Format: CommonJs', () => {
   const dictionary = {
diff --git a/src/format/javascript-commonJs.ts b/src/format/javascript-commonJs.ts
@@ -1,7 +1,7 @@
 import { format } from 'prettier'
 import { fileHeader } from 'style-dictionary/utils'
 import { FormatFn, FormatFnArguments } from 'style-dictionary/types'
-import { jsonToNestedValue } from '../utilities/jsonToNestedValue'
+import { jsonToNestedValue } from '../utilities/jsonToNestedValue.js'
 
 export const javascriptCommonJs: FormatFn = async ({ dictionary, file, options, platform = {} }: FormatFnArguments) => {
   const { prefix } = platform
diff --git a/src/format/javascript-esm.test.ts b/src/format/javascript-esm.test.ts
@@ -1,4 +1,4 @@
-import { javascriptEsm } from './javascript-esm'
+import { javascriptEsm } from './javascript-esm.js'
 
 describe('Format: ESM', () => {
   const dictionary = {
diff --git a/src/format/javascript-esm.ts b/src/format/javascript-esm.ts
@@ -1,5 +1,5 @@
 import { format } from 'prettier'
-import { jsonToNestedValue } from '../utilities/jsonToNestedValue'
+import { jsonToNestedValue } from '../utilities/jsonToNestedValue.js'
 import { fileHeader } from 'style-dictionary/utils'
 import { FormatFn, FormatFnArguments } from 'style-dictionary/types'
 
diff --git a/src/format/typescript-esm-declarations.test.ts b/src/format/typescript-esm-declarations.test.ts
@@ -1,4 +1,4 @@
-import { typescriptEsmDeclarations } from './typescript-esm-declarations'
+import { typescriptEsmDeclarations } from './typescript-esm-declarations.js'
 
 describe('Format: ESM Declarations', () => {
   const dictionary = {
diff --git a/src/format/typescript-esm-declarations.ts b/src/format/typescript-esm-declarations.ts
@@ -1,7 +1,7 @@
 import { format } from 'prettier'
 import { fileHeader } from 'style-dictionary/utils'
-import { jsonToNestedValue } from '../utilities/jsonToNestedValue'
-import { jsonToTypes } from '../utilities/jsonToTypes'
+import { jsonToNestedValue } from '../utilities/jsonToNestedValue.js'
+import { jsonToTypes } from '../utilities/jsonToTypes.js'
 import { FormatFn, FormatFnArguments } from 'style-dictionary/types'
 
 export const typescriptEsmDeclarations: FormatFn = async ({ dictionary, file, options, platform = {} }: FormatFnArguments) => {
diff --git a/src/index.ts b/src/index.ts
@@ -1,46 +1,46 @@
 import OrigialStyleDictionary from 'style-dictionary'
-import { isBorder } from './filter/isBorder'
-import { isClamp } from './filter/isClamp'
-import { isColor } from './filter/isColor'
-import { isColorOrGradient } from './filter/isColorOrGradient'
-import { isCubicBezier } from './filter/isCubicBezier'
-import { isDeprecated } from './filter/isDeprecated'
-import { isDimension } from './filter/isDimension'
-import { isDuration } from './filter/isDuration'
-import { isFontFamily } from './filter/isFontFamily'
-import { isFontWeight } from './filter/isFontWeight'
-import { isGradient } from './filter/isGradient'
-import { isShadow } from './filter/isShadow'
-import { isSource } from './filter/isSource'
-import { isStrokeStyle } from './filter/isStrokeStyle'
-import { isTransition } from './filter/isTransition'
-import { isTypographic } from './filter/isTypographic'
-import { isTypography } from './filter/isTypography'
-import { cssAdvanced } from './format/css-advanced'
-import { javascriptCommonJs } from './format/javascript-commonJs'
-import { javascriptEsm } from './format/javascript-esm'
-import { typescriptEsmDeclarations } from './format/typescript-esm-declarations'
-import { w3cTokenJsonParser } from './parser/w3c-token-json-parser'
-import { cssExtended } from './transformGroups/cssExtended'
-import { borderCss } from './transformer/border-css'
-import { clampCss } from './transformer/clamp-css'
-import { colorAlphaToHex } from './transformer/color-alpha-to-hex'
-import { colorAlphaToRgba } from './transformer/color-alpha-to-rgba'
-import { colorToHex } from './transformer/color-to-hex'
-import { colorToRgba } from './transformer/color-to-rgba'
-import { colorToRgbaFloat } from './transformer/color-to-rgba-float'
-import { commentDeprecated } from './transformer/comment-deprecated'
-import { cubicBezierCss } from './transformer/cubic-bezier-css'
-import { dimensionPixelToRem } from './transformer/dimension-pixel-to-rem'
-import { dimensionRemToPixel } from './transformer/dimension-rem-to-pixel'
-import { dimensionToPixelUnitless } from './transformer/dimension-to-pixelUnitless'
-import { fontCss } from './transformer/font-css'
-import { fontFamilyCss } from './transformer/font-family-css'
-import { fontWeightToNumber } from './transformer/font-weight-to-number'
-import { gradientCss } from './transformer/gradient-css'
-import { namePathToDotNotation } from './transformer/name-path-to-dot-notation'
-import { namePathToCamelCase } from './transformer/name-path-to-camel-case'
-import { shadowCss } from './transformer/shadow-css'
+import { isBorder } from './filter/isBorder.js'
+import { isClamp } from './filter/isClamp.js'
+import { isColor } from './filter/isColor.js'
+import { isColorOrGradient } from './filter/isColorOrGradient.js'
+import { isCubicBezier } from './filter/isCubicBezier.js'
+import { isDeprecated } from './filter/isDeprecated.js'
+import { isDimension } from './filter/isDimension.js'
+import { isDuration } from './filter/isDuration.js'
+import { isFontFamily } from './filter/isFontFamily.js'
+import { isFontWeight } from './filter/isFontWeight.js'
+import { isGradient } from './filter/isGradient.js'
+import { isShadow } from './filter/isShadow.js'
+import { isSource } from './filter/isSource.js'
+import { isStrokeStyle } from './filter/isStrokeStyle.js'
+import { isTransition } from './filter/isTransition.js'
+import { isTypographic } from './filter/isTypographic.js'
+import { isTypography } from './filter/isTypography.js'
+import { cssAdvanced } from './format/css-advanced.js'
+import { javascriptCommonJs } from './format/javascript-commonJs.js'
+import { javascriptEsm } from './format/javascript-esm.js'
+import { typescriptEsmDeclarations } from './format/typescript-esm-declarations.js'
+import { w3cTokenJsonParser } from './parser/w3c-token-json-parser.js'
+import { cssExtended } from './transformGroups/cssExtended.js'
+import { borderCss } from './transformer/border-css.js'
+import { clampCss } from './transformer/clamp-css.js'
+import { colorAlphaToHex } from './transformer/color-alpha-to-hex.js'
+import { colorAlphaToRgba } from './transformer/color-alpha-to-rgba.js'
+import { colorToHex } from './transformer/color-to-hex.js'
+import { colorToRgba } from './transformer/color-to-rgba.js'
+import { colorToRgbaFloat } from './transformer/color-to-rgba-float.js'
+import { commentDeprecated } from './transformer/comment-deprecated.js'
+import { cubicBezierCss } from './transformer/cubic-bezier-css.js'
+import { dimensionPixelToRem } from './transformer/dimension-pixel-to-rem.js'
+import { dimensionRemToPixel } from './transformer/dimension-rem-to-pixel.js'
+import { dimensionToPixelUnitless } from './transformer/dimension-to-pixelUnitless.js'
+import { fontCss } from './transformer/font-css.js'
+import { fontFamilyCss } from './transformer/font-family-css.js'
+import { fontWeightToNumber } from './transformer/font-weight-to-number.js'
+import { gradientCss } from './transformer/gradient-css.js'
+import { namePathToDotNotation } from './transformer/name-path-to-dot-notation.js'
+import { namePathToCamelCase } from './transformer/name-path-to-camel-case.js'
+import { shadowCss } from './transformer/shadow-css.js'
 
 /**
  * Parsers
diff --git a/src/transformer/border-css.ts b/src/transformer/border-css.ts
@@ -1,5 +1,5 @@
 import { Transform, TransformedToken } from 'style-dictionary/types'
-import { isBorder } from '../filter/isBorder'
+import { isBorder } from '../filter/isBorder.js'
 
 type StrokeStyleString = 'solid' |
 'dashed' |
diff --git a/src/transformer/clamp-css.ts b/src/transformer/clamp-css.ts
@@ -1,5 +1,5 @@
 import { Transform, TransformedToken } from 'style-dictionary/types'
-import { isClamp } from '../filter/isClamp'
+import { isClamp } from '../filter/isClamp.js'
 
 type TokenClamp = {
   min: string
diff --git a/src/transformer/color-alpha-to-hex.ts b/src/transformer/color-alpha-to-hex.ts
@@ -1,7 +1,7 @@
 import { toHex } from 'color2k'
-import { alpha } from '../utilities/alpha'
+import { alpha } from '../utilities/alpha.js'
 import { Transform, TransformedToken } from 'style-dictionary/types'
-import { isColor } from '../filter/isColor'
+import { isColor } from '../filter/isColor.js'
 /**
  * colorAlphaToHex
  * @description convert a token of type `color` to a hex8 value if alpha < 1 and hex6 if alpha is 1
diff --git a/src/transformer/color-alpha-to-rgba.ts b/src/transformer/color-alpha-to-rgba.ts
@@ -1,7 +1,7 @@
 import { toRgba } from 'color2k'
 import { Transform, TransformedToken } from 'style-dictionary/types'
-import { isColor } from '../filter/isColor'
-import { alpha } from '../utilities/alpha'
+import { isColor } from '../filter/isColor.js'
+import { alpha } from '../utilities/alpha.js'
 /**
  * colorAlphaToRgba
  * @description convert a token of type `color` to a rgba value
diff --git a/src/transformer/color-to-hex.ts b/src/transformer/color-to-hex.ts
@@ -1,6 +1,6 @@
 import { toHex } from 'color2k'
 import { Transform, TransformedToken } from 'style-dictionary/types'
-import { isColor } from '../filter/isColor'
+import { isColor } from '../filter/isColor.js'
 /**
  * colorToHex
  * @description convert a token of type `color` to a hex value
diff --git a/src/transformer/color-to-rgb.test.ts b/src/transformer/color-to-rgb.test.ts
@@ -1,5 +1,5 @@
 import { TransformedToken } from 'style-dictionary/types';
-import { colorToRgba } from './color-to-rgba';
+import { colorToRgba } from './color-to-rgba.js';
 
 describe('transform: colorToHex', () => {
 
diff --git a/src/transformer/color-to-rgba-float.test.ts b/src/transformer/color-to-rgba-float.test.ts
@@ -1,5 +1,5 @@
-import { colorToRgbaFloat } from './color-to-rgba-float'
-import { getMockToken } from '../test-utilities/getMockToken'
+import { colorToRgbaFloat } from './color-to-rgba-float.js'
+import { getMockToken } from '../test-utilities/getMockToken.js'
 import { TransformedToken } from 'style-dictionary/types'
 
 describe('transform: colorToRgbaFloat', () => {
diff --git a/src/transformer/color-to-rgba-float.ts b/src/transformer/color-to-rgba-float.ts
@@ -1,5 +1,5 @@
 import { toHex } from 'color2k'
-import { isColor } from '../filter/isColor'
+import { isColor } from '../filter/isColor.js'
 import { Transform, TransformedToken } from 'style-dictionary/types'
 
 const toRgbaFloat = (color: string, alpha?: number) => {
diff --git a/src/transformer/color-to-rgba.ts b/src/transformer/color-to-rgba.ts
@@ -1,6 +1,6 @@
 import { toRgba } from 'color2k'
 import { Transform, TransformedToken } from 'style-dictionary/types'
-import { isColor } from '../filter/isColor'
+import { isColor } from '../filter/isColor.js'
 /**
  * colorToRgba
  * @description convert a token of type `color` to a rgba value
diff --git a/src/transformer/comment-deprecated.ts b/src/transformer/comment-deprecated.ts
@@ -1,5 +1,5 @@
 import { Transform, TransformedToken } from 'style-dictionary/types';
-import { isDeprecated } from '../filter/isDeprecated';
+import { isDeprecated } from '../filter/isDeprecated.js';
 
 /**
  * commentDeprecated
diff --git a/src/transformer/cubic-bezier-css.ts b/src/transformer/cubic-bezier-css.ts
@@ -1,5 +1,5 @@
 import { Transform, TransformedToken } from 'style-dictionary/types'
-import { isCubicBezier } from '../filter/isCubicBezier'
+import { isCubicBezier } from '../filter/isCubicBezier.js'
 
 type TokenCubicBezier = [
   x1: number,
diff --git a/src/transformer/dimension-pixel-to-rem.ts b/src/transformer/dimension-pixel-to-rem.ts
@@ -1,5 +1,5 @@
 import { PlatformConfig, Transform, TransformedToken } from 'style-dictionary/types'
-import { isDimension } from '../filter/isDimension';
+import { isDimension } from '../filter/isDimension.js';
 /**
  * dimensionPixelToRem
  * @description convert all dimensions that use pixel value to rem, uses `platform.options.basePxFontSize`
diff --git a/src/transformer/dimension-rem-to-pixel.ts b/src/transformer/dimension-rem-to-pixel.ts
@@ -1,5 +1,5 @@
 import { PlatformConfig, Transform, TransformedToken } from 'style-dictionary/types'
-import { isDimension } from '../filter/isDimension';
+import { isDimension } from '../filter/isDimension.js';
 /**
  * dimensionRemToPixel
  * @description convert all dimensions that use rem value to pixels, uses `platform.options.basePxFontSize`
diff --git a/src/transformer/dimension-to-pixelUnitless.ts b/src/transformer/dimension-to-pixelUnitless.ts
@@ -1,4 +1,4 @@
-import { isDimension } from '../filter/isDimension';
+import { isDimension } from '../filter/isDimension.js';
 import { PlatformConfig, Transform, TransformedToken } from 'style-dictionary/types';
 
 /**
diff --git a/src/transformer/font-css.ts b/src/transformer/font-css.ts
@@ -1,5 +1,5 @@
 import { Transform, TransformedToken } from 'style-dictionary/types'
-import { isTypography } from '../filter/isTypography'
+import { isTypography } from '../filter/isTypography.js'
 type TokenTypography = {
   fontFamily: string,
   fontSize: number,
diff --git a/src/transformer/font-family-css.ts b/src/transformer/font-family-css.ts
@@ -1,5 +1,5 @@
 import { Transform, TransformedToken } from 'style-dictionary/types'
-import { isFontFamily } from '../filter/isFontFamily'
+import { isFontFamily } from '../filter/isFontFamily.js'
 
 const hasSpaceInName = (string: string) => /\s/g.test(string)
 /**
diff --git a/src/transformer/font-weight-to-number.ts b/src/transformer/font-weight-to-number.ts
@@ -1,6 +1,6 @@
 
 import { Transform, TransformedToken } from 'style-dictionary/types'
-import { isFontWeight } from '../filter/isFontWeight'
+import { isFontWeight } from '../filter/isFontWeight.js'
 /**
  * Acceptable font weights according to w3c standard
  * @link https://design-tokens.github.io/community-group/format/#font-weight
diff --git a/src/transformer/gradient-css.ts b/src/transformer/gradient-css.ts
@@ -1,5 +1,5 @@
 import { Transform, TransformedToken } from 'style-dictionary/types'
-import { isGradient } from '../filter/isGradient'
+import { isGradient } from '../filter/isGradient.js'
 
 type TokenGradient = {
   color: number
diff --git a/src/transformer/shadow-css.ts b/src/transformer/shadow-css.ts
@@ -1,5 +1,5 @@
 import { Transform, TransformedToken } from 'style-dictionary/types'
-import { isShadow } from '../filter/isShadow'
+import { isShadow } from '../filter/isShadow.js'
 
 type TokenShadow = {
   color: string
diff --git a/tests/build.test.ts b/tests/build.test.ts
diff --git a/tests/package-lock.json b/tests/package-lock.json
diff --git a/tests/package.json b/tests/package.json
diff --git a/tsconfig.json b/tsconfig.json

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`	`2`	`"extends": "./tsconfig.json",`
`3`	`3`	`"include": ["src/*/.ts", "vitest.config.ts"],`
`4`		`- "exclude": ["node_modules", "src/build.test.js"]`
	`4`	`+ "exclude": ["node_modules", "src/build.test.js", "tests/build.test.ts"]`
`5`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { cssAdvanced } from './css-advanced'`
	`1`	`+import { cssAdvanced } from './css-advanced.js'`
`2`	`2`	`import { TransformedToken } from 'style-dictionary/types'`
`3`	`3`
`4`	`4`	`describe('Format: CSS Advanced', () => {`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { javascriptCommonJs } from './javascript-commonJs'`
	`1`	`+import { javascriptCommonJs } from './javascript-commonJs.js'`
`2`	`2`
`3`	`3`	`describe('Format: CommonJs', () => {`
`4`	`4`	`const dictionary = {`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { javascriptEsm } from './javascript-esm'`
	`1`	`+import { javascriptEsm } from './javascript-esm.js'`
`2`	`2`
`3`	`3`	`describe('Format: ESM', () => {`
`4`	`4`	`const dictionary = {`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { typescriptEsmDeclarations } from './typescript-esm-declarations'`
	`1`	`+import { typescriptEsmDeclarations } from './typescript-esm-declarations.js'`
`2`	`2`
`3`	`3`	`describe('Format: ESM Declarations', () => {`
`4`	`4`	`const dictionary = {`