Enforce use of type-only imports.

Author: sheabunge

config/modules/postcss-easy-import.d.ts

@@ -1,5 +1,5 @@
 declare module 'postcss-easy-import' {
-	import { Plugin } from 'postcss'
+	import type { Plugin } from 'postcss'
 
 	export default function (opts: {
 		prefix: string | boolean

config/modules/postcss-hexrgba.d.ts

@@ -1,4 +1,4 @@
 declare module 'postcss-hexrgba' {
-	import { Plugin } from 'postcss'
+	import type { Plugin } from 'postcss'
 	export default function (): Plugin
 }

config/modules/webpack-rtl-plugin.d.ts

@@ -1,7 +1,8 @@
 declare module 'webpack-rtl-plugin' {
-	import { ConfigOptions, Plugin } from 'rtlcss'
-	import cssnano from 'cssnano'
-	import webpack, { WebpackPluginInstance } from 'webpack'
+	import type { ConfigOptions, Plugin } from 'rtlcss'
+	import type cssnano from 'cssnano'
+	import type { WebpackPluginInstance } from 'webpack'
+	import type webpack from 'webpack'
 
 	class WebpackRtlPlugin implements WebpackPluginInstance {
 		constructor(options?: {

config/webpack-css.ts

@@ -1,6 +1,6 @@
 import path from 'path'
-import { Configuration, EntryObject } from 'webpack'
-import { Config as PostCssConfig } from 'postcss-load-config'
+import type { Configuration, EntryObject } from 'webpack'
+import type { Config as PostCssConfig } from 'postcss-load-config'
 import libsass from 'sass'
 import cssnano from 'cssnano'
 import autoprefixer from 'autoprefixer'
@@ -30,7 +30,7 @@ export const cssWebpackConfig: Configuration = {
 	entry: {
 		...entriesFromFiles(
 			['src/css/*.scss', '!src/css/**/_*.scss'],
-			filename => `${path.parse(filename).name}-style`
+			filename => `${path.parse(filename).name}-css`
 		),
 		...entriesFromFiles(
 			'node_modules/codemirror/theme/*.css',
@@ -96,7 +96,7 @@ export const cssWebpackConfig: Configuration = {
 				chunk?.name ?
 					`${chunk.name}.css`
 						.replace(/^codemirror-theme-/, 'editor-themes/')
-						.replace(/-style\.css$/, '.css') :
+						.replace(/-css\.css$/, '.css') :
 					'[name].css'
 		}),
 		new WebpackRTLPlugin({

config/webpack-js.ts

@@ -1,4 +1,5 @@
-import { DefinePlugin, Configuration } from 'webpack'
+import type { Configuration } from 'webpack'
+import { DefinePlugin } from 'webpack'
 import { join, resolve } from 'path'
 import ESLintPlugin from 'eslint-webpack-plugin'
 import RemoveEmptyScriptsPlugin from 'webpack-remove-empty-scripts'

eslint.config.mjs

@@ -58,8 +58,11 @@ export default typescript.config(
 				assertionStyle: 'angle-bracket',
 				objectLiteralTypeAssertions: 'never'
 			}],
+			'@typescript-eslint/consistent-type-imports': 'error',
+			'@typescript-eslint/consistent-type-exports': 'error',
 			'@typescript-eslint/no-confusing-void-expression': ['error', { ignoreArrowShorthand: true }],
 			'@typescript-eslint/no-for-in-array': 'error',
+			'@typescript-eslint/no-import-type-side-effects': 'error',
 			'@typescript-eslint/no-inferrable-types': ['error', { ignoreProperties: true, ignoreParameters: false }],
 			'@typescript-eslint/no-unused-vars': ['error', {
 				argsIgnorePattern: '^_',

package.json

@@ -3,14 +3,14 @@
     "description": "Manage code snippets running on a WordPress-powered site through a graphical interface.",
     "homepage": "https://wordpress.org/plugins/code-snippets",
     "version": "3.6.5.1",
-    "main": "dist/edit.js",
+    "main": "src/dist/edit.js",
     "directories": {
         "test": "tests"
     },
     "scripts": {
         "test": "eslint && npm run phpcs",
-        "build": "webpack --mode development",
-        "watch": "webpack --mode development --watch",
+        "build": "webpack",
+        "watch": "webpack --watch",
         "bundle": "ts-node scripts/bundle.ts",
         "phpcs": "src/vendor/bin/phpcs -s --colors ./phpcs.xml",
         "phpcbf": "src/vendor/bin/phpcbf ./phpcs.xml",

scripts/bundle.ts

@@ -1,7 +1,8 @@
 import { spawn } from 'child_process'
 import { createWriteStream } from 'fs'
 import * as process from 'node:process'
-import { webpack as webpackAsync, Configuration } from 'webpack'
+import type { Configuration } from 'webpack'
+import { webpack as webpackAsync } from 'webpack'
 import plugin from '../package.json'
 import webpackConfig from '../webpack.config'
 import { cleanup, copy, resolve } from './utils/files'

src/js/components/SnippetForm/SnippetEditor/CodeEditorShortcuts.tsx

@@ -1,7 +1,8 @@
 import { __, _x } from '@wordpress/i18n'
 import classnames from 'classnames'
 import React from 'react'
-import { KEYBOARD_KEYS, KeyboardShortcut } from '../../../types/KeyboardShortcut'
+import type { KeyboardShortcut } from '../../../types/KeyboardShortcut'
+import { KEYBOARD_KEYS } from '../../../types/KeyboardShortcut'
 import { isMacOS } from '../../../utils/general'
 
 const shortcuts: KeyboardShortcut[] = [

src/js/components/SnippetForm/SnippetEditor/SnippetEditor.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect } from 'react'
 import { __, _x } from '@wordpress/i18n'
 import { addQueryArgs } from '@wordpress/url'
-import { Editor, EditorConfiguration } from 'codemirror'
-import { SNIPPET_TYPE_SCOPES, SNIPPET_TYPES, SnippetScope, SnippetType } from '../../../types/Snippet'
+import type { Editor, EditorConfiguration } from 'codemirror'
+import type { SnippetScope, SnippetType } from '../../../types/Snippet'
+import { SNIPPET_TYPE_SCOPES, SNIPPET_TYPES } from '../../../types/Snippet'
 import '../../../editor'
 import { isLicensed } from '../../../utils/general'
 import { getSnippetType, isProType } from '../../../utils/snippets'

src/js/components/SnippetForm/buttons/ExportButtons.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { AxiosResponse } from 'axios'
+import type { AxiosResponse } from 'axios'
 import { __ } from '@wordpress/i18n'
 import { Button } from '../../common/Button'
-import { SnippetsExport } from '../../../types/SnippetsExport'
+import type { SnippetsExport } from '../../../types/SnippetsExport'
 import { useSnippetsAPI } from '../../../hooks/useSnippets'
 import { downloadSnippetExportFile } from '../../../utils/files'
 import { useSnippetForm } from '../../../hooks/useSnippetForm'

src/js/components/SnippetForm/buttons/SubmitButtons.tsx

@@ -1,9 +1,10 @@
 import React, { useState } from 'react'
 import { __ } from '@wordpress/i18n'
 import { handleUnknownError } from '../../../utils/errors'
-import { Button, ButtonProps } from '../../common/Button'
+import type { ButtonProps } from '../../common/Button'
+import { Button } from '../../common/Button'
 import { ConfirmDialog } from '../../common/ConfirmDialog'
-import { Snippet } from '../../../types/Snippet'
+import type { Snippet } from '../../../types/Snippet'
 import { isNetworkAdmin } from '../../../utils/general'
 import { useSnippetForm } from '../../../hooks/useSnippetForm'
 

src/js/components/SnippetForm/fields/ScopeInput.tsx

@@ -1,9 +1,12 @@
 import { ExternalLink } from '@wordpress/components'
 import { __ } from '@wordpress/i18n'
-import React, { Dispatch, SetStateAction, useState } from 'react'
-import { SNIPPET_TYPE_SCOPES, SNIPPET_TYPES, SnippetScope } from '../../../types/Snippet'
+import type { Dispatch, SetStateAction} from 'react'
+import React, { useState } from 'react'
+import type { SnippetScope } from '../../../types/Snippet'
+import { SNIPPET_TYPE_SCOPES, SNIPPET_TYPES } from '../../../types/Snippet'
 import { isNetworkAdmin } from '../../../utils/general'
-import { buildShortcodeTag, ShortcodeAtts } from '../../../utils/shortcodes'
+import type { ShortcodeAtts } from '../../../utils/shortcodes'
+import { buildShortcodeTag } from '../../../utils/shortcodes'
 import { getSnippetType } from '../../../utils/snippets'
 import { CopyToClipboardButton } from '../../common/CopyToClipboardButton'
 import { useSnippetForm } from '../../../hooks/useSnippetForm'

src/js/components/SnippetForm/page/Notices.tsx

@@ -1,5 +1,6 @@
 import classnames from 'classnames'
-import React, { MouseEventHandler, ReactNode, useEffect } from 'react'
+import type { MouseEventHandler, ReactNode} from 'react'
+import React, { useEffect } from 'react'
 import { __, sprintf } from '@wordpress/i18n'
 import { useSnippetForm } from '../../../hooks/useSnippetForm'
 

src/js/components/SnippetForm/page/UpgradeDialog.tsx

@@ -1,4 +1,5 @@
-import React, { Dispatch, SetStateAction, useState } from 'react'
+import type { Dispatch, SetStateAction} from 'react'
+import React, { useState } from 'react'
 import { ExternalLink, Modal } from '@wordpress/components'
 import { __, _n, sprintf } from '@wordpress/i18n'
 

src/js/components/TagEditor/TagEditor.tsx

@@ -2,7 +2,8 @@
  * Code based on Tagger, copyright (c) 2018-2022 Jakub T. Jankiewicz <https://jcubic.pl/me>
  * Released under the MIT license.
  */
-import React, { InputHTMLAttributes, KeyboardEventHandler, useRef, useState } from 'react'
+import type { InputHTMLAttributes, KeyboardEventHandler} from 'react'
+import React, { useRef, useState } from 'react'
 import { handleUnknownError } from '../../utils/errors'
 import { SuggestionList } from './SuggestionList'
 import { TagList } from './TagList'

src/js/components/common/Button.tsx

@@ -1,4 +1,5 @@
-import React, { ButtonHTMLAttributes } from 'react'
+import type { ButtonHTMLAttributes } from 'react'
+import React from 'react'
 import classnames from 'classnames'
 
 export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'name'> {

src/js/components/common/ConfirmDialog.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react'
+import type { ReactNode } from 'react'
+import React from 'react'
 import { __ } from '@wordpress/i18n'
 import { Modal, Flex, Button } from '@wordpress/components'
 

src/js/components/common/CopyToClipboardButton.tsx

@@ -1,4 +1,5 @@
-import React, { HTMLAttributes, MouseEventHandler, useState } from 'react'
+import type { HTMLAttributes, MouseEventHandler} from 'react'
+import React, { useState } from 'react'
 import { handleUnknownError } from '../../utils/errors'
 
 const TIMEOUT = 3000

src/js/editor.ts

@@ -1,4 +1,5 @@
-import { registerHelper, defineMode, getMode, EditorConfiguration, ModeSpec } from 'codemirror'
+import type { EditorConfiguration, ModeSpec } from 'codemirror'
+import { registerHelper, defineMode, getMode } from 'codemirror'
 import { Linter } from './utils/Linter'
 
 interface ModeSpecOptions {

src/js/hooks/useAxios.ts

@@ -1,5 +1,6 @@
 import { useMemo } from 'react'
-import axios, { AxiosInstance, AxiosResponse, CreateAxiosDefaults } from 'axios'
+import type { AxiosInstance, AxiosResponse, CreateAxiosDefaults } from 'axios'
+import axios from 'axios'
 
 export interface AxiosAPI {
 	get: <T>(url: string) => Promise<AxiosResponse<T, never>>

src/js/hooks/useSnippetForm.tsx

@@ -1,8 +1,9 @@
 import { isAxiosError } from 'axios'
-import React, { createContext, Dispatch, PropsWithChildren, SetStateAction, useCallback, useContext, useMemo, useState } from 'react'
-import { ScreenNotice } from '../types/ScreenNotice'
-import { Snippet } from '../types/Snippet'
-import { CodeEditorInstance } from '../types/WordPressCodeEditor'
+import type { Dispatch, PropsWithChildren, SetStateAction} from 'react'
+import React, { createContext, useCallback, useContext, useMemo, useState } from 'react'
+import type { ScreenNotice } from '../types/ScreenNotice'
+import type { Snippet } from '../types/Snippet'
+import type { CodeEditorInstance } from '../types/WordPressCodeEditor'
 import { isLicensed } from '../utils/general'
 import { isProSnippet } from '../utils/snippets'
 import { useSnippetSubmit } from './useSnippetSubmit'

src/js/hooks/useSnippetSubmit.ts

@@ -1,9 +1,10 @@
 import { __ } from '@wordpress/i18n'
 import { addQueryArgs } from '@wordpress/url'
 import { isAxiosError } from 'axios'
-import { Dispatch, SetStateAction, useCallback } from 'react'
-import { ScreenNotice } from '../types/ScreenNotice'
-import { Snippet } from '../types/Snippet'
+import type { Dispatch, SetStateAction} from 'react'
+import { useCallback } from 'react'
+import type { ScreenNotice } from '../types/ScreenNotice'
+import type { Snippet } from '../types/Snippet'
 import { useSnippetsAPI } from './useSnippets'
 
 const getSuccessNotice = (request: Snippet, response: Snippet, active: boolean | undefined) => {

src/js/hooks/useSnippets.ts

@@ -1,8 +1,8 @@
 import { useEffect, useMemo, useState } from 'react'
-import { AxiosResponse, CreateAxiosDefaults } from 'axios'
+import type { AxiosResponse, CreateAxiosDefaults } from 'axios'
 import { addQueryArgs } from '@wordpress/url'
-import { SnippetsExport } from '../types/SnippetsExport'
-import { Snippet } from '../types/Snippet'
+import type { SnippetsExport } from '../types/SnippetsExport'
+import type { Snippet } from '../types/Snippet'
 import { handleUnknownError } from '../utils/errors'
 import { isNetworkAdmin } from '../utils/general'
 import { useAxios } from './useAxios'

src/js/mce.ts

@@ -1,7 +1,7 @@
 import * as tinymce from 'tinymce'
-import { Editor } from 'tinymce'
-import { ContentShortcodeAtts, SourceShortcodeAtts } from './types/Shortcodes'
-import { LocalisedEditor } from './types/WordPressEditor'
+import type { Editor } from 'tinymce'
+import type { ContentShortcodeAtts, SourceShortcodeAtts } from './types/Shortcodes'
+import type { LocalisedEditor } from './types/WordPressEditor'
 
 const convertToValues = (array: Record<string, string>) =>
 	Object.keys(array).map(key => ({

src/js/services/manage/activation.ts

@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n'
-import { Snippet } from '../../types/Snippet'
+import type { Snippet } from '../../types/Snippet'
 import { updateSnippet } from './requests'
 
 /**

src/js/services/manage/priority.ts

@@ -1,4 +1,4 @@
-import { Snippet } from '../../types/Snippet'
+import type { Snippet } from '../../types/Snippet'
 import { updateSnippet } from './requests'
 
 /**

src/js/services/manage/requests.ts

@@ -1,4 +1,4 @@
-import { Snippet, SnippetScope } from '../../types/Snippet'
+import type { Snippet, SnippetScope } from '../../types/Snippet'
 import { isNetworkAdmin } from '../../utils/general'
 
 export interface ResponseData<T = unknown> {

src/js/types/SelectOption.ts

@@ -1,4 +1,4 @@
-import { GroupBase } from 'react-select'
+import type { GroupBase } from 'react-select'
 
 export interface SelectOption<T> {
 	readonly value: T

src/js/types/SnippetsExport.ts

@@ -1,4 +1,4 @@
-import { Snippet } from './Snippet'
+import type { Snippet } from './Snippet'
 
 export interface SnippetsExport {
 	generator: string

src/js/types/Window.ts

@@ -1,7 +1,7 @@
-import tinymce from 'tinymce'
-import { Snippet } from './Snippet'
-import { CodeEditorInstance, EditorOption, WordPressCodeEditor } from './WordPressCodeEditor'
-import { WordPressEditor } from './WordPressEditor'
+import type tinymce from 'tinymce'
+import type { Snippet } from './Snippet'
+import type { CodeEditorInstance, EditorOption, WordPressCodeEditor } from './WordPressCodeEditor'
+import type { WordPressEditor } from './WordPressEditor'
 
 declare global {
 	interface Window {

src/js/types/WordPressCodeEditor.ts

@@ -1,4 +1,4 @@
-import { Editor, EditorConfiguration } from 'codemirror'
+import type { Editor, EditorConfiguration } from 'codemirror'
 
 export interface EditorOption {
 	name: string

src/js/types/WordPressEditor.ts

@@ -1,4 +1,4 @@
-import tinymce from 'tinymce'
+import type tinymce from 'tinymce'
 
 export interface VisualEditorSettings {
 	tinymce: boolean | tinymce.Settings & {

src/js/types/wp/Page.ts

@@ -1,4 +1,4 @@
-import { Post } from './Post'
+import type { Post } from './Post'
 
 export const PAGES_ENDPOINT = '/wp/v2/pages'
 

src/js/utils/Linter.ts

@@ -30,7 +30,8 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import { Block, Location, Node, Engine } from 'php-parser'
+import type { Block, Location, Node} from 'php-parser'
+import { Engine } from 'php-parser'
 import CodeMirror from 'codemirror'
 
 export interface Annotation {

src/js/utils/files.ts

@@ -1,4 +1,4 @@
-import { Snippet } from '../types/Snippet'
+import type { Snippet } from '../types/Snippet'
 import { getSnippetType } from './snippets'
 
 const SECOND_IN_MS = 1000

src/js/utils/restAPI.ts

@@ -1,4 +1,5 @@
-import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'
+import type { AxiosRequestConfig, AxiosResponse } from 'axios'
+import axios from 'axios'
 import { trimLeadingChar, trimTrailingChar } from './text'
 
 const REST_BASE = window.CODE_SNIPPETS?.restAPI.base ?? ''

src/js/utils/snippets.ts

@@ -1,4 +1,4 @@
-import { Snippet, SnippetScope, SnippetType } from '../types/Snippet'
+import type { Snippet, SnippetScope, SnippetType } from '../types/Snippet'
 import { isNetworkAdmin } from './general'
 
 const PRO_TYPES: SnippetType[] = ['css', 'js']

tsconfig.json

@@ -3,7 +3,11 @@
     "compilerOptions": {
         "allowSyntheticDefaultImports": true,
         "downlevelIteration": true,
+        "forceConsistentCasingInFileNames": true,
         "noImplicitAny": true,
+        "noImplicitReturns": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
         "resolveJsonModule": true,
         "skipLibCheck": false,
         "jsx": "react"

webpack.config.ts

@@ -1,4 +1,4 @@
-import { Configuration } from 'webpack'
+import type { Configuration } from 'webpack'
 import { merge } from 'webpack-merge'
 import { cssWebpackConfig } from './config/webpack-css'
 import { jsWebpackConfig } from './config/webpack-js'