feat: use vue's built-in CSSProperties instead of csstype

Author: surmon-china

CHANGELOG.md

@@ -1,12 +1,16 @@
 ## CHANGELOG
 
+### v6.1.1 (2022-08-28)
+
+- feat: use vue's built-in `CSSProperties` instead of `csstype`
+
 ### v6.1.0 (2022-08-27)
 
 - feat: add `phrases` prop [#166](https://github.com/surmon-china/vue-codemirror/pull/166)
 
 ### v6.0.2 (2022-07-27)
 
-- fix: Use the correct global component name [#161](https://github.com/surmon-china/vue-codemirror/discussions/161)
+- fix: use the correct global component name [#161](https://github.com/surmon-china/vue-codemirror/discussions/161)
 
 ### v6.0.1 (2022-07-22)
 

libundler.config.ts

@@ -6,6 +6,6 @@ export default defineConfig({
   entry: './src/index.ts',
   outDir: './dist',
   targets: ['esm', 'cjs'],
-  external: ['vue', 'csstype', 'codemirror', /@codemirror\/.*/],
+  external: ['vue', 'codemirror', /@codemirror\/.*/],
   exports: 'named'
 })

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-codemirror",
   "description": "CodeMirror code editor component for Vue",
-  "version": "6.1.0",
+  "version": "6.1.1",
   "author": "Surmon",
   "license": "MIT",
   "keywords": [
@@ -47,8 +47,7 @@
     "@codemirror/commands": "6.x",
     "@codemirror/language": "6.x",
     "@codemirror/state": "6.x",
-    "@codemirror/view": "6.x",
-    "csstype": "^3.1.0"
+    "@codemirror/view": "6.x"
   },
   "devDependencies": {
     "codemirror": "6.x",

src/codemirror.ts

@@ -1,4 +1,4 @@
-import * as CSS from 'csstype'
+import type { CSSProperties } from 'vue'
 import { EditorState, EditorStateConfig, Compartment, Extension, StateEffect } from '@codemirror/state'
 import { EditorView, EditorViewConfig, ViewUpdate, keymap, placeholder } from '@codemirror/view'
 import { indentWithTab } from '@codemirror/commands'
@@ -112,8 +112,8 @@ export const getEditorTools = (view: EditorView) => {
   // set style to editor element
   // https://codemirror.net/examples/styling/
   const { run: reStyle } = createEditorCompartment(view)
-  const setStyle = (style: CSS.Properties = {}) => {
-    reStyle(EditorView.theme({ '&': { ...style } }))
+  const setStyle = (style: CSSProperties = {}) => {
+    reStyle(EditorView.theme({ '&': { ...(style as any) } }))
   }
 
   return {

src/props.ts

@@ -1,4 +1,4 @@
-import * as CSS from 'csstype'
+import type { CSSProperties } from 'vue'
 import { PropType, ExtractPropTypes } from 'vue'
 import { EditorStateConfig } from '@codemirror/state'
 
@@ -14,7 +14,7 @@ export const configProps = {
   indentWithTab: NonDefaultBooleanType,
   tabSize: Number,
   placeholder: String,
-  style: Object as PropType<CSS.Properties>,
+  style: Object as PropType<CSSProperties>,
   autoDestroy: NonDefaultBooleanType,
   phrases: Object as PropType<Record<string, string>>,
   // codemirror options

yarn.lock

@@ -1603,11 +1603,6 @@ csstype@^2.6.8:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.20.tgz#9229c65ea0b260cf4d3d997cb06288e36a8d6dda"
   integrity sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==
 
-csstype@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.0.tgz#4ddcac3718d787cf9df0d1b7d15033925c8f29f2"
-  integrity sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==
-
 data-urls@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-3.0.2.tgz#9cf24a477ae22bcef5cd5f6f0bfbc1d2d3be9143"