diff --git a/CHANGELOG.md b/CHANGELOG.md index 5a6c2ec82e89..6fa3a3f5358e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add additional small `rotate` and `skew` values ([#2528](https://github.com/tailwindlabs/tailwindcss/pull/2528)) - Add `xl`, `2xl`, and `3xl` border radius values ([#2529](https://github.com/tailwindlabs/tailwindcss/pull/2529)) - Support disabling dark mode variants globally ([#2530](https://github.com/tailwindlabs/tailwindcss/pull/2530)) +- Add new utilities for `grid-auto-columns` and `grid-auto-rows` ([#2531](https://github.com/tailwindlabs/tailwindcss/pull/2531)) ## [1.8.12] - 2020-10-07 diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css index d6e3cdde053b..e4c58a88bb9d 100644 --- a/__tests__/fixtures/tailwind-output-flagged.css +++ b/__tests__/fixtures/tailwind-output-flagged.css @@ -40116,6 +40116,22 @@ video { grid-template-columns: none; } +.auto-cols-auto { + grid-auto-columns: auto; +} + +.auto-cols-min { + grid-auto-columns: min-content; +} + +.auto-cols-max { + grid-auto-columns: max-content; +} + +.auto-cols-fr { + grid-auto-columns: minmax(0, 1fr); +} + .col-auto { grid-column: auto; } @@ -40312,6 +40328,22 @@ video { grid-template-rows: none; } +.auto-rows-auto { + grid-auto-rows: auto; +} + +.auto-rows-min { + grid-auto-rows: min-content; +} + +.auto-rows-max { + grid-auto-rows: max-content; +} + +.auto-rows-fr { + grid-auto-rows: minmax(0, 1fr); +} + .row-auto { grid-row: auto; } @@ -84069,6 +84101,22 @@ video { grid-template-columns: none; } + .sm\:auto-cols-auto { + grid-auto-columns: auto; + } + + .sm\:auto-cols-min { + grid-auto-columns: min-content; + } + + .sm\:auto-cols-max { + grid-auto-columns: max-content; + } + + .sm\:auto-cols-fr { + grid-auto-columns: minmax(0, 1fr); + } + .sm\:col-auto { grid-column: auto; } @@ -84265,6 +84313,22 @@ video { grid-template-rows: none; } + .sm\:auto-rows-auto { + grid-auto-rows: auto; + } + + .sm\:auto-rows-min { + grid-auto-rows: min-content; + } + + .sm\:auto-rows-max { + grid-auto-rows: max-content; + } + + .sm\:auto-rows-fr { + grid-auto-rows: minmax(0, 1fr); + } + .sm\:row-auto { grid-row: auto; } @@ -127992,6 +128056,22 @@ video { grid-template-columns: none; } + .md\:auto-cols-auto { + grid-auto-columns: auto; + } + + .md\:auto-cols-min { + grid-auto-columns: min-content; + } + + .md\:auto-cols-max { + grid-auto-columns: max-content; + } + + .md\:auto-cols-fr { + grid-auto-columns: minmax(0, 1fr); + } + .md\:col-auto { grid-column: auto; } @@ -128188,6 +128268,22 @@ video { grid-template-rows: none; } + .md\:auto-rows-auto { + grid-auto-rows: auto; + } + + .md\:auto-rows-min { + grid-auto-rows: min-content; + } + + .md\:auto-rows-max { + grid-auto-rows: max-content; + } + + .md\:auto-rows-fr { + grid-auto-rows: minmax(0, 1fr); + } + .md\:row-auto { grid-row: auto; } @@ -171915,6 +172011,22 @@ video { grid-template-columns: none; } + .lg\:auto-cols-auto { + grid-auto-columns: auto; + } + + .lg\:auto-cols-min { + grid-auto-columns: min-content; + } + + .lg\:auto-cols-max { + grid-auto-columns: max-content; + } + + .lg\:auto-cols-fr { + grid-auto-columns: minmax(0, 1fr); + } + .lg\:col-auto { grid-column: auto; } @@ -172111,6 +172223,22 @@ video { grid-template-rows: none; } + .lg\:auto-rows-auto { + grid-auto-rows: auto; + } + + .lg\:auto-rows-min { + grid-auto-rows: min-content; + } + + .lg\:auto-rows-max { + grid-auto-rows: max-content; + } + + .lg\:auto-rows-fr { + grid-auto-rows: minmax(0, 1fr); + } + .lg\:row-auto { grid-row: auto; } @@ -215838,6 +215966,22 @@ video { grid-template-columns: none; } + .xl\:auto-cols-auto { + grid-auto-columns: auto; + } + + .xl\:auto-cols-min { + grid-auto-columns: min-content; + } + + .xl\:auto-cols-max { + grid-auto-columns: max-content; + } + + .xl\:auto-cols-fr { + grid-auto-columns: minmax(0, 1fr); + } + .xl\:col-auto { grid-column: auto; } @@ -216034,6 +216178,22 @@ video { grid-template-rows: none; } + .xl\:auto-rows-auto { + grid-auto-rows: auto; + } + + .xl\:auto-rows-min { + grid-auto-rows: min-content; + } + + .xl\:auto-rows-max { + grid-auto-rows: max-content; + } + + .xl\:auto-rows-fr { + grid-auto-rows: minmax(0, 1fr); + } + .xl\:row-auto { grid-row: auto; } @@ -259761,6 +259921,22 @@ video { grid-template-columns: none; } + .\32xl\:auto-cols-auto { + grid-auto-columns: auto; + } + + .\32xl\:auto-cols-min { + grid-auto-columns: min-content; + } + + .\32xl\:auto-cols-max { + grid-auto-columns: max-content; + } + + .\32xl\:auto-cols-fr { + grid-auto-columns: minmax(0, 1fr); + } + .\32xl\:col-auto { grid-column: auto; } @@ -259957,6 +260133,22 @@ video { grid-template-rows: none; } + .\32xl\:auto-rows-auto { + grid-auto-rows: auto; + } + + .\32xl\:auto-rows-min { + grid-auto-rows: min-content; + } + + .\32xl\:auto-rows-max { + grid-auto-rows: max-content; + } + + .\32xl\:auto-rows-fr { + grid-auto-rows: minmax(0, 1fr); + } + .\32xl\:row-auto { grid-row: auto; } diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 64ada894a4eb..519e6c3176ea 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -16816,6 +16816,22 @@ video { grid-template-columns: none !important; } +.auto-cols-auto { + grid-auto-columns: auto !important; +} + +.auto-cols-min { + grid-auto-columns: min-content !important; +} + +.auto-cols-max { + grid-auto-columns: max-content !important; +} + +.auto-cols-fr { + grid-auto-columns: minmax(0, 1fr) !important; +} + .col-auto { grid-column: auto !important; } @@ -17012,6 +17028,22 @@ video { grid-template-rows: none !important; } +.auto-rows-auto { + grid-auto-rows: auto !important; +} + +.auto-rows-min { + grid-auto-rows: min-content !important; +} + +.auto-rows-max { + grid-auto-rows: max-content !important; +} + +.auto-rows-fr { + grid-auto-rows: minmax(0, 1fr) !important; +} + .row-auto { grid-row: auto !important; } @@ -35405,6 +35437,22 @@ video { grid-template-columns: none !important; } + .sm\:auto-cols-auto { + grid-auto-columns: auto !important; + } + + .sm\:auto-cols-min { + grid-auto-columns: min-content !important; + } + + .sm\:auto-cols-max { + grid-auto-columns: max-content !important; + } + + .sm\:auto-cols-fr { + grid-auto-columns: minmax(0, 1fr) !important; + } + .sm\:col-auto { grid-column: auto !important; } @@ -35601,6 +35649,22 @@ video { grid-template-rows: none !important; } + .sm\:auto-rows-auto { + grid-auto-rows: auto !important; + } + + .sm\:auto-rows-min { + grid-auto-rows: min-content !important; + } + + .sm\:auto-rows-max { + grid-auto-rows: max-content !important; + } + + .sm\:auto-rows-fr { + grid-auto-rows: minmax(0, 1fr) !important; + } + .sm\:row-auto { grid-row: auto !important; } @@ -53964,6 +54028,22 @@ video { grid-template-columns: none !important; } + .md\:auto-cols-auto { + grid-auto-columns: auto !important; + } + + .md\:auto-cols-min { + grid-auto-columns: min-content !important; + } + + .md\:auto-cols-max { + grid-auto-columns: max-content !important; + } + + .md\:auto-cols-fr { + grid-auto-columns: minmax(0, 1fr) !important; + } + .md\:col-auto { grid-column: auto !important; } @@ -54160,6 +54240,22 @@ video { grid-template-rows: none !important; } + .md\:auto-rows-auto { + grid-auto-rows: auto !important; + } + + .md\:auto-rows-min { + grid-auto-rows: min-content !important; + } + + .md\:auto-rows-max { + grid-auto-rows: max-content !important; + } + + .md\:auto-rows-fr { + grid-auto-rows: minmax(0, 1fr) !important; + } + .md\:row-auto { grid-row: auto !important; } @@ -72523,6 +72619,22 @@ video { grid-template-columns: none !important; } + .lg\:auto-cols-auto { + grid-auto-columns: auto !important; + } + + .lg\:auto-cols-min { + grid-auto-columns: min-content !important; + } + + .lg\:auto-cols-max { + grid-auto-columns: max-content !important; + } + + .lg\:auto-cols-fr { + grid-auto-columns: minmax(0, 1fr) !important; + } + .lg\:col-auto { grid-column: auto !important; } @@ -72719,6 +72831,22 @@ video { grid-template-rows: none !important; } + .lg\:auto-rows-auto { + grid-auto-rows: auto !important; + } + + .lg\:auto-rows-min { + grid-auto-rows: min-content !important; + } + + .lg\:auto-rows-max { + grid-auto-rows: max-content !important; + } + + .lg\:auto-rows-fr { + grid-auto-rows: minmax(0, 1fr) !important; + } + .lg\:row-auto { grid-row: auto !important; } @@ -91082,6 +91210,22 @@ video { grid-template-columns: none !important; } + .xl\:auto-cols-auto { + grid-auto-columns: auto !important; + } + + .xl\:auto-cols-min { + grid-auto-columns: min-content !important; + } + + .xl\:auto-cols-max { + grid-auto-columns: max-content !important; + } + + .xl\:auto-cols-fr { + grid-auto-columns: minmax(0, 1fr) !important; + } + .xl\:col-auto { grid-column: auto !important; } @@ -91278,6 +91422,22 @@ video { grid-template-rows: none !important; } + .xl\:auto-rows-auto { + grid-auto-rows: auto !important; + } + + .xl\:auto-rows-min { + grid-auto-rows: min-content !important; + } + + .xl\:auto-rows-max { + grid-auto-rows: max-content !important; + } + + .xl\:auto-rows-fr { + grid-auto-rows: minmax(0, 1fr) !important; + } + .xl\:row-auto { grid-row: auto !important; } diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css index 8323b5670600..65fb478d1d7f 100644 --- a/__tests__/fixtures/tailwind-output-no-color-opacity.css +++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css @@ -14368,6 +14368,22 @@ video { grid-template-columns: none; } +.auto-cols-auto { + grid-auto-columns: auto; +} + +.auto-cols-min { + grid-auto-columns: min-content; +} + +.auto-cols-max { + grid-auto-columns: max-content; +} + +.auto-cols-fr { + grid-auto-columns: minmax(0, 1fr); +} + .col-auto { grid-column: auto; } @@ -14564,6 +14580,22 @@ video { grid-template-rows: none; } +.auto-rows-auto { + grid-auto-rows: auto; +} + +.auto-rows-min { + grid-auto-rows: min-content; +} + +.auto-rows-max { + grid-auto-rows: max-content; +} + +.auto-rows-fr { + grid-auto-rows: minmax(0, 1fr); +} + .row-auto { grid-row: auto; } @@ -30509,6 +30541,22 @@ video { grid-template-columns: none; } + .sm\:auto-cols-auto { + grid-auto-columns: auto; + } + + .sm\:auto-cols-min { + grid-auto-columns: min-content; + } + + .sm\:auto-cols-max { + grid-auto-columns: max-content; + } + + .sm\:auto-cols-fr { + grid-auto-columns: minmax(0, 1fr); + } + .sm\:col-auto { grid-column: auto; } @@ -30705,6 +30753,22 @@ video { grid-template-rows: none; } + .sm\:auto-rows-auto { + grid-auto-rows: auto; + } + + .sm\:auto-rows-min { + grid-auto-rows: min-content; + } + + .sm\:auto-rows-max { + grid-auto-rows: max-content; + } + + .sm\:auto-rows-fr { + grid-auto-rows: minmax(0, 1fr); + } + .sm\:row-auto { grid-row: auto; } @@ -46620,6 +46684,22 @@ video { grid-template-columns: none; } + .md\:auto-cols-auto { + grid-auto-columns: auto; + } + + .md\:auto-cols-min { + grid-auto-columns: min-content; + } + + .md\:auto-cols-max { + grid-auto-columns: max-content; + } + + .md\:auto-cols-fr { + grid-auto-columns: minmax(0, 1fr); + } + .md\:col-auto { grid-column: auto; } @@ -46816,6 +46896,22 @@ video { grid-template-rows: none; } + .md\:auto-rows-auto { + grid-auto-rows: auto; + } + + .md\:auto-rows-min { + grid-auto-rows: min-content; + } + + .md\:auto-rows-max { + grid-auto-rows: max-content; + } + + .md\:auto-rows-fr { + grid-auto-rows: minmax(0, 1fr); + } + .md\:row-auto { grid-row: auto; } @@ -62731,6 +62827,22 @@ video { grid-template-columns: none; } + .lg\:auto-cols-auto { + grid-auto-columns: auto; + } + + .lg\:auto-cols-min { + grid-auto-columns: min-content; + } + + .lg\:auto-cols-max { + grid-auto-columns: max-content; + } + + .lg\:auto-cols-fr { + grid-auto-columns: minmax(0, 1fr); + } + .lg\:col-auto { grid-column: auto; } @@ -62927,6 +63039,22 @@ video { grid-template-rows: none; } + .lg\:auto-rows-auto { + grid-auto-rows: auto; + } + + .lg\:auto-rows-min { + grid-auto-rows: min-content; + } + + .lg\:auto-rows-max { + grid-auto-rows: max-content; + } + + .lg\:auto-rows-fr { + grid-auto-rows: minmax(0, 1fr); + } + .lg\:row-auto { grid-row: auto; } @@ -78842,6 +78970,22 @@ video { grid-template-columns: none; } + .xl\:auto-cols-auto { + grid-auto-columns: auto; + } + + .xl\:auto-cols-min { + grid-auto-columns: min-content; + } + + .xl\:auto-cols-max { + grid-auto-columns: max-content; + } + + .xl\:auto-cols-fr { + grid-auto-columns: minmax(0, 1fr); + } + .xl\:col-auto { grid-column: auto; } @@ -79038,6 +79182,22 @@ video { grid-template-rows: none; } + .xl\:auto-rows-auto { + grid-auto-rows: auto; + } + + .xl\:auto-rows-min { + grid-auto-rows: min-content; + } + + .xl\:auto-rows-max { + grid-auto-rows: max-content; + } + + .xl\:auto-rows-fr { + grid-auto-rows: minmax(0, 1fr); + } + .xl\:row-auto { grid-row: auto; } diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index f6d9a6ecc817..7abec0a45d60 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -16816,6 +16816,22 @@ video { grid-template-columns: none; } +.auto-cols-auto { + grid-auto-columns: auto; +} + +.auto-cols-min { + grid-auto-columns: min-content; +} + +.auto-cols-max { + grid-auto-columns: max-content; +} + +.auto-cols-fr { + grid-auto-columns: minmax(0, 1fr); +} + .col-auto { grid-column: auto; } @@ -17012,6 +17028,22 @@ video { grid-template-rows: none; } +.auto-rows-auto { + grid-auto-rows: auto; +} + +.auto-rows-min { + grid-auto-rows: min-content; +} + +.auto-rows-max { + grid-auto-rows: max-content; +} + +.auto-rows-fr { + grid-auto-rows: minmax(0, 1fr); +} + .row-auto { grid-row: auto; } @@ -35405,6 +35437,22 @@ video { grid-template-columns: none; } + .sm\:auto-cols-auto { + grid-auto-columns: auto; + } + + .sm\:auto-cols-min { + grid-auto-columns: min-content; + } + + .sm\:auto-cols-max { + grid-auto-columns: max-content; + } + + .sm\:auto-cols-fr { + grid-auto-columns: minmax(0, 1fr); + } + .sm\:col-auto { grid-column: auto; } @@ -35601,6 +35649,22 @@ video { grid-template-rows: none; } + .sm\:auto-rows-auto { + grid-auto-rows: auto; + } + + .sm\:auto-rows-min { + grid-auto-rows: min-content; + } + + .sm\:auto-rows-max { + grid-auto-rows: max-content; + } + + .sm\:auto-rows-fr { + grid-auto-rows: minmax(0, 1fr); + } + .sm\:row-auto { grid-row: auto; } @@ -53964,6 +54028,22 @@ video { grid-template-columns: none; } + .md\:auto-cols-auto { + grid-auto-columns: auto; + } + + .md\:auto-cols-min { + grid-auto-columns: min-content; + } + + .md\:auto-cols-max { + grid-auto-columns: max-content; + } + + .md\:auto-cols-fr { + grid-auto-columns: minmax(0, 1fr); + } + .md\:col-auto { grid-column: auto; } @@ -54160,6 +54240,22 @@ video { grid-template-rows: none; } + .md\:auto-rows-auto { + grid-auto-rows: auto; + } + + .md\:auto-rows-min { + grid-auto-rows: min-content; + } + + .md\:auto-rows-max { + grid-auto-rows: max-content; + } + + .md\:auto-rows-fr { + grid-auto-rows: minmax(0, 1fr); + } + .md\:row-auto { grid-row: auto; } @@ -72523,6 +72619,22 @@ video { grid-template-columns: none; } + .lg\:auto-cols-auto { + grid-auto-columns: auto; + } + + .lg\:auto-cols-min { + grid-auto-columns: min-content; + } + + .lg\:auto-cols-max { + grid-auto-columns: max-content; + } + + .lg\:auto-cols-fr { + grid-auto-columns: minmax(0, 1fr); + } + .lg\:col-auto { grid-column: auto; } @@ -72719,6 +72831,22 @@ video { grid-template-rows: none; } + .lg\:auto-rows-auto { + grid-auto-rows: auto; + } + + .lg\:auto-rows-min { + grid-auto-rows: min-content; + } + + .lg\:auto-rows-max { + grid-auto-rows: max-content; + } + + .lg\:auto-rows-fr { + grid-auto-rows: minmax(0, 1fr); + } + .lg\:row-auto { grid-row: auto; } @@ -91082,6 +91210,22 @@ video { grid-template-columns: none; } + .xl\:auto-cols-auto { + grid-auto-columns: auto; + } + + .xl\:auto-cols-min { + grid-auto-columns: min-content; + } + + .xl\:auto-cols-max { + grid-auto-columns: max-content; + } + + .xl\:auto-cols-fr { + grid-auto-columns: minmax(0, 1fr); + } + .xl\:col-auto { grid-column: auto; } @@ -91278,6 +91422,22 @@ video { grid-template-rows: none; } + .xl\:auto-rows-auto { + grid-auto-rows: auto; + } + + .xl\:auto-rows-min { + grid-auto-rows: min-content; + } + + .xl\:auto-rows-max { + grid-auto-rows: max-content; + } + + .xl\:auto-rows-fr { + grid-auto-rows: minmax(0, 1fr); + } + .xl\:row-auto { grid-row: auto; } diff --git a/src/corePlugins.js b/src/corePlugins.js index 63e177508fd8..861730e38439 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -86,10 +86,12 @@ import zIndex from './plugins/zIndex' import gap from './plugins/gap' import gridAutoFlow from './plugins/gridAutoFlow' import gridTemplateColumns from './plugins/gridTemplateColumns' +import gridAutoColumns from './plugins/gridAutoColumns' import gridColumn from './plugins/gridColumn' import gridColumnStart from './plugins/gridColumnStart' import gridColumnEnd from './plugins/gridColumnEnd' import gridTemplateRows from './plugins/gridTemplateRows' +import gridAutoRows from './plugins/gridAutoRows' import gridRow from './plugins/gridRow' import gridRowStart from './plugins/gridRowStart' import gridRowEnd from './plugins/gridRowEnd' @@ -206,10 +208,12 @@ export const corePluginList = { gap, gridAutoFlow, gridTemplateColumns, + gridAutoColumns, gridColumn, gridColumnStart, gridColumnEnd, gridTemplateRows, + gridAutoRows, gridRow, gridRowStart, gridRowEnd, diff --git a/src/plugins/gridAutoColumns.js b/src/plugins/gridAutoColumns.js new file mode 100644 index 000000000000..9a5c72bd15d8 --- /dev/null +++ b/src/plugins/gridAutoColumns.js @@ -0,0 +1,14 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return function({ target, ...args }) { + if (target('gridAutoColumns') === 'ie11') { + return + } + + createUtilityPlugin('gridAutoColumns', [['auto-cols', ['gridAutoColumns']]])({ + target, + ...args, + }) + } +} diff --git a/src/plugins/gridAutoRows.js b/src/plugins/gridAutoRows.js new file mode 100644 index 000000000000..d1e5b071c35b --- /dev/null +++ b/src/plugins/gridAutoRows.js @@ -0,0 +1,11 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return function({ target, ...args }) { + if (target('gridAutoRows') === 'ie11') { + return + } + + createUtilityPlugin('gridAutoRows', [['auto-rows', ['gridAutoRows']]])({ target, ...args }) + } +} diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 2823d77179c5..853d6212d661 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -474,6 +474,12 @@ module.exports = { '11': 'repeat(11, minmax(0, 1fr))', '12': 'repeat(12, minmax(0, 1fr))', }, + gridAutoColumns: { + auto: 'auto', + min: 'min-content', + max: 'max-content', + fr: 'minmax(0, 1fr)', + }, gridColumn: { auto: 'auto', 'span-1': 'span 1 / span 1', @@ -531,6 +537,12 @@ module.exports = { '5': 'repeat(5, minmax(0, 1fr))', '6': 'repeat(6, minmax(0, 1fr))', }, + gridAutoRows: { + auto: 'auto', + min: 'min-content', + max: 'max-content', + fr: 'minmax(0, 1fr)', + }, gridRow: { auto: 'auto', 'span-1': 'span 1 / span 1', @@ -781,10 +793,12 @@ module.exports = { gap: ['responsive'], gridAutoFlow: ['responsive'], gridTemplateColumns: ['responsive'], + gridAutoColumns: ['responsive'], gridColumn: ['responsive'], gridColumnStart: ['responsive'], gridColumnEnd: ['responsive'], gridTemplateRows: ['responsive'], + gridAutoRows: ['responsive'], gridRow: ['responsive'], gridRowStart: ['responsive'], gridRowEnd: ['responsive'],