[0.3] Add background attachment utilities (tailwindlabs#243)

* Create backgroundAttachment.js generator

* Updated background-attachment utility

* Integrate background attachment utilities

* Add basic background attachment documentation

Author: adamwathan

__tests__/fixtures/tailwind-output.css

@@ -615,6 +615,18 @@ button,
   appearance: none;
 }
 
+.bg-fixed {
+  background-attachment: fixed;
+}
+
+.bg-local {
+  background-attachment: local;
+}
+
+.bg-scroll {
+  background-attachment: scroll;
+}
+
 .bg-transparent {
   background-color: transparent;
 }
@@ -4458,6 +4470,18 @@ button,
     appearance: none;
   }
 
+  .sm\:bg-fixed {
+    background-attachment: fixed;
+  }
+
+  .sm\:bg-local {
+    background-attachment: local;
+  }
+
+  .sm\:bg-scroll {
+    background-attachment: scroll;
+  }
+
   .sm\:bg-transparent {
     background-color: transparent;
   }
@@ -8302,6 +8326,18 @@ button,
     appearance: none;
   }
 
+  .md\:bg-fixed {
+    background-attachment: fixed;
+  }
+
+  .md\:bg-local {
+    background-attachment: local;
+  }
+
+  .md\:bg-scroll {
+    background-attachment: scroll;
+  }
+
   .md\:bg-transparent {
     background-color: transparent;
   }
@@ -12146,6 +12182,18 @@ button,
     appearance: none;
   }
 
+  .lg\:bg-fixed {
+    background-attachment: fixed;
+  }
+
+  .lg\:bg-local {
+    background-attachment: local;
+  }
+
+  .lg\:bg-scroll {
+    background-attachment: scroll;
+  }
+
   .lg\:bg-transparent {
     background-color: transparent;
   }
@@ -15990,6 +16038,18 @@ button,
     appearance: none;
   }
 
+  .xl\:bg-fixed {
+    background-attachment: fixed;
+  }
+
+  .xl\:bg-local {
+    background-attachment: local;
+  }
+
+  .xl\:bg-scroll {
+    background-attachment: scroll;
+  }
+
   .xl\:bg-transparent {
     background-color: transparent;
   }

defaultConfig.stub.js

@@ -773,6 +773,7 @@ module.exports = {
 
   modules: {
     appearance: ['responsive'],
+    backgroundAttachment: ['responsive'],
     backgroundColors: ['responsive', 'hover'],
     backgroundPosition: ['responsive'],
     backgroundSize: ['responsive'],

docs/navigation.php

@@ -18,6 +18,7 @@
             'Color' => 'background-color',
             'Position' => 'background-position',
             'Size' => 'background-size',
+            'Attachment' => 'background-attachment',
         ],
         'Borders' => [
             'Width' => 'border-width',

docs/source/docs/background-attachment.blade.md

@@ -0,0 +1,32 @@
+---
+extends: _layouts.documentation
+title: "Background Attachment"
+description: "Utilities for controlling how a background image behaves when scrolling."
+features:
+  responsive: true
+  customizable: false
+  hover: false
+  focus: false
+---
+
+@include('_partials.work-in-progress')
+
+@include('_partials.class-table', [
+  'rows' => [
+    [
+      '.bg-fixed',
+      'background-attachment: fixed;',
+      'Fix the background image relative to the viewport.',
+    ],
+    [
+      '.bg-local',
+      'background-attachment: local;',
+      'Scroll the background image with the container and the viewport.',
+    ],
+    [
+      '.bg-scroll',
+      'background-attachment: scroll;',
+      'Scroll the background image with the viewport but not with the container.',
+    ],
+  ]
+])

src/generators/backgroundAttachment.js

@@ -0,0 +1,9 @@
+import defineClasses from '../util/defineClasses'
+
+export default function() {
+  return defineClasses({
+    'bg-fixed': { 'background-attachment': 'fixed' },
+    'bg-local': { 'background-attachment': 'local' },
+    'bg-scroll': { 'background-attachment': 'scroll' },
+  })
+}

src/utilityModules.js

@@ -1,5 +1,6 @@
 import lists from './generators/lists'
 import appearance from './generators/appearance'
+import backgroundAttachment from './generators/backgroundAttachment'
 import backgroundColors from './generators/backgroundColors'
 import backgroundPosition from './generators/backgroundPosition'
 import backgroundSize from './generators/backgroundSize'
@@ -43,6 +44,7 @@ import zIndex from './generators/zIndex'
 export default [
   { name: 'lists', generator: lists },
   { name: 'appearance', generator: appearance },
+  { name: 'backgroundAttachment', generator: backgroundAttachment },
   { name: 'backgroundColors', generator: backgroundColors },
   { name: 'backgroundPosition', generator: backgroundPosition },
   { name: 'backgroundSize', generator: backgroundSize },