@vituum/vite-plugin-postcss 1.0.0-alpha.1 → 1.0.0-beta.1

package/README.md

@@ -1,7 +1,14 @@
 <a href="https://npmjs.com/package/@vituum/vite-plugin-postcss"><img src="https://img.shields.io/npm/v/@vituum/vite-plugin-postcss.svg" alt="npm package"></a>
 <a href="https://nodejs.org/en/about/releases/"><img src="https://img.shields.io/node/v/@vituum/vite-plugin-postcss.svg" alt="node compatility"></a>
 
-# ⚡️ VitePostCSS
+# ⚡️🎨 VitePostCSS
+Adds out of the box support for following PostCSS plugins:
+* [`postcss-import`](https://www.npmjs.com/package/postcss-import)
+* [`postcss-nesting`](https://www.npmjs.com/package/postcss-nesting)
+* [`postcss-custom-media`](https://www.npmjs.com/package/postcss-custom-media)
+* [`autoprefixer`](https://www.npmjs.com/package/autoprefixer)
+
+## Basic usage
 
 ```js
 import postcss from '@vituum/vite-plugin-postcss'
@@ -13,7 +20,10 @@ export default {
 }
 ```
 
-Read the [docs](https://vituum.dev/config/plugins-options.html#vituum-postcss) to learn more about plugin options
+* If you want to add more PostCSS plugins, add them via [css.postcss.plugins](https://vitejs.dev/config/shared-options.html#css-postcss).
+* If you want to use `postcss.config.cjs` add `css.postcss: process.cwd()`, PostCSS config and it's plugins will be used instead.
+
+Read the [docs](https://vituum.dev/plugins/postcss.html) to learn more about plugin options
 
 ### Requirements
 

package/index.js

@@ -7,7 +7,7 @@ import { getPackageInfo, merge } from 'vituum/utils/common.js'
 const { name } = getPackageInfo(import.meta.url)
 
 /**
- * @type {import('@vituum/vite-plugin-postcss/types/index.d.ts').PluginUserConfig}
+ * @type {import('@vituum/vite-plugin-postcss/types/index').PluginUserConfig}
  */
 const defaultOptions = {
     import: {},
@@ -17,25 +17,29 @@ const defaultOptions = {
 }
 
 /**
- * @param {import('@vituum/vite-plugin-postcss/types/index.d.ts').PluginUserConfig} options
+ * @param {import('@vituum/vite-plugin-postcss/types/index').PluginUserConfig} options
  * @returns {import('vite').Plugin}
  */
-const plugin = (options) => {
+const plugin = (options = {}) => {
     options = merge(defaultOptions, options)
 
-    const postcssPlugins = [postcssImport(options.import), postcssNesting(options.nesting), postcssCustomMedia(options.customMedia), autoprefixer(options.autoprefixer)]
+    const postcssPlugins = [
+        postcssImport(options.import),
+        postcssNesting(options.nesting),
+        postcssCustomMedia(options.customMedia),
+        autoprefixer(options.autoprefixer)
+    ]
 
     return {
         name,
         enforce: 'pre',
+        /** @param {import('@vituum/vite-plugin-postcss/types/viteUserConfig').ViteUserConfig} userConfig */
         config (userConfig) {
-            // @ts-ignore
-            if (!userConfig?.css?.postcss?.plugins) {
+            if (!userConfig?.css?.postcss && !userConfig?.css?.postcss?.plugins) {
                 userConfig.css = userConfig.css || {}
                 userConfig.css.postcss = userConfig.css.postcss || {}
                 userConfig.css.postcss.plugins = postcssPlugins
-            } else {
-                // @ts-ignore
+            } else if (userConfig.css.postcss.plugins) {
                 userConfig.css.postcss.plugins = postcssPlugins.concat(...userConfig.css.postcss.plugins)
             }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vituum/vite-plugin-postcss",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-beta.1",
   "type": "module",
   "main": "index.js",
   "scripts": {
@@ -8,7 +8,7 @@
     "eslint": "eslint '**/*.js' --fix"
   },
   "dependencies": {
-    "vituum": "^1.0.0-alpha.16",
+    "vituum": "^1.0.0-beta.3",
     "lodash": "^4.17.21",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.24",

package/types/viteUserConfig.d.ts

@@ -0,0 +1,11 @@
+export interface ViteUserConfigPostCSSPlugins {
+    plugins?: import('postcss').Plugin[]
+}
+
+export interface ViteUserConfigPostCSS {
+    postcss?: ViteUserConfigPostCSSPlugins
+}
+
+export interface ViteUserConfig {
+    css?: ViteUserConfigPostCSS
+}