From 5acfa18d92ebdc46b3a378aed4dc4baa0463d730 Mon Sep 17 00:00:00 2001 From: Nestor Vera Date: Mon, 22 Jan 2018 20:39:34 +0100 Subject: [PATCH 1/5] Add bg-auto to the backgroundSize generator --- src/generators/backgroundSize.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/generators/backgroundSize.js b/src/generators/backgroundSize.js index 5e22666e7..998c6b12e 100644 --- a/src/generators/backgroundSize.js +++ b/src/generators/backgroundSize.js @@ -2,6 +2,9 @@ import defineClasses from '../util/defineClasses' export default function() { return defineClasses({ + 'bg-auto': { + 'background-size': 'auto', + }, 'bg-cover': { 'background-size': 'cover', }, From 4519c1f8245281ac196de5620f1a2ff6dbc3d17d Mon Sep 17 00:00:00 2001 From: Nestor Vera Date: Mon, 22 Jan 2018 20:39:44 +0100 Subject: [PATCH 2/5] Add bg-auto to the backgroundSize docs --- docs/source/docs/background-size.blade.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/source/docs/background-size.blade.md b/docs/source/docs/background-size.blade.md index 3f81cf40a..500141873 100644 --- a/docs/source/docs/background-size.blade.md +++ b/docs/source/docs/background-size.blade.md @@ -13,6 +13,11 @@ features: @include('_partials.class-table', [ 'rows' => [ + [ + '.bg-auto', + 'background-size: auto;', + "Don't scale the image and show at its real size.", + ], [ '.bg-cover', 'background-size: cover;', From 8f660288596d46204e788cf3650a8bb42262f64d Mon Sep 17 00:00:00 2001 From: Nestor Vera Date: Mon, 22 Jan 2018 20:53:05 +0100 Subject: [PATCH 3/5] Update tests for bg-auto --- __tests__/fixtures/tailwind-output.css | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 23f3cde52..0d3dac35d 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -1265,6 +1265,10 @@ button, background-repeat: repeat-y; } +.bg-auto { + background-size: auto; +} + .bg-cover { background-size: cover; } @@ -5148,6 +5152,10 @@ button, background-repeat: repeat-y; } + .sm\:bg-auto { + background-size: auto; + } + .sm\:bg-cover { background-size: cover; } @@ -9024,6 +9032,10 @@ button, background-repeat: repeat-y; } + .md\:bg-auto { + background-size: auto; + } + .md\:bg-cover { background-size: cover; } @@ -12900,6 +12912,10 @@ button, background-repeat: repeat-y; } + .lg\:bg-auto { + background-size: auto; + } + .lg\:bg-cover { background-size: cover; } @@ -16776,6 +16792,10 @@ button, background-repeat: repeat-y; } + .xl\:bg-auto { + background-size: auto; + } + .xl\:bg-cover { background-size: cover; } From 829576693af255f01a1255e1773de4ff043a5957 Mon Sep 17 00:00:00 2001 From: Nestor Vera Date: Mon, 22 Jan 2018 21:17:30 +0100 Subject: [PATCH 4/5] Allow users to set their own backgroundSize --- defaultConfig.stub.js | 22 ++++++++++++++++++++++ src/generators/backgroundSize.js | 19 +++++++------------ 2 files changed, 29 insertions(+), 12 deletions(-) diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index d2e5ab7f8..532375bb6 100644 --- a/defaultConfig.stub.js +++ b/defaultConfig.stub.js @@ -360,6 +360,28 @@ module.exports = { backgroundColors: colors, + /* + |----------------------------------------------------------------------------- + | Background sizes https://tailwindcss.com/docs/background-color + |----------------------------------------------------------------------------- + | + | Here is where you define your background sizes. These can take one or two + | values depending on your needs. The first value will set the image's width + | while the second will set its height. Using just one will be the same as + | setting the image's height to auto. For multiple backgrounds, use comma + | separated values to define the size of each one of them. + | + | Class name: .bg-{size} + | + */ + + backgroundSize: { + 'auto': 'auto', + 'cover': 'cover', + 'contain': 'contain', + }, + + /* |----------------------------------------------------------------------------- | Border widths https://tailwindcss.com/docs/border-width diff --git a/src/generators/backgroundSize.js b/src/generators/backgroundSize.js index 998c6b12e..44f379d9c 100644 --- a/src/generators/backgroundSize.js +++ b/src/generators/backgroundSize.js @@ -1,15 +1,10 @@ -import defineClasses from '../util/defineClasses' +import _ from 'lodash' +import defineClass from '../util/defineClass' -export default function() { - return defineClasses({ - 'bg-auto': { - 'background-size': 'auto', - }, - 'bg-cover': { - 'background-size': 'cover', - }, - 'bg-contain': { - 'background-size': 'contain', - }, +export default function({ backgroundSizes }) { + return _.map(backgroundSizes, (size, className) => { + return defineClass(`bg-${className}`, { + 'background-size': size, + }) }) } From 3f9fc5a989cfb406c9a53a2c6df8ecb97d062131 Mon Sep 17 00:00:00 2001 From: Nestor Vera Date: Mon, 22 Jan 2018 21:19:09 +0100 Subject: [PATCH 5/5] Rename backgroundSize to backgroundSizes --- defaultConfig.stub.js | 4 ++-- docs/source/docs/background-size.blade.md | 2 +- src/generators/{backgroundSize.js => backgroundSizes.js} | 0 src/utilityModules.js | 4 ++-- 4 files changed, 5 insertions(+), 5 deletions(-) rename src/generators/{backgroundSize.js => backgroundSizes.js} (100%) diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index 532375bb6..416a95296 100644 --- a/defaultConfig.stub.js +++ b/defaultConfig.stub.js @@ -375,7 +375,7 @@ module.exports = { | */ - backgroundSize: { + backgroundSizes: { 'auto': 'auto', 'cover': 'cover', 'contain': 'contain', @@ -838,7 +838,7 @@ module.exports = { backgroundColors: ['responsive', 'hover'], backgroundPosition: ['responsive'], backgroundRepeat: ['responsive'], - backgroundSize: ['responsive'], + backgroundSizes: ['responsive'], borderColors: ['responsive', 'hover'], borderRadius: ['responsive'], borderStyle: ['responsive'], diff --git a/docs/source/docs/background-size.blade.md b/docs/source/docs/background-size.blade.md index 500141873..51a6a6e5f 100644 --- a/docs/source/docs/background-size.blade.md +++ b/docs/source/docs/background-size.blade.md @@ -36,7 +36,7 @@ features: @include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'background size', - 'property' => 'backgroundSize', + 'property' => 'backgroundSizes', ], 'variants' => [ 'responsive', diff --git a/src/generators/backgroundSize.js b/src/generators/backgroundSizes.js similarity index 100% rename from src/generators/backgroundSize.js rename to src/generators/backgroundSizes.js diff --git a/src/utilityModules.js b/src/utilityModules.js index d22b9a6c4..a90d87ef6 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -4,7 +4,7 @@ import backgroundAttachment from './generators/backgroundAttachment' import backgroundColors from './generators/backgroundColors' import backgroundPosition from './generators/backgroundPosition' import backgroundRepeat from './generators/backgroundRepeat' -import backgroundSize from './generators/backgroundSize' +import backgroundSizes from './generators/backgroundSizes' import borderColors from './generators/borderColors' import borderRadius from './generators/borderRadius' import borderStyle from './generators/borderStyle' @@ -51,7 +51,7 @@ export default [ { name: 'backgroundColors', generator: backgroundColors }, { name: 'backgroundPosition', generator: backgroundPosition }, { name: 'backgroundRepeat', generator: backgroundRepeat }, - { name: 'backgroundSize', generator: backgroundSize }, + { name: 'backgroundSizes', generator: backgroundSizes }, { name: 'borderColors', generator: borderColors }, { name: 'borderRadius', generator: borderRadius }, { name: 'borderStyle', generator: borderStyle },