Merge master, fix conflicts

Author: adamwathan

__tests__/applyClassPrefix.test.js

@@ -0,0 +1,18 @@
+import postcss from 'postcss'
+import applyClassPrefix from '../src/util/applyClassPrefix'
+
+test('it prefixes classes with the provided prefix', () => {
+  const input = postcss.parse(`
+    .foo { color: red; }
+    .apple, .pear { color: green; }
+  `)
+
+  const expected = `
+    .tw-foo { color: red; }
+    .tw-apple, .tw-pear { color: green; }
+  `
+
+  const result = applyClassPrefix(input, 'tw-').toResult()
+  expect(result.css).toEqual(expected)
+  expect(result.warnings().length).toBe(0)
+})

docs/package.json

@@ -1,11 +1,10 @@
 {
   "scripts": {
-    "local": "cross-env NODE_ENV=development webpack --progress --hide-modules --env=local --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "staging": "cross-env NODE_ENV=development webpack --progress --hide-modules --env=staging --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "production": "cross-env NODE_ENV=development webpack --progress --hide-modules --env=production --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "dev": "npm run local",
+    "development": "cross-env NODE_ENV=development webpack --progress --hide-modules --env=local --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "production": "cross-env NODE_ENV=production webpack --progress --hide-modules --env=production --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "dev": "npm run development",
     "prod": "npm run production",
-    "watch": "npm run local -- --watch"
+    "watch": "npm run development -- --watch"
   },
   "private": true,
   "devDependencies": {

docs/source/_layouts/documentation.blade.php

@@ -115,3 +115,17 @@
   </defs>
 </svg>
 @endsection
+
+@push('scripts')
+@if ($page->production)
+  <!-- Algolia DocSearch  -->
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
+  <script type="text/javascript">
+    docsearch({
+      apiKey: '3df93446658cd9c4e314d4c02a052188',
+      indexName: 'tailwindcss',
+      inputSelector: '#docsearch',
+    });
+  </script>
+@endif
+@endpush

docs/source/_layouts/master.blade.php

@@ -25,16 +25,6 @@
 @yield('body')
 
 @if ($page->production)
-  <!-- Algolia DocSearch  -->
-  <script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
-  <script type="text/javascript">
-    docsearch({
-      apiKey: '3df93446658cd9c4e314d4c02a052188',
-      indexName: 'tailwindcss',
-      inputSelector: '#docsearch',
-    });
-  </script>
-
   <!-- Google Analytics  -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-109068504-1"></script>
   <script>
@@ -46,5 +36,7 @@ function gtag(){dataLayer.push(arguments);}
   </script>
 @endif
 
+@stack('scripts')
+
 </body>
 </html>

docs/source/docs/functions-and-directives.blade.md

@@ -8,7 +8,7 @@ Tailwind exposes a few custom CSS functions and directives that can be used in y
 
 ### `@@tailwind`
 
-Use the `@@tailwind` directive to insert Tailwind's `preflight`, `utilities` and `screen` styles into your CSS. Here's a full example of how you might do this:
+Use the `@@tailwind` directive to insert Tailwind's `preflight`, `utilities` and `screens` styles into your CSS. Here's a full example of how you might do this:
 
 ```less
 /**
@@ -27,9 +27,11 @@ Use the `@@tailwind` directive to insert Tailwind's `preflight`, `utilities` and
 @@tailwind utilities;
 
 /**
- * (Optional)
- * This injects the utility classes and styles wrapped by the @@responsive directive.
- * These will be appended at the end of the stylesheet if the `@@tailwind screens` directive is not used.
+ * Use this directive to control where Tailwind injects the responsive
+ * variations of each utility.
+ * 
+ * If omitted, Tailwind will append these classes to the very end of 
+ * your stylesheet by default.
  */
  @@tailwind screens;
 ```

src/lib/generateUtilities.js

@@ -1,4 +1,6 @@
 import _ from 'lodash'
+import postcss from 'postcss'
+import applyClassPrefix from '../util/applyClassPrefix'
 import backgroundColors from '../generators/backgroundColors'
 import backgroundPositions from '../generators/backgroundPositions'
 import backgroundSize from '../generators/backgroundSize'
@@ -38,49 +40,60 @@ import zIndex from '../generators/zIndex'
 
 export default function(config) {
   return function(css) {
-    const options = config()
+    const unwrappedConfig = config()
 
     css.walkAtRules('tailwind', atRule => {
       if (atRule.params === 'utilities') {
-        const utilities = _.flatten([
-          lists(options),
-          forms(options),
-          textSizes(options),
-          textWeights(options),
-          textFonts(options),
-          textColors(options),
-          textLeading(options),
-          textTracking(options),
-          textAlign(options),
-          textWrap(options),
-          textStyle(options),
-          verticalAlign(options),
-          backgroundColors(options),
-          backgroundPositions(options),
-          backgroundSize(options),
-          borderWidths(options),
-          borderColors(options),
-          borderStyles(options),
-          rounded(options),
-          display(options),
-          position(options),
-          overflow(options),
-          sizing(options),
-          spacing(options),
-          shadows(options),
-          flex(options),
-          floats(options),
-          visibility(options),
-          zIndex(options),
-          opacity(options),
-          userSelect(options),
-          pointerEvents(options),
-          resize(options),
-          cursor(options),
-        ])
+        const utilities = postcss.root({
+          nodes: _.flatten([
+            lists(unwrappedConfig),
+            forms(unwrappedConfig),
+            textSizes(unwrappedConfig),
+            textWeights(unwrappedConfig),
+            textFonts(unwrappedConfig),
+            textColors(unwrappedConfig),
+            textLeading(unwrappedConfig),
+            textTracking(unwrappedConfig),
+            textAlign(unwrappedConfig),
+            textWrap(unwrappedConfig),
+            textStyle(unwrappedConfig),
+            verticalAlign(unwrappedConfig),
+            backgroundColors(unwrappedConfig),
+            backgroundPositions(unwrappedConfig),
+            backgroundSize(unwrappedConfig),
+            borderWidths(unwrappedConfig),
+            borderColors(unwrappedConfig),
+            borderStyles(unwrappedConfig),
+            rounded(unwrappedConfig),
+            display(unwrappedConfig),
+            position(unwrappedConfig),
+            overflow(unwrappedConfig),
+            sizing(unwrappedConfig),
+            spacing(unwrappedConfig),
+            shadows(unwrappedConfig),
+            flex(unwrappedConfig),
+            floats(unwrappedConfig),
+            visibility(unwrappedConfig),
+            zIndex(unwrappedConfig),
+            opacity(unwrappedConfig),
+            userSelect(unwrappedConfig),
+            pointerEvents(unwrappedConfig),
+            resize(unwrappedConfig),
+            cursor(unwrappedConfig),
+          ]),
+        })
 
-        atRule.before(container(options))
-        atRule.before(responsive(utilities))
+        if (_.get(unwrappedConfig, 'options.important', false)) {
+          utilities.walkDecls(decl => (decl.important = true))
+        }
+
+        const tailwindClasses = postcss.root({
+          nodes: [...container(unwrappedConfig), responsive(utilities)],
+        })
+
+        applyClassPrefix(tailwindClasses, _.get(unwrappedConfig, 'options.prefix', ''))
+
+        atRule.before(tailwindClasses)
         atRule.remove()
       }
     })

src/util/applyClassPrefix.js

@@ -0,0 +1,6 @@
+export default function(css, prefix) {
+  css.walkRules(rule => {
+    rule.selectors = rule.selectors.map(selector => `.${prefix}${selector.slice(1)}`)
+  })
+  return css
+}

src/util/responsive.js

@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import postcss from 'postcss'
 import cloneNodes from './cloneNodes'
 
@@ -6,5 +7,5 @@ export default function responsive(rules) {
     .atRule({
       name: 'responsive',
     })
-    .append(cloneNodes(rules))
+    .append(cloneNodes(_.isArray(rules) ? rules : rules.nodes))
 }