From 89f7a63ee4826b646ec659709cc170b8c45cddbc Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Wed, 28 Aug 2019 18:05:56 +0200 Subject: Support for every property (#144) - Support for all properties - Shorthand mixins for margins and paddings - Support for custom properties - Clearer way to declare `!important` rules: `@include rfs(1rem !important)` instead of `@include rfs(1rem, true)` - Switched to mobile first approach, still possible to switch to the `max-width` media queries if needed - Configuration variables are changed: - Base font size -> Base value - Font size unit -> Unit - `responsive-font-size` property changed to `rfs()` function (see https://github.com/twbs/rfs/issues/116) - Dropped `responsive-font-size` mixins - Dropped Less 2 support since we had to work with lists - Prevent generation of `/test/expected/main.css` - Additional tests for new implementations - Cleanup npm scripts examples - Code examples in `README.md` are grouped by processor and collapsed --- test/postcss/main.css | 94 ++++++++++++++++++++++++++++++++++++++++++++++----- test/postcss/tests.js | 17 ++++++---- 2 files changed, 95 insertions(+), 16 deletions(-) (limited to 'test/postcss') diff --git a/test/postcss/main.css b/test/postcss/main.css index 1540a3b..2a1db4a 100644 --- a/test/postcss/main.css +++ b/test/postcss/main.css @@ -1,39 +1,115 @@ .selector-1 { background-color: #f00; width: 300px; - responsive-font-size: 32px; + font-size: rfs(32px); } .selector-2 { - responsive-font-size: 2rem; + font-size: rfs(2rem); } .selector-3 { - responsive-font-size: 2rem !important; + font-size: rfs(2rem) !important; } .selector-4 { - rfs: 2rem; + font-size: rfs(2rem); } .selector-5 { - responsive-font-size: 2em; + font-size: rfs(2em); } .selector-6 { - responsive-font-size: inherit; + font-size: rfs(inherit); } @supports (display: flex) { .selector-7 { - rfs: 28px; + font-size: rfs(28px); } } .selector-8 { - responsive-font-size: 32; + flex: rfs(0 999 32rem); } .selector-9 { - responsive-font-size: 2rem; + padding: rfs(2rem); +} + +.selector-10 { + padding: rfs(2rem); +} + +.selector-11 { + padding-top: rfs(2rem); +} + +.selector-12 { + padding-right: rfs(2rem); +} + +.selector-13 { + padding-bottom: rfs(2rem); +} + +.selector-14 { + padding-left: rfs(2rem); +} + +.selector-15 { + margin: rfs(2rem); +} + +.selector-16 { + margin-top: rfs(2rem); +} + +.selector-17 { + margin-right: rfs(2rem); +} + +.selector-18 { + margin-bottom: rfs(2rem); +} + +.selector-19 { + margin-left: rfs(2rem); +} + +.selector-20 { + margin: rfs(2rem 3rem); +} + +.selector-21 { + margin: rfs(2rem 3rem) !important; +} + +.selector-22 { + font-size: rfs(0); +} + +.selector-23 { + margin: rfs(0 3rem); +} + +.selector-24 { + box-shadow: rfs(0 0 2rem #f00, 0 0 3rem #0f0); +} + +.selector-25 { + --value: rfs(3rem); +} + +.selector-26 { + font-size: rfs(10px); +} + +.selector-27 { + margin: rfs(-3rem); +} + +.selector-28 { + margin: rfs(-.5rem); } diff --git a/test/postcss/tests.js b/test/postcss/tests.js index b5f03d6..304e747 100644 --- a/test/postcss/tests.js +++ b/test/postcss/tests.js @@ -3,7 +3,7 @@ module.exports = { 'test-1': {}, 'test-2': { - enableResponsiveFontSizes: false + enableRfs: false }, 'test-3': { class: 'disable' @@ -15,17 +15,17 @@ module.exports = { breakpointUnit: 'em' }, 'test-6': { - baseFontSize: '17px' + baseValue: '17px' }, 'test-7': { - fontSizeUnit: 'px' + unit: 'px' }, 'test-8': { twoDimensional: true }, 'test-9': { - baseFontSize: '12px', - fontSizeUnit: 'px', + baseValue: '12px', + unit: 'px', breakpoint: 800, breakpointUnit: 'rem', twoDimensional: true, @@ -34,13 +34,16 @@ module.exports = { safariIframeResizeBugFix: true }, 'test-10': { // Not testable - baseFontSize: '12px', - fontSizeUnit: 'px', + baseValue: '12px', + unit: 'px', breakpoint: 800, breakpointUnit: 'rem', twoDimensional: true, factor: 5, class: true, safariIframeResizeBugFix: true + }, + 'test-11': { + mode: 'max-media-query' } }; -- cgit v1.2.3