@vituum/vite-plugin-tailwindcss 1.0.0-alpha.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Vituum
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,32 @@
+<a href="https://npmjs.com/package/@vituum/vite-plugin-tailwind"><img src="https://img.shields.io/npm/v/@vituum/vite-plugin-tailwind.svg" alt="npm package"></a>
+<a href="https://nodejs.org/en/about/releases/"><img src="https://img.shields.io/node/v/@vituum/vite-plugin-tailwind.svg" alt="node compatility"></a>
+
+# ⚡️🎨 ViteTailwindCSS
+Adds out of the box support for TailwindCSS with 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 tailwindcss from '@vituum/vite-plugin-tailwindcss'
+
+export default {
+  plugins: [
+    tailwindcss()
+  ]
+}
+```
+
+* Don't forget to also add your `tailwind.config.js`, [learn more here](https://tailwindcss.com/docs/guides/vite).
+* If you want to add more PostCSS plugins, use add the 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/config/plugins-options.html#vituum-postcss) to learn more about plugin options
+
+### Requirements
+
+- [Node.js LTS (18.x)](https://nodejs.org/en/download/)
+- [Vite](https://vitejs.dev/)

package/index.js

@@ -0,0 +1,53 @@
+import postcssImport from 'postcss-import'
+import postcssNesting from 'postcss-nesting'
+import postcssCustomMedia from 'postcss-custom-media'
+import tailwindcss from 'tailwindcss'
+import tailwindcssNesting from 'tailwindcss/nesting'
+import autoprefixer from 'autoprefixer'
+import { getPackageInfo, merge } from 'vituum/utils/common.js'
+
+const { name } = getPackageInfo(import.meta.url)
+
+/**
+ * @type {import('@vituum/vite-plugin-tailwind/types/index').PluginUserConfig}
+ */
+const defaultOptions = {
+    import: {},
+    nesting: {},
+    customMedia: {},
+    autoprefixer: {},
+    tailwindcss: undefined
+}
+
+/**
+ * @param {import('@vituum/vite-plugin-tailwind/types/index').PluginUserConfig} options
+ * @returns {import('vite').Plugin}
+ */
+const plugin = (options = {}) => {
+    options = merge(defaultOptions, options)
+
+    const postcssPlugins = [
+        postcssImport(options.import),
+        tailwindcssNesting(postcssNesting(options.nesting)),
+        postcssCustomMedia(options.customMedia),
+        tailwindcss(options.tailwindcss),
+        autoprefixer(options.autoprefixer)
+    ]
+
+    return {
+        name,
+        enforce: 'pre',
+        /** @param {import('@vituum/vite-plugin-tailwind/types/viteUserConfig').ViteUserConfig} userConfig */
+        config (userConfig) {
+            if (!userConfig?.css?.postcss && !userConfig?.css?.postcss?.plugins) {
+                userConfig.css = userConfig.css || {}
+                userConfig.css.postcss = userConfig.css.postcss || {}
+                userConfig.css.postcss.plugins = postcssPlugins
+            } else if (userConfig.css.postcss.plugins) {
+                userConfig.css.postcss.plugins = postcssPlugins.concat(...userConfig.css.postcss.plugins)
+            }
+        }
+    }
+}
+
+export default plugin

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@vituum/vite-plugin-tailwindcss",
+  "version": "1.0.0-alpha.1",
+  "type": "module",
+  "main": "index.js",
+  "scripts": {
+    "tsc": "tsc",
+    "eslint": "eslint '**/*.js' --fix"
+  },
+  "dependencies": {
+    "vituum": "^1.0.0-alpha.16",
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.24",
+    "postcss-import": "^15.1.0",
+    "postcss-nesting": "^11.3.0",
+    "postcss-custom-media": "^9.1.4",
+    "tailwindcss": "^3.3.2"
+  },
+  "devDependencies": {
+    "@types/node": "^20.3.1",
+    "vite": "^4.3.9",
+    "eslint": "^8.43.0",
+    "eslint-config-standard": "^17.1.0",
+    "typescript": "^5.1.3"
+  },
+  "files": [
+    "index.js",
+    "types"
+  ],
+  "exports": {
+    ".": "./index.js",
+    "./types": "./types/*"
+  },
+  "engines": {
+    "node": ">=18.0.0",
+    "npm": ">=9.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vituum/vite-plugin-tailwind.git"
+  }
+}

package/types/index.d.ts

@@ -0,0 +1,7 @@
+export interface PluginUserConfig {
+    import?: import('@vituum/vite-plugin-tailwind/types/postcssImport.d.ts').AtImportOptions
+    nesting?: import('postcss-nesting').pluginOptions
+    customMedia?: import('postcss-custom-media').pluginOptions
+    autoprefixer?: import('autoprefixer').Options
+    tailwindcss?: import('tailwindcss').Config
+}

package/types/postcssImport.d.ts

@@ -0,0 +1,91 @@
+// Type definitions for postcss-import 14.0
+// Project: https://github.com/postcss/postcss-import#readme
+// Definitions by: Remco Haszing <https://github.com/remcohaszing>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+import { AcceptedPlugin, Transformer } from 'postcss';
+
+export = atImport;
+
+/**
+ * This plugin can consume local files, node modules or web_modules. To resolve path of an `@import` rule, it can look into root directory (by default `process.cwd()`), `web_modules`, `node_modules`
+ * or local modules. _When importing a module, it will look for `index.css` or file referenced in `package.json` in the `style` or `main` fields._ You can also provide manually multiples paths where
+ * to look at.
+ *
+ * **Notes:**
+ *
+ * - **This plugin should probably be used as the first plugin of your list. This way, other plugins will work on the AST as if there were only a single file to process, and will probably work as you
+ *   can expect**.
+ * - This plugin works great with [postcss-url](https://github.com/postcss/postcss-url) plugin, which will allow you to adjust assets `url()` (or even inline them) after inlining imported files.
+ * - In order to optimize output, **this plugin will only import a file once** on a given scope (root, media query…). Tests are made from the path & the content of imported files (using a hash table).
+ *   If this behavior is not what you want, look at `skipDuplicates` option
+ * - **If you are looking for glob, or sass like imports (prefixed partials)**, please look at [postcss-easy-import](https://github.com/trysound/postcss-easy-import) (which use this plugin under the
+ *   hood).
+ * - Imports which are not modified (by `options.filter` or because they are remote imports) are moved to the top of the output.
+ * - **This plugin attempts to follow the CSS `@import` spec**; `@import` statements must precede all other statements (besides `@charset`).
+ */
+declare function atImport(options?: atImport.AtImportOptions): Transformer;
+
+declare namespace atImport {
+    interface AtImportOptions {
+        /**
+         * Only transform imports for which the test function returns `true`. Imports for which the test function returns `false` will be left as is. The function gets the path to import as an
+         * argument and should return a boolean.
+         *
+         * @default () => true
+         */
+        filter?: (path: string) => boolean;
+
+        /**
+         * Define the root where to resolve path (eg: place where `node_modules` are). Should not be used that much.
+         *
+         * _Note: nested @import will additionally benefit of the relative dirname of imported files._
+         *
+         * Default: `process.cwd()` or dirname of [the postcss from](https://github.com/postcss/postcss#node-source)
+         */
+        root?: string | undefined;
+
+        /**
+         * A string or an array of paths in where to look for files.
+         */
+        path?: string | string[] | undefined;
+
+        /**
+         * An array of plugins to be applied on each imported files.
+         */
+        plugins?: AcceptedPlugin[] | undefined;
+
+        /**
+         * You can provide a custom path resolver with this option. This function gets `(id, basedir, importOptions)` arguments and should return a path, an array of paths or a promise resolving to
+         * the path(s). If you do not return an absolute path, your path will be resolved to an absolute path using the default resolver. You can use
+         * [resolve](https://github.com/substack/node-resolve) for this.
+         */
+        resolve?:
+            | ((
+            id: string,
+            basedir: string,
+            importOptions: AtImportOptions,
+        ) => string | string[] | PromiseLike<string | string[]>)
+            | undefined;
+
+        /**
+         * You can overwrite the default loading way by setting this option. This function gets `(filename, importOptions)` arguments and returns content or promised content.
+         */
+        load?: ((filename: string, importOptions: AtImportOptions) => string | Promise<string>) | undefined;
+
+        /**
+         * By default, similar files (based on the same content) are being skipped. It's to optimize output and skip similar files like `normalize.css` for example. If this behavior is not what you
+         * want, just set this option to false to disable it.
+         *
+         * @default true
+         */
+        skipDuplicates?: boolean | undefined;
+
+        /**
+         * An array of folder names to add to Node's resolver. Values will be appended to the default resolve directories: `["node_modules", "web_modules"]`.
+         *
+         * This option is only for adding additional directories to default resolver. If you provide your own resolver via the `resolve` configuration option above, then this value will be ignored.
+         */
+        addModulesDirectories?: string[] | undefined;
+    }
+}

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
+}