Merge pull request #5 from forsartis/next

1.0.0

Author: forsartis

README.md

@@ -2,16 +2,66 @@
 [![Tailwind CSS](https://img.shields.io/npm/dependency-version/vue-cli-plugin-tailwind/tailwindcss.svg)](https://tailwindcss.com/)
 [![License](https://img.shields.io/npm/l/vue-cli-plugin-tailwind.svg)](https://github.com/forsartis/vue-cli-plugin-tailwind/blob/master/LICENSE)
 
+A plugin that adds Tailwind CSS and Purgecss to your vue-cli project.
 
 ## Getting started
-
 Inside your vue-cli project folder add the plugin via:
 ```
 vue add tailwind
 ```
+Choose what Tailwind config you want to generate:
+* **none** - Won't create a config file. Useful if you already have a config or you don't need to change Tailwinds default styles.
+* **minimal** *(default)* - Will create a minimal `tailwind.config.js` file where you can define your customizations.
+* **full** - Will generate a `tailwind.config.js` file containing the entire default configuration.
 
-:warning: Check the plugins order in your PostCSS config (autoprefixer should run after tailwindcss).
+See [Tailwinds configuration guide](https://next.tailwindcss.com/docs/configuration) for more info.
 
-## License
+## PostCSS Configuration
+Tailwind CSS and Purgecss will be added as plugins in your PostCSS config.
+```javascript
+// postcss.config.js
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    'vue-cli-plugin-tailwind/purgecss': {},
+    autoprefixer: {},
+  },
+};
+```
+### Custom Tailwind config file name
+If you use a name other than `tailwind.config.js` for the Tailwind config file, you will need to specify it in your PostCSS configuration.
+```javascript
+// postcss.config.js
+module.exports = {
+  plugins: {
+    tailwindcss: 'custom-name.js',
+    //...
+  },
+};
+```
+### Configure Purgecss
+By default Purgecss will look for css selectors in your `.html` files inside the `./public` directory and `.vue` files inside the `./src` directory.
+```javascript
+let config = {
+  content: ['./public/**/*.html', './src/**/*.vue'],
+  defaultExtractor: content =>
+    content.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || [],
+};
+```
+You can extend/override the default config in your PostCSS configuration.
+```javascript
+// postcss.config.js
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    'vue-cli-plugin-tailwind/purgecss': {
+      whitelist: ['foo', 'bar'],
+    },
+    autoprefixer: {},
+  },
+};
+```
+Check [https://www.purgecss.com/configuration#options](https://www.purgecss.com/configuration#options) for a list of available options.
 
+## License
 [MIT](https://github.com/forsartis/vue-cli-plugin-tailwind/blob/master/LICENSE)

generator/index.js

@@ -28,12 +28,21 @@ function readPostcssConfig(generator) {
   return {};
 }
 
+function generateConfig(option) {
+  const args = ['init'];
+  if (option === 'full') {
+    args.push('--full');
+  }
+  const { spawnSync } = require('child_process');
+  spawnSync('./node_modules/.bin/tailwind', args);
+}
+
 module.exports = (api, options) => {
   const postcss = readPostcssConfig(api.generator);
   const configs = {
     postcss: {
       plugins: {
-        tailwindcss: './tailwind.config.js',
+        tailwindcss: {},
         'vue-cli-plugin-tailwind/purgecss': {},
       },
     },
@@ -46,8 +55,20 @@ module.exports = (api, options) => {
   api.injectImports(api.entryFile, `import './assets/tailwind.css'`);
   api.render('./template');
 
-  api.onCreateComplete(() => {
-    const { spawnSync } = require('child_process');
-    spawnSync('./node_modules/.bin/tailwind', ['init', 'tailwind.config.js']);
-  });
+  if (options.replaceConfig) {
+    const filename = 'tailwind.config.js';
+    delete api.generator.files[filename];
+    const configPath = path.join(api.generator.context, filename);
+    try {
+      fs.unlinkSync(configPath);
+    } catch (error) {
+      throw new Error(error);
+    }
+  }
+
+  if (options.initConfig && options.replaceConfig !== false) {
+    api.onCreateComplete(() => {
+      generateConfig(options.initConfig);
+    });
+  }
 };

generator/template/src/assets/tailwind.css

@@ -1,62 +1,5 @@
-/**
- * This injects Tailwind's base styles, which is a combination of
- * Normalize.css and some additional base styles.
- *
- * You can see the styles here:
- * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
- *
- * If using `postcss-import`, use this import instead:
- *
- * @import "tailwindcss/preflight";
- */
-@tailwind preflight;
+@tailwind base;
 
-/**
- * This injects any component classes registered by plugins.
- *
- * If using `postcss-import`, use this import instead:
- *
- * @import "tailwindcss/components";
- */
 @tailwind components;
 
-/**
- * Here you would add any of your custom component classes; stuff that you'd
- * want loaded *before* the utilities so that the utilities could still
- * override them.
- *
- * Example:
- *
- * .btn { ... }
- * .form-input { ... }
- *
- * Or if using a preprocessor or `postcss-import`:
- *
- * @import "components/buttons";
- * @import "components/forms";
- */
-
-/**
- * This injects all of Tailwind's utility classes, generated based on your
- * config file.
- *
- * If using `postcss-import`, use this import instead:
- *
- * @import "tailwindcss/utilities";
- */
 @tailwind utilities;
-
-/**
- * Here you would add any custom utilities you need that don't come out of the
- * box with Tailwind.
- *
- * Example :
- *
- * .bg-pattern-graph-paper { ... }
- * .skew-45 { ... }
- *
- * Or if using a preprocessor or `postcss-import`:
- *
- * @import "utilities/background-patterns";
- * @import "utilities/skew-transforms";
- */

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-cli-plugin-tailwind",
-  "version": "0.4.3",
+  "version": "1.0.0",
   "description": "vue-cli plugin for Tailwind CSS",
   "author": "Jens Eggerstedt <j.eggerstedt@kaibatech.de>",
   "license": "MIT",
@@ -18,10 +18,7 @@
     "purgecss"
   ],
   "dependencies": {
-    "@fullhuman/postcss-purgecss": "^1.1.0",
-    "tailwindcss": "^0.7.4"
-  },
-  "peerDependencies": {
-    "@vue/cli-shared-utils": "^3.0.0"
+    "@fullhuman/postcss-purgecss": "^1.2.0",
+    "tailwindcss": "^1.0.0"
   }
 }

prompts.js

@@ -0,0 +1,24 @@
+const fs = require('fs');
+
+module.exports = [
+  {
+    type: 'list',
+    name: 'initConfig',
+    message: 'Generate tailwind.config.js',
+    choices: [
+      { name: 'none', value: false },
+      { name: 'minimal', value: 'minimal' },
+      { name: 'full', value: 'full' },
+    ],
+    default: 1,
+  },
+  {
+    name: 'replaceConfig',
+    type: 'confirm',
+    message: 'tailwind.config.js already exists! Do you want to replace it?',
+    default: false,
+    when: answers => {
+      return answers.initConfig && fs.existsSync('./tailwind.config.js');
+    },
+  },
+];

purgecss/index.js

@@ -1,24 +1,13 @@
-const isHotReloaded = process.argv.includes('serve');
 const postcss = require('postcss');
 
-class TailwindExtractor {
-  static extract(content) {
-    return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
-  }
-}
-
 let config = {
-  content: ['./public/index.html', './src/**/*.vue'],
-  extractors: [
-    {
-      extractor: TailwindExtractor,
-      extensions: ['html', 'vue'],
-    },
-  ],
+  content: ['./public/**/*.html', './src/**/*.vue'],
+  defaultExtractor: content =>
+    content.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || [],
 };
 
 module.exports = postcss.plugin('tailwind-purgecss', function(opts) {
-  if (isHotReloaded) return () => {};
+  if (process.env.NODE_ENV !== 'production') return () => {};
   const purgecss = require('@fullhuman/postcss-purgecss');
   return purgecss(Object.assign(config, opts));
 });