Merge pull request #22 from roots/tailwind-preset

Add Tailwind CSS preset

composer.json

@@ -7,7 +7,8 @@
     "theme",
     "foundation",
     "bootstrap",
-    "tachyons"
+    "tachyons",
+    "tailwindcss"
   ],
   "license": "MIT",
   "authors": [

src/Console/Commands/PresetCommand.php

@@ -10,6 +10,7 @@
 use Roots\Sage\Installer\Presets\None;
 use Roots\Sage\Installer\Presets\Preset;
 use Roots\Sage\Installer\Presets\Tachyons;
+use Roots\Sage\Installer\Presets\Tailwind;
 use Roots\Sage\Installer\Transformations\Presets;
 use Symfony\Component\Console\Input\InputInterface;
 use Symfony\Component\Console\Input\InputOption;
@@ -106,7 +107,8 @@ protected function defaultPresets()
             new Bootstrap($this->root),
             new Bulma($this->root),
             new Foundation($this->root),
-            new Tachyons($this->root)
+            new Tachyons($this->root),
+            new Tailwind($this->root),
         ];
     }
 }

src/Presets/Preset.php

@@ -117,8 +117,15 @@ protected function removePresetsFromPackagesArray(array $packages)
             $packages['dependencies']['popper.js'],
             $packages['dependencies']['bulma'],
             $packages['dependencies']['tachyons-sass'],
-            $packages['dependencies']['foundation-sites']
+            $packages['dependencies']['foundation-sites'],
+            $packages['devDependencies']['tailwindcss']
         );
+
+        /** Remove preset specific at-rules */
+        $ignoreAtRules =& $packages['stylelint']['rules']['at-rule-no-unknown'][1]['ignoreAtRules'];
+        $presetAtRules = ['tailwind', 'apply', 'responsive', 'variants', 'screen'];
+        $ignoreAtRules = array_values(array_diff($ignoreAtRules, $presetAtRules));
+
         return $packages;
     }
 
@@ -142,7 +149,7 @@ protected function makeDirectories()
     /**
      * Remove presets
      *
-     * Removes previously loaded presets from the autoload folder
+     * Removes previously loaded presets from the autoload, build, and styles folder
      *
      * @return void
      */
@@ -155,6 +162,8 @@ protected function removePresets()
         $files->delete("{$this->sageRoot}/resources/assets/styles/autoload/_foundation.scss");
         $files->delete("{$this->sageRoot}/resources/assets/scripts/autoload/_bootstrap.js");
         $files->delete("{$this->sageRoot}/resources/assets/scripts/autoload/_foundation.js");
+        $files->delete("{$this->sageRoot}/resources/assets/build/webpack.config.preset.js");
+        $files->delete("{$this->sageRoot}/resources/assets/styles/tailwind.config.js");
     }
 
     /**

src/Presets/Tailwind.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace Roots\Sage\Installer\Presets;
+
+class Tailwind extends Preset
+{
+    /** {@inheritdoc} */
+    protected function updatePackagesArray(array $packages)
+    {
+        $packages['devDependencies']['tailwindcss'] = '^0.6.4';
+
+        /** Add Tailwind specific at-rules */
+        $ignoreAtRules =& $packages['stylelint']['rules']['at-rule-no-unknown'][1]['ignoreAtRules'];
+        $tailwindAtRules = ['tailwind', 'apply', 'responsive', 'variants', 'screen'];
+
+        foreach ($tailwindAtRules as $rule) {
+            if (!in_array($rule, $ignoreAtRules)) {
+                $ignoreAtRules[] = $rule;
+            }
+        }
+
+        return $packages;
+    }
+}

src/Presets/stubs/Tailwind/build/webpack.config.preset.js

@@ -0,0 +1,56 @@
+'use strict'; // eslint-disable-line
+
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+const config = require('./config');
+
+/** Default PostCSS plugins */
+let postcssPlugins = [
+  require('tailwindcss')(`${config.paths.assets}/styles/tailwind.config.js`),
+  require('autoprefixer')(),
+];
+
+/** Add cssnano when optimizing */
+config.enabled.optimize
+  ? postcssPlugins.push(
+      require('cssnano')({
+        preset: ['default', { discardComments: { removeAll: true } }],
+      }),
+    )
+  : false;
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.scss$/,
+        include: config.paths.assets,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style',
+          use: [
+            { loader: 'cache' },
+            { loader: 'css', options: { sourceMap: false } },
+            {
+              loader: 'postcss',
+              options: {
+                parser: config.enabled.optimize
+                  ? 'postcss-safe-parser'
+                  : undefined,
+                plugins: postcssPlugins,
+                sourceMap: false,
+              },
+            },
+            {
+              loader: 'resolve-url',
+              options: { silent: true, sourceMap: false },
+            },
+            {
+              loader: 'sass',
+              options: { sourceComments: true, sourceMap: false },
+            },
+          ],
+        }),
+      },
+    ],
+  },
+};

