Presently, the project utilizes a CommonJS module to store configuration values in a single file:
module.exports = {
classA: `classA`,
classB: `classB`
classC: `classC`
}
This makes it easy to reuse these values for creating JS selectors by following this process:
const CLASSES = require('./classes')
const SELECTORS = Object.keys(CLASSES).reduce((obj, key) => {
const selectorKey = key.replace(`class`, `selector`)
obj[selectorKey] = `.${CLASSES[key]}`
return obj
}, {})
module.exports = SELECTORS
The selectors are then used within the code logic and passed to PostCSS config to generate a list of variables for use in .pcss files.
This system is incredibly useful for streamlining development, and with CommonJS, specific values can be imported into components as needed like so:
import { classA } from './path/classesWhile this setup has been successful thus far, importing it the same way in a TypeScript file does not meet TSLint constraints and results in an error message:
Could not find a declaration file for module implicitly has an 'any' typeShown below is the tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"noImplicitThis": true,
"baseUrl": ".",
"types": [
"webpack-env",
"jest"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
I am curious if there exists a proper way to satisfy TypeScript requirements and declare module types, or possibly rewrite the current logic while maintaining its functionality.
P.S: After consulting with a duck, I realized that converting it into a TypeScript module may prevent the ability to import selectors in the postcss config due to its lack of support for ES6 import