feat: Support loading ECMAScript modules, but drop sync API

postcss · Apr 6, 2022 · 8f29d11 · 8f29d11
1 parent b43f8de
commit 8f29d11
Show file tree

Hide file tree

Showing 19 changed files with 172 additions and 247 deletions.
diff --git a/README.md b/README.md
@@ -91,14 +91,22 @@ plugins:
 
 ### `.postcssrc.js` or `postcss.config.js`
 
-You may need some logic within your config. In this case create JS file named **`.postcssrc.js`** or **`postcss.config.js`**
+You may need some logic within your config.
+In this case create JS file named:
+- `.postcssrc.js`
+- `.postcssrc.mjs`
+- `.postcssrc.cjs`
+- `.postcssrc.ts`
+- `postcss.config.js`
+- `postcss.config.mjs`
+- `postcss.config.cjs`
+- `postcss.config.ts`
 
 ```
 Project (Root)
   |– client
   |– public
-  |
-  |- (.postcssrc.js|postcss.config.js)
+  |- (.postcssrc|postcss.config).(js|mjs|cjs|ts)
   |- package.json
 ```
 
@@ -324,8 +332,6 @@ module.exports = (ctx) => ({
 }
 ```
 
-### `Async`
-
 ```js
 const { readFileSync } = require('fs')
 
@@ -343,21 +349,6 @@ postcssrc(ctx).then(({ plugins, options }) => {
 })
 ```
 
-### `Sync`
-
-```js
-const { readFileSync } = require('fs')
-
-const postcss = require('postcss')
-const postcssrc = require('postcss-load-config')
-
-const css = readFileSync('index.sss', 'utf8')
-
-const ctx = { parser: true, map: 'inline' }
-
-const { plugins, options } = postcssrc.sync(ctx)
-```
-
 <div align="center">
   <img width="80" height="80" halign="10" src="https://worldvectorlogo.com/logos/gulp.svg">
 </div>

diff --git a/package.json b/package.json
@@ -59,7 +59,7 @@
     "exclude": [
       "**/*.test.*"
     ],
-    "lines": 97.64,
+    "lines": 96.4,
     "check-coverage": true
   },
   "keywords": [

diff --git a/src/index.d.ts b/src/index.d.ts
@@ -11,12 +11,6 @@ declare function postcssrc(
 ): Promise<postcssrc.Result>;
 
 declare namespace postcssrc {
-  function sync(
-    ctx?: ConfigContext,
-    path?: string,
-    options?: ConfigOptions
-  ): Result;
-
   // In the ConfigContext, these three options can be instances of the
   // appropriate class, or strings. If they are strings, postcss-load-config will
   // require() them and pass the instances along.

diff --git a/src/index.js b/src/index.js
@@ -66,6 +66,19 @@ const createContext = (ctx) => {
   return ctx
 }
 
+const importOrRequire = async filepath => {
+  try {
+    return (await import(filepath)).default
+  } catch (error) {
+    // Node.js 10 does not support dynamic import(...) and throws 'Error: Not supported'.
+    // Can be removed when only Node.js >= 12 is supported.
+    if (error.message === 'Not supported') {
+      return require(filepath)
+    }
+    throw error
+  }
+}
+
 const addTypeScriptLoader = (options = {}, loader) => {
   const moduleName = 'postcss'
 
@@ -81,14 +94,19 @@ const addTypeScriptLoader = (options = {}, loader) => {
       `.${moduleName}rc.ts`,
       `.${moduleName}rc.js`,
       `.${moduleName}rc.cjs`,
+      `.${moduleName}rc.mjs`,
       `${moduleName}.config.ts`,
       `${moduleName}.config.js`,
-      `${moduleName}.config.cjs`
+      `${moduleName}.config.cjs`,
+      `${moduleName}.config.mjs`
     ],
     loaders: {
       ...options.loaders,
       '.yaml': (filepath, content) => yaml.parse(content),
       '.yml': (filepath, content) => yaml.parse(content),
+      '.js': importOrRequire,
+      '.cjs': importOrRequire,
+      '.mjs': importOrRequire,
       '.ts': loader
     }
   }
@@ -152,26 +170,6 @@ const rc = withTypeScriptLoader((ctx, path, options) => {
     })
 })
 
-rc.sync = withTypeScriptLoader((ctx, path, options) => {
-  /**
-   * @type {Object} The full Config Context
-   */
-  ctx = createContext(ctx)
-
-  /**
-   * @type {String} `process.cwd()`
-   */
-  path = path ? resolve(path) : process.cwd()
-
-  const result = config.lilconfigSync('postcss', options).search(path)
-
-  if (!result) {
-    throw new Error(`No PostCSS Config found in: ${path}`)
-  }
-
-  return processResult(ctx, result)
-})
-
 /**
  * Autoload Config for PostCSS
  *

diff --git a/test/Errors.test.js b/test/Errors.test.js
@@ -10,14 +10,6 @@ test('Loading Config - {Error}', () => {
   })
 })
 
-test('Loading Config - Sync - {Error}', () => {
-  try {
-    postcssrc.sync({}, 'test/err')
-  } catch (err) {
-    match(err.message, /^No PostCSS Config found in: (.*)$/)
-  }
-})
-
 describe('Loading Plugins - {Error}', test => {
   test('Plugin - {Type} - Invalid', () => {
     return postcssrc({}, 'test/err/plugins').catch(err => {
@@ -52,50 +44,6 @@ describe('Loading Plugins - {Error}', test => {
   test.run()
 })
 
-describe('Loading Plugins - Sync - {Error}', test => {
-  test('Plugin - {Type} - Invalid', () => {
-    try {
-      postcssrc.sync({}, 'test/err/plugins')
-    } catch (err) {
-      match(err.message, /^Invalid PostCSS Plugin found at: (.*)\n\n\(@.*\)$/)
-    }
-  })
-
-  test('Plugin - {Object}', () => {
-    try {
-      postcssrc.sync({}, 'test/err/plugins/object')
-    } catch (err) {
-      match(err.message, /^Loading PostCSS Plugin failed: .*$/m)
-    }
-  })
-
-  test('Plugin - {Object} - Options', () => {
-    try {
-      postcssrc.sync({}, 'test/err/plugins/object/options')
-    } catch (err) {
-      match(err.message, /^Loading PostCSS Plugin failed: .*$/m)
-    }
-  })
-
-  test('Plugin - {Array}', () => {
-    try {
-      postcssrc.sync({}, 'test/err/plugins/array')
-    } catch (err) {
-      match(err.message, /^Cannot find (.*)$/m)
-    }
-  })
-
-  test('Plugin - {Array} - Options', () => {
-    try {
-      postcssrc.sync({}, 'test/err/plugins/array/options')
-    } catch (err) {
-      match(err.message, /^Cannot find (.*)$/m)
-    }
-  })
-
-  test.run()
-})
-
 describe('Loading Options - {Error}', test => {
   test('Parser - {String}', () => {
     return postcssrc({}, 'test/err/options/parser').catch(err => {
@@ -118,32 +66,4 @@ describe('Loading Options - {Error}', test => {
   test.run()
 })
 
-describe('Loading Options - Sync - {Error}', test => {
-  test('Parser - {String}', () => {
-    try {
-      postcssrc.sync({}, 'test/err/options/parser')
-    } catch (err) {
-      match(err.message, /^Loading PostCSS Parser failed: .*$/m)
-    }
-  })
-
-  test('Syntax - {String}', () => {
-    try {
-      postcssrc.sync({}, 'test/err/options/syntax')
-    } catch (err) {
-      match(err.message, /^Loading PostCSS Syntax failed: .*$/m)
-    }
-  })
-
-  test('Stringifier - {String}', () => {
-    try {
-      postcssrc.sync({}, 'test/err/options/stringifier')
-    } catch (err) {
-      match(err.message, /^Loading PostCSS Stringifier failed: .*$/m)
-    }
-  })
-
-  test.run()
-})
-
 test.run()