src/Presets/stubs/Tailwind/styles/common/_global.scss

@@ -0,0 +1,22 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @apply mb-2 leading-tight;
+}
+
+p {
+  @apply mb-3 leading-normal;
+}
+
+a {
+  @apply text-primary no-underline border-b border-transparent;
+
+  transition: 0.2s ease;
+
+  &:hover {
+    @apply border-primary;
+  }
+}

src/Presets/stubs/Tailwind/styles/components/_buttons.scss

@@ -0,0 +1,5 @@
+.btn {
+  @apply bg-primary rounded my-3 px-4 py-3 text-white leading-none;
+
+  transition: 0.2s ease;
+}

src/Presets/stubs/Tailwind/styles/components/_comments.scss

@@ -0,0 +1,30 @@
+.comment-list {
+  @apply list-reset;
+}
+
+.comment-list ol {
+  list-style: none;
+}
+
+.comment-form p {
+  @apply mb-4;
+}
+
+.comment-form input[type="text"],
+.comment-form input[type="email"],
+.comment-form input[type="url"],
+.comment-form textarea {
+  @apply block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-grey-darker border border-grey rounded;
+
+  &:focus {
+    @apply shadow-outline;
+  }
+}
+
+.comment-form input[type="submit"] {
+  @apply btn bg-grey-dark;
+
+  &:hover {
+    @apply bg-grey-darker;
+  }
+}

src/Presets/stubs/Tailwind/styles/components/_forms.scss

@@ -0,0 +1,22 @@
+/** Search form */
+.search-form {
+  @apply flex items-center;
+}
+
+.search-form label {
+  @apply mb-4;
+
+  font-weight: normal;
+}
+
+.search-form .search-field {
+  @apply block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-grey-darker border border-grey rounded;
+}
+
+.search-form .search-submit {
+  @apply inline-block align-middle text-center select-none border font-normal whitespace-no-wrap py-2 px-4 rounded text-base leading-normal no-underline text-grey-lightest bg-grey;
+
+  &:hover {
+    @apply bg-grey-light;
+  }
+}

src/Presets/stubs/Tailwind/styles/components/_wp-classes.scss

@@ -0,0 +1,79 @@
+/**
+ * WordPress Generated Classes
+ * @see http://codex.wordpress.org/CSS#WordPress_Generated_Classes
+ */
+
+/** Media alignment */
+.alignnone {
+  margin-left: 0;
+  margin-right: 0;
+  max-width: 100%;
+  height: auto;
+}
+
+.aligncenter {
+  @apply my-2 mx-auto;
+
+  display: block;
+  height: auto;
+}
+
+.alignleft,
+.alignright {
+  @apply mb-4;
+
+  height: auto;
+}
+
+@screen sm {
+  .alignleft {
+    @apply mr-4;
+
+    float: left;
+  }
+
+  .alignright {
+    @apply ml-4;
+
+    float: right;
+  }
+}
+
+/** Captions */
+.wp-caption {
+  @apply inline-block mb-4;
+}
+
+.wp-caption img {
+  @apply mb-2 leading-none max-w-full h-auto;
+}
+
+.wp-caption-text {
+  font-size: 90%;
+  color: #6c757d;
+}
+
+/** Text meant only for screen readers */
+.sr-only,
+.screen-reader-text {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.sr-only-focusable:active,
+.screen-reader-text:active,
+.sr-only-focusable:focus,
+.screen-reader-text:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}

src/Presets/stubs/Tailwind/styles/layouts/_header.scss

@@ -0,0 +1,11 @@
+.banner .nav {
+  @apply list-reset flex flex-wrap;
+}
+
+.banner .nav a {
+  @apply inline-block px-4 py-2 border-none;
+
+  &:hover {
+    color: darken(#525ddc, 30%);
+  }
+}

src/Presets/stubs/Tailwind/styles/main.scss

@@ -0,0 +1,73 @@
+/**
+ * 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;
+
+/** Import variables */
+@import "common/variables";
+
+/** Import everything from autoload */
+@import "./autoload/**/*";
+
+/**
+ * Import npm dependencies
+ *
+ * Prefix your imports with `~` to grab from node_modules/
+ * @see https://github.com/webpack-contrib/sass-loader#imports
+ */
+// @import "~some-node-module";
+
+/**
+ * This injects any component classes registered by Tailwind plugins.
+ *
+ * If using `postcss-import`, use this import instead:
+ *
+ * @import "tailwindcss/components";
+ */
+@tailwind components;
+
+/** Import theme styles */
+@import "common/global";
+@import "components/buttons";
+@import "components/comments";
+@import "components/forms";
+@import "components/wp-classes";
+@import "layouts/header";
+@import "layouts/sidebar";
+@import "layouts/footer";
+@import "layouts/pages";
+@import "layouts/posts";
+@import "layouts/tinymce";
+
+/**
+ * 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";
+ */