feat: add support for TypeScript based configs

package.json

@@ -43,6 +43,7 @@
   },
   "dependencies": {
     "cosmiconfig": "^8.1.3",
+    "cosmiconfig-typescript-loader": "^4.3.0",
     "klona": "^2.0.6",
     "semver": "^7.3.8"
   },
@@ -74,6 +75,7 @@
     "postcss-dark-theme-class": "^0.7.3",
     "postcss-import": "^15.1.0",
     "postcss-js": "^4.0.1",
+    "postcss-load-config": "^4.0.1",
     "postcss-nested": "^6.0.1",
     "postcss-short": "^5.0.0",
     "prettier": "^2.8.7",

src/utils.js

@@ -4,6 +4,7 @@ import Module from "module";
 
 import { klona } from "klona/full";
 import { cosmiconfig, defaultLoaders } from "cosmiconfig";
+import { TypeScriptLoader } from "cosmiconfig-typescript-loader";
 
 import SyntaxError from "./Error";
 
@@ -59,16 +60,25 @@ async function loadConfig(loaderContext, config, postcssOptions) {
       `.${moduleName}rc.js`,
       `.${moduleName}rc.mjs`,
       `.${moduleName}rc.cjs`,
+      `.${moduleName}rc.ts`,
+      `.${moduleName}rc.mts`,
+      `.${moduleName}rc.cts`,
       `.config/${moduleName}rc`,
       `.config/${moduleName}rc.json`,
       `.config/${moduleName}rc.yaml`,
       `.config/${moduleName}rc.yml`,
       `.config/${moduleName}rc.js`,
       `.config/${moduleName}rc.mjs`,
       `.config/${moduleName}rc.cjs`,
+      `.config/${moduleName}rc.ts`,
+      `.config/${moduleName}rc.mts`,
+      `.config/${moduleName}rc.cts`,
       `${moduleName}.config.js`,
       `${moduleName}.config.mjs`,
       `${moduleName}.config.cjs`,
+      `${moduleName}.config.ts`,
+      `${moduleName}.config.mts`,
+      `${moduleName}.config.cts`,
     ],
     loaders: {
       ".js": async (...args) => {
@@ -122,6 +132,9 @@ async function loadConfig(loaderContext, config, postcssOptions) {
 
         return result;
       },
+      ".cts": TypeScriptLoader(),
+      ".mts": TypeScriptLoader(),
+      ".ts": TypeScriptLoader(),
     },
   });
 

test/config-autoload.test.js

@@ -78,6 +78,25 @@ describe("autoload config", () => {
     );
   });
 
+  it('should load "postcss.config.cts" with "Object" syntax of plugins', async () => {
+    const loadedConfig = await loadConfig(
+      loaderContext,
+      path.resolve(testDirectory, "ts/object")
+    );
+
+    expect(loadedConfig.config.map).toEqual(false);
+    expect(loadedConfig.config.from).toEqual(
+      "./test/fixtures/config-autoload/ts/object/index.css"
+    );
+    expect(loadedConfig.config.to).toEqual(
+      "./test/fixtures/config-autoload/ts/object/expect/index.css"
+    );
+    expect(Object.keys(loadedConfig.config.plugins).length).toEqual(2);
+    expect(loadedConfig.filepath).toEqual(
+      path.resolve(testDirectory, "ts/object", "postcss.config.cts")
+    );
+  });
+
   it('should load "postcss.config.js" with "Array" syntax of plugins', async () => {
     const loadedConfig = await loadConfig(
       loaderContext,
@@ -97,6 +116,25 @@ describe("autoload config", () => {
     );
   });
 
+  it('should load "postcss.config.ts" with "Array" syntax of plugins', async () => {
+    const loadedConfig = await loadConfig(
+      loaderContext,
+      path.resolve(testDirectory, "ts/array")
+    );
+
+    expect(loadedConfig.config.map).toEqual(false);
+    expect(loadedConfig.config.from).toEqual(
+      "./test/fixtures/config-autoload/ts/object/index.css"
+    );
+    expect(loadedConfig.config.to).toEqual(
+      "./test/fixtures/config-autoload/ts/object/expect/index.css"
+    );
+    expect(Object.keys(loadedConfig.config.plugins).length).toEqual(4);
+    expect(loadedConfig.filepath).toEqual(
+      path.resolve(testDirectory, "ts/array", "postcss.config.ts")
+    );
+  });
+
   it('should load empty ".postcssrc"', async () => {
     const loadedConfig = await loadConfig(
       loaderContext,

test/fixtures/config-autoload/ts/array/imports/section.css

@@ -0,0 +1,3 @@
+.import {
+  color: goldenrod;
+}

test/fixtures/config-autoload/ts/array/index.css

@@ -0,0 +1,5 @@
+@import 'imports/section.css';
+
+.test {
+  color: cyan;
+}

test/fixtures/config-autoload/ts/array/index.js

@@ -0,0 +1,3 @@
+import style from './index.css'
+
+export default style

test/fixtures/config-autoload/ts/array/postcss.config.cts

@@ -0,0 +1,23 @@
+import type { Config as PostCSSConfig } from 'postcss-load-config';
+import { Configuration as WebpackConfig } from 'webpack';
+
+module.exports = function (api: WebpackConfig): PostCSSConfig {
+  return {
+    parser: 'sugarss',
+    syntax: 'sugarss',
+    map: api.mode === 'development' ? 'inline' : false,
+    from: './test/fixtures/config-autoload/js/object/index.css',
+    to: './test/fixtures/config-autoload/js/object/expect/index.css',
+    plugins: [
+      'postcss-import',
+      [
+        'postcss-nested',
+        {
+          // Options
+        }
+      ],
+      require('postcss-nested'),
+      require('postcss-nested')({ /* Options */ }),
+    ]
+  }
+};

test/fixtures/config-autoload/ts/object/imports/section.css

@@ -0,0 +1,3 @@
+.import {
+  color: red;
+}

test/fixtures/config-autoload/ts/object/index.css

@@ -0,0 +1,5 @@
+@import "imports/section.css";
+
+.test {
+  color: blue;
+}

test/fixtures/config-autoload/ts/object/index.js

@@ -0,0 +1,3 @@
+import style from './index.css'
+
+export default style

test/fixtures/config-autoload/ts/object/postcss.config.ts

@@ -0,0 +1,18 @@
+import type { Config as PostCSSConfig } from 'postcss-load-config';
+import { Configuration as WebpackConfig } from 'webpack';
+
+const config = function (api: WebpackConfig): PostCSSConfig {
+  return {
+    parser: 'sugarss',
+    syntax: 'sugarss',
+    map: api.mode === 'development' ? 'inline' : false,
+    from: './test/fixtures/config-autoload/js/object/index.css',
+    to: './test/fixtures/config-autoload/js/object/expect/index.css',
+    plugins: {
+      'postcss-import': {},
+      'postcss-nested': {},
+    }
+  }
+};
+
+export default config;