diff options
| author | Martijn Cuppens <martijn.cuppens@gmail.com> | 2019-08-28 19:05:56 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2019-08-28 19:05:56 +0300 |
| commit | 89f7a63ee4826b646ec659709cc170b8c45cddbc (patch) | |
| tree | aab7f3991699ffe9f423a0599b9e1c75442e6d4d | |
| parent | 7a15c1a4e41b1fd46b3f26be3529abc1e2d65a4d (diff) | |
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
81 files changed, 5556 insertions, 1880 deletions
diff --git a/.github/rfs-graph.svg b/.github/rfs-graph.svg index 1e0079a..d72c369 100644 --- a/.github/rfs-graph.svg +++ b/.github/rfs-graph.svg @@ -1 +1 @@ -<svg viewBox="0 0 1149 658" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M717 33v570" stroke="#CCC" stroke-width="2" fill="#000" fill-rule="nonzero"/><text fill="#AAA" font-family="Helvetica-Bold, Helvetica" font-size="13" font-weight="bold" transform="translate(0 -3)"><tspan x="681.4" y="13">Breakpoint:</tspan> <tspan x="703" y="29">1200</tspan></text><path d="M296 33v570" stroke="#CCC" stroke-width="2" fill="#000" fill-rule="nonzero"/><text fill="#AAA" font-family="Helvetica-Bold, Helvetica" font-size="13" font-weight="bold" transform="translate(0 -3)"><tspan x="283" y="31">360</tspan></text><path d="M500 33v570" stroke="#CCC" stroke-width="2" fill="#000" fill-rule="nonzero"/><text fill="#AAA" font-family="Helvetica-Bold, Helvetica" font-size="13" font-weight="bold" transform="translate(0 -3)"><tspan x="488" y="31">768</tspan></text><path d="M117 43v550" stroke="#000" stroke-width="2" fill="#000" fill-rule="nonzero"/><path d="M117 593h1000" stroke="#000" stroke-width="2" fill="#000" fill-rule="nonzero"/><text fill="#000" font-family="Helvetica" font-size="20" transform="translate(0 -3)"><tspan x="59" y="36">font-size (px)</tspan></text><text fill="#000" font-family="Helvetica" font-size="20" transform="translate(0 -3)"><tspan x="543.3" y="656">viewport width (px)</tspan></text><path d="M107 493h20" stroke="#000" stroke-width="2" fill="#000" fill-rule="nonzero"/><text fill="#000" font-family="Helvetica" font-size="20" transform="translate(0 -3)"><tspan x="82" y="502">10</tspan></text><path d="M107 393h20" stroke="#000" stroke-width="2" fill="#000" fill-rule="nonzero"/><text font-family="Helvetica" font-size="20" fill="#000" transform="translate(0 -3)"><tspan x="80" y="402">20</tspan></text><path d="M107 293h20" stroke="#000" stroke-width="2" fill="#000" fill-rule="nonzero"/><text fill="#000" font-family="Helvetica" font-size="20" transform="translate(0 -3)"><tspan x="80" y="302">30</tspan></text><path d="M107 193h20" stroke="#000" stroke-width="2" fill="#000" fill-rule="nonzero"/><text fill="#000" font-family="Helvetica" font-size="20" transform="translate(0 -3)"><tspan x="80" y="202">40</tspan></text><path d="M107 93h20" stroke="#000" stroke-width="2" fill="#000" fill-rule="nonzero"/><text fill="#000" font-family="Helvetica" font-size="20" transform="translate(0 -3)"><tspan x="80" y="102">50</tspan></text><path d="M217 583v20" stroke="#000" stroke-width="2" fill="#000" fill-rule="nonzero"/><text fill="#000" font-family="Helvetica" font-size="20" transform="translate(0 -3)"><tspan x="199" y="622">200</tspan></text><path d="M317 583v20" stroke="#000" stroke-width="2" fill="#000" fill-rule="nonzero"/><text fill="#000" font-family="Helvetica" font-size="20" transform="translate(0 -3)"><tspan x="299" y="622">400</tspan></text><path d="M417 583v20" stroke="#000" stroke-width="2" fill="#000" fill-rule="nonzero"/><text fill="#000" font-family="Helvetica" font-size="20" transform="translate(0 -3)"><tspan x="399" y="622">600</tspan></text><path d="M517 583v20" stroke="#000" stroke-width="2" fill="#000" fill-rule="nonzero"/><text fill="#000" font-family="Helvetica" font-size="20" transform="translate(0 -3)"><tspan x="499" y="622">800</tspan></text><path d="M617 583v20" stroke="#000" stroke-width="2" fill="#000" fill-rule="nonzero"/><text fill="#000" font-family="Helvetica" font-size="20" transform="translate(0 -3)"><tspan x="594" y="622">1000</tspan></text><path d="M717 583v20" stroke="#000" stroke-width="2" fill="#000" fill-rule="nonzero"/><text fill="#000" font-family="Helvetica" font-size="20" transform="translate(0 -3)"><tspan x="694" y="622">1200</tspan></text><path d="M818 583v20" stroke="#000" stroke-width="2" fill="#000" fill-rule="nonzero"/><text fill="#000" font-family="Helvetica" font-size="20" transform="translate(0 -3)"><tspan x="796" y="622">1400</tspan></text><path d="M917 583v20" stroke="#000" stroke-width="2" fill="#000" fill-rule="nonzero"/><text fill="#000" font-family="Helvetica" font-size="20" transform="translate(0 -3)"><tspan x="894" y="622">1600</tspan></text><path d="M1017 583v20" stroke="#000" stroke-width="2" fill="#000" fill-rule="nonzero"/><text fill="#000" font-family="Helvetica" font-size="20" transform="translate(0 -3)"><tspan x="994" y="622">1800</tspan></text><path d="M117 393h1010" stroke="#9633FF" stroke-width="2" fill="#000" fill-rule="nonzero"/><text fill="#9633FF" font-family="Helvetica-Bold, Helvetica" font-size="13" font-weight="bold" transform="translate(0 -3)"><tspan x="1135" y="401">20</tspan></text><text fill="#9633FF" font-family="Helvetica-Bold, Helvetica" font-size="13" font-weight="bold" transform="translate(0 -3)"><tspan x="277" y="391">20</tspan></text><text fill="#9633FF" font-family="Helvetica-Bold, Helvetica" font-size="13" font-weight="bold" transform="translate(0 -3)"><tspan x="481" y="391">20</tspan></text><text fill="#9633FF" font-family="Helvetica-Bold, Helvetica" font-size="13" font-weight="bold" transform="translate(0 -3)"><tspan x="697" y="391">20</tspan></text><path d="M117 433h1010" stroke="#F36" stroke-width="2" fill="#000" fill-rule="nonzero"/><text fill="#F36" font-family="Helvetica-Bold, Helvetica" font-size="13" font-weight="bold" transform="translate(0 -3)"><tspan x="1134" y="441">16</tspan></text><text fill="#AAA" font-family="Helvetica-Bold, Helvetica" font-size="11" font-weight="bold" transform="translate(0 -3)"><tspan x="0" y="399">Base font size:</tspan></text><text fill="#F36" font-family="Helvetica-Bold, Helvetica" font-size="13" font-weight="bold" transform="translate(0 -3)"><tspan x="277" y="432">16</tspan></text><text fill="#F36" font-family="Helvetica-Bold, Helvetica" font-size="13" font-weight="bold" transform="translate(0 -3)"><tspan x="481" y="432">16</tspan></text><text fill="#F36" font-family="Helvetica-Bold, Helvetica" font-size="13" font-weight="bold" transform="translate(0 -3)"><tspan x="697" y="432">16</tspan></text><text fill="#83C14C" font-family="Helvetica-Bold, Helvetica" font-size="13" font-weight="bold" transform="translate(0 -3)"><tspan x="270" y="321">~27</tspan></text><text fill="#83C14C" font-family="Helvetica-Bold, Helvetica" font-size="13" font-weight="bold" transform="translate(0 -3)"><tspan x="472" y="260">~34</tspan></text><text fill="#83C14C" font-family="Helvetica-Bold, Helvetica" font-size="13" font-weight="bold" transform="translate(0 -3)"><tspan x="694" y="194">40</tspan></text><text fill="#28B3EE" font-family="Helvetica-Bold, Helvetica" font-size="13" font-weight="bold" transform="translate(0 -3)"><tspan x="270" y="356">~24</tspan></text><text fill="#28B3EE" font-family="Helvetica-Bold, Helvetica" font-size="13" font-weight="bold" transform="translate(0 -3)"><tspan x="473" y="326">~27</tspan></text><text fill="#28B3EE" font-family="Helvetica-Bold, Helvetica" font-size="13" font-weight="bold" transform="translate(0 -3)"><tspan x="696" y="293">30</tspan></text><text fill="#313B45" font-family="Helvetica-Bold, Helvetica" font-size="13" font-weight="bold" transform="translate(0 -3)"><tspan x="270" y="284">~31</tspan></text><text fill="#313B45" font-family="Helvetica-Bold, Helvetica" font-size="13" font-weight="bold" transform="translate(0 -3)"><tspan x="473" y="191">~40</tspan></text><text fill="#313B45" font-family="Helvetica-Bold, Helvetica" font-size="13" font-weight="bold" transform="translate(0 -3)"><tspan x="694" y="93">50</tspan></text><path d="M717 293h410" stroke="#28B3EE" stroke-width="2" fill="#000" fill-rule="nonzero"/><path d="M117 383l600-90" stroke="#28B3EE" stroke-width="2" fill="#000" fill-rule="nonzero"/><text fill="#28B3EE" font-family="Helvetica-Bold, Helvetica" font-size="13" font-weight="bold" transform="translate(0 -3)"><tspan x="1133" y="301">30</tspan></text><path d="M717 193h410" stroke="#83C14C" stroke-width="2" fill="#000" fill-rule="nonzero"/><path d="M117 373l600-180" stroke="#83C14C" stroke-width="2" fill="#000" fill-rule="nonzero"/><text fill="#83C14C" font-family="Helvetica-Bold, Helvetica" font-size="13" font-weight="bold" transform="translate(0 -3)"><tspan x="1133" y="201">40</tspan></text><path d="M717 91h410" stroke="#313B45" stroke-width="2" fill="#000" fill-rule="nonzero"/><path d="M117 363L717 91" stroke="#313B45" stroke-width="2" fill="#000" fill-rule="nonzero"/><text fill="#313B45" font-family="Helvetica-Bold, Helvetica" font-size="13" font-weight="bold" transform="translate(0 -3)"><tspan x="1133" y="99">50</tspan></text></g></svg> +<svg viewBox="0 0 1149 662" xmlns="http://www.w3.org/2000/svg" font-size="13" font-family="Helvetica, system-ui, sans-serif" stroke-width="2"><path d="M717 33v570" stroke="#CCC"/><text fill="#AAA" font-weight="bold"><tspan x="681.4" y="10">Breakpoint:</tspan> <tspan x="703" y="29">1200</tspan></text><path d="M296 33v570" stroke="#CCC"/><text fill="#AAA" font-weight="bold"><tspan x="283" y="28">360</tspan></text><path d="M500 33v570" stroke="#CCC"/><text fill="#AAA" font-weight="bold"><tspan x="488" y="28">768</tspan></text><path d="M117 43v550" stroke="#000"/><path d="M117 593h1000" stroke="#000"/><text font-size="20"><tspan x="73" y="33">value (px)</tspan></text><text font-size="20"><tspan x="543.3" y="653">viewport width (px)</tspan></text><path d="M107 493h20" stroke="#000"/><text font-size="20"><tspan x="82" y="499">10</tspan></text><path d="M107 393h20" stroke="#000"/><text font-size="20"><tspan x="80" y="399">20</tspan></text><path d="M107 293h20" stroke="#000"/><text font-size="20"><tspan x="80" y="299">30</tspan></text><path d="M107 193h20" stroke="#000"/><text font-size="20"><tspan x="80" y="199">40</tspan></text><path d="M107 93h20" stroke="#000"/><text font-size="20"><tspan x="80" y="99">50</tspan></text><path d="M217 583v20" stroke="#000"/><text font-size="20" transform="translate(0 -3)"><tspan x="199" y="622">200</tspan></text><path d="M317 583v20" stroke="#000"/><text font-size="20" transform="translate(0 -3)"><tspan x="299" y="622">400</tspan></text><path d="M417 583v20" stroke="#000"/><text font-size="20" transform="translate(0 -3)"><tspan x="399" y="622">600</tspan></text><path d="M517 583v20" stroke="#000"/><text font-size="20" transform="translate(0 -3)"><tspan x="499" y="622">800</tspan></text><path d="M617 583v20" stroke="#000"/><text font-size="20" transform="translate(0 -3)"><tspan x="594" y="622">1000</tspan></text><path d="M717 583v20" stroke="#000"/><text font-size="20" transform="translate(0 -3)"><tspan x="694" y="622">1200</tspan></text><path d="M818 583v20" stroke="#000"/><text font-size="20" transform="translate(0 -3)"><tspan x="796" y="622">1400</tspan></text><path d="M917 583v20" stroke="#000"/><text font-size="20" transform="translate(0 -3)"><tspan x="894" y="622">1600</tspan></text><path d="M1017 583v20" stroke="#000"/><text font-size="20" transform="translate(0 -3)"><tspan x="994" y="622">1800</tspan></text><path d="M117 393h1010" stroke="#9633FF"/><text fill="#9633FF" font-weight="bold" transform="translate(0 -3)"><tspan x="1135" y="401">20</tspan></text><text fill="#9633FF" font-weight="bold" transform="translate(0 -3)"><tspan x="277" y="391">20</tspan></text><text fill="#9633FF" font-weight="bold" transform="translate(0 -3)"><tspan x="481" y="391">20</tspan></text><text fill="#9633FF" font-weight="bold"><tspan x="697" y="388">20</tspan></text><path d="M117 433h1010" stroke="#F36"/><text fill="#F36" font-weight="bold"><tspan x="1134" y="438">16</tspan></text><text fill="#AAA" font-weight="bold"><tspan x="2" y="396">Base value:</tspan></text><text fill="#F36" font-weight="bold" transform="translate(0 -3)"><tspan x="277" y="432">16</tspan></text><text fill="#F36" font-weight="bold" transform="translate(0 -3)"><tspan x="481" y="432">16</tspan></text><text fill="#F36" font-weight="bold" transform="translate(0 -3)"><tspan x="697" y="432">16</tspan></text><text fill="#83C14C" font-weight="bold" transform="translate(0 -3)"><tspan x="270" y="321">~27</tspan></text><text fill="#83C14C" font-weight="bold" transform="translate(0 -3)"><tspan x="472" y="260">~34</tspan></text><text fill="#83C14C" font-weight="bold" transform="translate(0 -3)"><tspan x="694" y="194">40</tspan></text><text fill="#28B3EE" font-weight="bold" transform="translate(0 -3)"><tspan x="270" y="356">~24</tspan></text><text fill="#28B3EE" font-weight="bold" transform="translate(0 -3)"><tspan x="473" y="326">~27</tspan></text><text fill="#28B3EE" font-weight="bold" transform="translate(0 -3)"><tspan x="696" y="293">30</tspan></text><text fill="#313B45" font-weight="bold" transform="translate(0 -3)"><tspan x="270" y="284">~31</tspan></text><text fill="#313B45" font-weight="bold" transform="translate(0 -3)"><tspan x="473" y="191">~40</tspan></text><text fill="#313B45" font-weight="bold" transform="translate(0 -3)"><tspan x="694" y="93">50</tspan></text><path d="M717 293h410" stroke="#28B3EE"/><path d="M117 383l600-90" stroke="#28B3EE"/><text fill="#28B3EE" font-weight="bold" transform="translate(0 -3)"><tspan x="1133" y="301">30</tspan></text><path d="M717 193h410" stroke="#83C14C"/><path d="M117 373l600-180" stroke="#83C14C"/><text fill="#83C14C" font-weight="bold" transform="translate(0 -3)"><tspan x="1133" y="201">40</tspan></text><path d="M717 91h410" stroke="#313B45"/><path d="M117 363L717 91" stroke="#313B45"/><text fill="#313B45" font-weight="bold" transform="translate(0 -3)"><tspan x="1133" y="99">50</tspan></text></svg>
\ No newline at end of file diff --git a/.github/rfs-rescale.gif b/.github/rfs-rescale.gif Binary files differindex a27c263..d1ee4ee 100644 --- a/.github/rfs-rescale.gif +++ b/.github/rfs-rescale.gif @@ -4,7 +4,4 @@ npm-debug.log* # Dependency directories node_modules/ -# Ignore -/test/expected/main.css - /.idea/ @@ -2,9 +2,9 @@ <img src="https://raw.githubusercontent.com/twbs/rfs/master/rfs.svg?sanitize=true" alt="RFS logo" width="99" height="108.6"> </p> -<p align="center"> - RFS (simply the abbreviation for Responsive Font Size) is a font size engine which <strong>automatically calculates the appropriate font size</strong> based on the dimensions of the browser viewport. It's available in one of your favourite preprocessors or postprocessor: <a href="https://sass-lang.com/">Sass</a>, <a href="http://lesscss.org/">Less</a>, <a href="http://stylus-lang.com/">Stylus</a> or <a href="https://postcss.org/">PostCSS</a>. -</p> +RFS is a unit resizing engine which was initially developed to resize font sizes (hence its abbreviation for Responsive Font Sizes). Nowadays RFS is capable of rescaling basically every value for any css property with units, like `margin`, `padding`, `border-radius` or even `box-shadow`. + +The mechanism **automatically calculates the appropriate values** based on the dimensions of the browser viewport. It's available in one of your favourite preprocessors or postprocessor: [Sass](https://sass-lang.com/), [Less](http://lesscss.org/), [Stylus](http://stylus-lang.com/) or [PostCSS](https://postcss.org/). # RFS @@ -13,26 +13,36 @@ ![build][build-image] [![devDeps][devDeps-image]][devDeps-url] -- [How does it work?](#how-does-it-work) +- [Demos](#demos) +- [Advantages](#advantages) - [Installation](#installation) - [Usage](#usage) - [Visualisation](#visualisation) - [Configuration](#configuration) -- [`!important` usage](#important-usage) -- [Demos](#demos) - [Creator](#creator) - [Copyright and license](#copyright-and-license) -## How does it work? +## Demos + +- [Card example (Sass)](https://codepen.io/MartijnCuppens/pen/vqaEBG?editors=0100) +- [Card example (Sass, with custom properties)](https://codepen.io/MartijnCuppens/pen/voXLGL?editors=1100) +- [Card example (PostCSS)](https://codepen.io/MartijnCuppens/pen/aeojgG?editors=0100) +- [Card example (PostCSS, with custom properties)](https://codepen.io/MartijnCuppens/pen/JgRYaw?editors=0100) +- [Simple font rescaling Codepen Demo](https://codepen.io/MartijnCuppens/pen/ZBjdMy?editors=0100) +- [RFS in Bootstrap demo](https://project-rfs.github.io/) + +## Advantages -- Font sizes will **rescale for every screen or device**, this prevents long words from being chopped off the viewport on small devices +- No need to rescale paddings or margins anymore +- Text won't be chopped off smaller viewports when RFS is applied to font sizes - RFS will prevent the font size from rescaling too small so readability can be assured -- **Super easy** to use, just use the `font-size` mixin (or `responsive-font-size` property for PostCSS) instead of the `font-size` property - The font sizes of all text elements will always remain in relation with each other +## Fluid rescaling in action - +The following example shows the effect of RFS on font sizes: + ## Installation @@ -47,32 +57,20 @@ RFS can be installed using a package manager (recommended): The source files can also be downloaded manually and used in a project. This method is not recommended because you lose the ability to easily and quickly manage and update RFS as a dependency. - ## Usage -In the following examples, this folder structure is assumed (you will probably just use one pre/postprocessor): +### Sass (<code>.scss</code> syntax) ```text project/ -├── postcss/ -│ └── main.css -├── less/ -│ └── main.less ├── node_modules/ │ └── rfs │ └── ... -├── sass/ -│ └── main.sass -├── scss/ -│ └── main.scss -└── stylus/ - └── main.styl +└── scss/ + └── main.scss ``` - -### Sass - -`.scss` syntax: +#### Input ```scss // scss/main.scss @@ -81,14 +79,89 @@ project/ .title { @include font-size(4rem); - // or - @include responsive-font-size(64px); - // or - @include rfs(64); + + // The font-size mixin is a shorthand which calls + // @include rfs(4rem, font-size); + + // Other shorthand mixins that are available are: + // @include padding(4rem); + // @include padding-top(4rem); + // @include padding-right(4rem); + // @include padding-bottom(4rem); + // @include padding-left(4rem); + // @include margin(4rem); + // @include margin-top(4rem); + // @include margin-right(4rem); + // @include margin-bottom(4rem); + // @include margin-left(4rem); + + // For properties which do not have a shorthand, the property can be passed: + // @include rfs(4rem, border-radius); + + // Whenever a value contains a space, it should be escaped with `#{}`: + // @include rfs(0 0 4rem red #{","} 0 0 5rem blue, box-shadow); + + // Custom properties (css variables): + // @include rfs(4rem, --border-radius); +} +``` + +If you're using Webpack, you can simplify the `@import` using the `~` prefix: + +```scss +@import "~rfs/scss"; +``` + +#### Generated css + +```css +.title { + font-size: calc(1.525rem + 3.3vw); +} + +@media (min-width: 1200px) { + .title { + font-size: 4rem; + } +} +``` + +#### !important usage + +##### Input + +```scss +.label { + @include font-size(2.5rem !important); +} +``` + +##### Output + +```css +.label { + font-size: calc(1.375rem + 1.5vw) !important; +} + +@media (min-width: 1200px) { + .label { + font-size: 2.5rem !important; + } } ``` -`.sass` syntax: +### Sass (<code>.sass</code> syntax) + +```text +project/ +├── node_modules/ +│ └── rfs +│ └── ... +└── sass/ + └── main.sass +``` + +#### Input ```sass // scss/main.scss @@ -97,30 +170,139 @@ project/ .title +font-size(4rem) - // or - +responsive-font-size(64px) - // or - +rfs(64) + + // The font-size mixin is a shorthand which calls + // +rfs(4rem, font-size) + + // Other shorthand mixins that are available are: + // +padding(4rem) + // +padding-top(4rem) + // +padding-right(4rem) + // +padding-bottom(4rem) + // +padding-left(4rem) + // +margin(4rem) + // +margin-top(4rem) + // +margin-right(4rem) + // +margin-bottom(4rem) + // +margin-left(4rem) + + // For properties which do not have a shorthand, the property can be passed: + // +rfs(4rem, border-radius) + + // Whenever a value contains a space, it should be escaped with `#{}`: + // +rfs(0 0 4rem red #{","} 0 0 5rem blue, box-shadow) + + // Custom properties (css variables): + // +rfs(4rem, --border-radius) +``` + +If you're using Webpack, you can simplify the `@import` using the `~` prefix: + +```sass +@import "~rfs/scss" +``` + +#### Generated css + +```css +.title { + font-size: calc(1.525rem + 3.3vw); +} + +@media (min-width: 1200px) { + .title { + font-size: 4rem; + } +} ``` +#### !important usage + +##### Input + +```sass +.label + +font-size(2.5rem !important) +``` + +#### output + +```css +.label { + font-size: calc(1.375rem + 1.5vw) !important; +} + +@media (min-width: 1200px) { + .label { + font-size: 2.5rem !important; + } +} +``` ### PostCSS +```text +project/ +├── postcss/ +│ └── main.css +└── node_modules/ + └── rfs + └── ... +``` + +Have a look at the [examples folder](https://github.com/twbs/rfs/tree/master/examples/postcss) to find examples of how your PostCSS setup can be configured. + ```postcss // postcss/main.css .title { - responsive-font-size: 4rem; - // or - rfs: 64; -} + font-size: rfs(4rem); + + // Or use it with any other property, eg + // padding: rfs(4rem); + + // It's also possible to pass multiple values + // padding: rfs(3rem 4rem); + + // or even + // box-shadow: rfs(0 3px 4rem red); -// Handle postcss afterwards (see examples folder for PostCSS example) + // or even comma seperated values + // box-shadow: rfs(0 3px 4rem red, 3px 0 4rem blue); + + // To combine it with !important, use + // box-shadow: rfs(0 3px 4rem red) !important; + + // Custom properties (css variables): + // --border-radius: rfs(4rem); +} ``` +#### Generated css + +```css +.title { + font-size: calc(1.525rem + 3.3vw); +} + +@media (min-width: 1200px) { + .title { + font-size: 4rem; + } +} +``` ### Less +```text +project/ +├── less/ +│ └── main.less +└── node_modules/ + └── rfs + └── ... +``` + ```less // less/main.less @@ -128,68 +310,175 @@ project/ .title { .font-size(4rem); - // or - .responsive-font-size(64px); - // or - .rfs(64); + + // The font-size mixin is a shorthand which calls + // .rfs(4rem, font-size); + + // Other shorthand mixins that are available are: + // .padding(4rem); + // .padding-top(4rem); + // .padding-right(4rem); + // 'padding-bottom(4rem); + // .padding-left(4rem); + // .margin(4rem); + // .margin-top(4rem); + // .margin-right(4rem); + // .margin-bottom(4rem); + // .margin-left(4rem); + + // For properties which do not have a shorthand, the property can be passed: + // .rfs(4rem, border-radius); + + // Whenever a value contains a space, it should be escaped with a tilde: + // .rfs(0 0 4rem red ~"," 0 0 5rem blue, box-shadow) + + // Custom properties (css variables): + // .rfs(4rem, --border-radius) +} +``` + +If you're using Webpack, you can simplify the `@import` using the `~` prefix: + +```less +@import "~rfs/less" +``` + +#### Generated css + +```css +.title { + font-size: calc(1.525rem + 3.3vw); +} + +@media (min-width: 1200px) { + .title { + font-size: 4rem; + } +} +``` + +#### !important usage + +Less still has [a bug](https://github.com/less/less.js/issues/2917) for [native `!important` support](http://lesscss.org/features/#mixins-feature-the-important-keyword), and `!important` can not be accepted as a parameter, so you 'll need to pass `important` as a flag: + +##### Input + +```less +.label { + .font-size(2.5rem important); } ``` +#### output + +```css +.label { + font-size: calc(1.375rem + 1.5vw) !important; +} + +@media (min-width: 1200px) { + .label { + font-size: 2.5rem !important; + } +} +``` ### Stylus +```text +project/ +├── node_modules/ +│ └── rfs +│ └── ... +└── stylus/ + └── main.styl +``` + ```stylus // stylus/main.styl @import "../node_modules/rfs/stylus"; .title - responsive-font-size(64px) - // or - rfs(64) + rfs-font-size(64px) + + // The font-size mixin is a shorthand which calls + // rfs(4rem, font-size) + + // Other shorthand mixins that are available are: + // rfs-padding(4rem) + // rfs-padding-top(4rem) + // rfs-padding-right(4rem) + // rfs-padding-bottom(4rem) + // rfs-padding-left(4rem) + // rfs-margin(4rem) + // rfs-margin-top(4rem) + // rfs-margin-right(4rem) + // rfs-margin-bottom(4rem) + // rfs-margin-left(4rem) + + // For properties which do not have a shorthand, the property can be passed: + // rfs(4rem, border-radius) + + // Whenever a value contains a space, it should be escaped with a backslash: + // rfs(0 0 4rem red \, 0 0 5rem blue, box-shadow) + + // Custom properties (css variables): + // rfs(4rem, --border-radius) ``` Note the `font-size` mixin can not be used to set the font size. That is because a `font-size()` mixin would override the `font-size` property. See [129#issuecomment-477926416](https://github.com/twbs/rfs/pull/129#issuecomment-477926416) for more info. -### Generated css +If you're using Webpack, you can simplify the `@import` using the `~` prefix: + +```stylus +@import "~rfs/stylus" +``` + +#### Generated css ```css .title { - font-size: 4rem; + font-size: calc(1.525rem + 3.3vw); } -@media (max-width: 1200px) { +@media (min-width: 1200px) { .title { - font-size: calc(1.525rem + 3.3vw); + font-size: 4rem; } } ``` -If you're using Webpack, you can simplify the `@import` using the `~` prefix: +#### !important usage -```scss -@import "~rfs/scss"; -``` - -```sass -@import "~rfs/sass" -``` +##### Input ```less -@import "~rfs/less"; +.label + rfs-font-size(2.5rem important) ``` -```stylus -@import "~rfs/stylus" +#### output + +```css +.label { + font-size: calc(1.375rem + 1.5vw) !important; +} + +@media (min-width: 1200px) { + .label { + font-size: 2.5rem !important; + } +} ``` ## Visualisation -If you wonder how the font sizes are rescaled, wonder no more and stare at this graph which might clarify things a bit: +If you wonder how the values are rescaled, wonder no more and stare at this graph which might clarify things a bit:  -Each color represents another font size being rescaled. For example: +Each color represents another value being rescaled. For example: ```scss .title { @@ -199,45 +488,40 @@ Each color represents another font size being rescaled. For example: This is the green line. A font size of `40px` stays `40px` in viewports with a size larger than `1200px`. Below `1200px`, the font size is rescaled and at viewport of `360px`, the font size is about `27px`. Note that every font size is generated in a combination of `rem` and `vw` units, but they are mapped to `px` in the graph to make it easier to understand. - ## Configuration -RFS works out of the box without any configuration tweaks, but if you feel the urge to go loco and fine tune the way font sizes are rescaled, you can: - +RFS works out of the box without any configuration tweaks, but if you feel the urge to go loco and fine tune the way values are rescaled, you can: -### Base font size <sub><sup>(unit in `px` or `rem`)</sup></sub> +### Base value <sub><sup>(unit in `px` or `rem`)</sup></sub> -- SCSS, Sass & Stylus: `$rfs-base-font-size` -- Less: `@rfs-base-font-size` -- PostCSS: `baseFontSize` +- SCSS, Sass & Stylus: `$rfs-base-value` +- Less: `@rfs-base-value` +- PostCSS: `baseValue` -The option will prevent the font size from becoming too small on smaller screens. If the font size which is passed to RFS is smaller than this base font size, no fluid font rescaling will take place. +The option will prevent the value from becoming too small on smaller screens. If the font size which is passed to RFS is smaller than this value, no fluid rescaling will take place. *Default value: `1.25rem`* +### Unit <sub><sup>(`px` or `rem`)</sup></sub> -### Font size unit <sub><sup>(`px` or `rem`)</sup></sub> - -- SCSS, Sass & Stylus: `$rfs-font-size-unit` -- Less: `@rfs-font-size-unit` -- PostCSS: `fontSizeUnit` +- SCSS, Sass & Stylus: `$rfs-unit` +- Less: `@rfs-unit` +- PostCSS: `unit` -The output font size will be rendered in this unit. Setting it in `px` will disable the ability for users to change the the font size in their browser. +The output value will be rendered in this unit. Keep in mind configuring this value to `px` will disable the ability for users to change the the font size in their browser. *Default value: `rem`* - ### Breakpoint <sub><sup>(in `px`, `em` or `rem`)</sup></sub> - SCSS, Sass & Stylus: `$rfs-breakpoint` - Less: `@rfs-breakpoint` - PostCSS: `breakpoint` -Above this breakpoint, the font size will be equal to the font size you passed to RFS; below the breakpoint, the font size will dynamically scale. +Above this breakpoint, the value will be equal to the value you passed to RFS; below the breakpoint, the value will dynamically scale. *Default value: `1200px`* - ### Breakpoint unit <sub><sup>(`px`, `em` or `rem`)</sup></sub> - SCSS, Sass & Stylus: `$rfs-breakpoint-unit` @@ -248,18 +532,16 @@ The width of the max width in the media query will be rendered in this unit. *Default value: `px`* - ### Factor <sub><sup>(number)</sup></sub> - SCSS, Sass & Stylus: `$rfs-factor` - Less: `@rfs-factor` - PostCSS: `factor` -This value determines the strength of font size resizing. The higher the factor, the less difference there is between font sizes on small screens. The lower the factor, the less influence RFS has, which results in bigger font sizes for small screens. The factor must be greater than 1. +This value determines the strength of font size resizing. The higher the factor, the less difference there is between values on small screens. The lower the factor, the less influence RFS has, which results in bigger values for small screens. The factor must be greater than 1. *Default value: `10`* - ### Rem value <sub><sup>(number)</sup></sub> - SCSS, Sass & Stylus: `$rfs-rem-value` @@ -270,18 +552,16 @@ The value of `1rem` in `px`. The value of `1rem` is typically `16px` but if the *Default value: `16`* - ### Two dimensional <sub><sup>(boolean)</sup></sub> - SCSS, Sass & Stylus: `$rfs-two-dimensional` - Less: `@rfs-two-dimensional` - PostCSS: `twoDimensional` -Enabling the two dimensional media queries will determine the font size based on the smallest side of the screen with `vmin`. This prevents the font size from changing if the device toggles between portrait and landscape mode. +Enabling the two dimensional media queries will determine the value based on the smallest side of the screen with `vmin`. This prevents values from changing if the device toggles between portrait and landscape mode. *Default value: `false`* - ### Class <sub><sup>(boolean)</sup></sub> - SCSS, Sass & Stylus: `$rfs-class` @@ -293,73 +573,30 @@ RFS can be enabled or disabled with a class. There are 3 options: - `false` No extra classes are generated. - `disable` - When the the disable classes are generated you can add the `.disable-responsive-font-size` class to an element to disable responsive font sizes for the element and its child elements. + When the the disable classes are generated you can add the `.disable-rfs` class to an element to disable responsive value rescaling for the element and its child elements. - `enable` - RFS is disabled by default in this case. The `.enable-responsive-font-size` class can be added to an element to enable responsive font sizes for the element and its child elements. + RFS is disabled by default in this case. The `.enable-rfs` class can be added to an element to enable responsive value rescaling for the element and its child elements. *Default value: `false`* - ### Safari iframe resize bug fix <sub><sup>(boolean)</sup></sub> - SCSS, Sass & Stylus: `$rfs-safari-iframe-resize-bug-fix` - Less: `@rfs-safari-iframe-resize-bug-fix` - PostCSS: `safariIframeResizeBugFix` -Safari doesn't resize its font size in an iframe if the iframe is resized. To fix this `min-width: 0vw` can be added and that's what happens if this option is enabled. See [#14](https://github.com/twbs/rfs/issues/14). +Safari doesn't resize its values in an iframe if the iframe is resized. To fix this `min-width: 0vw` can be added and that's what happens if this option is enabled. See [#14](https://github.com/twbs/rfs/issues/14). *Default value: `false`* - -## !important usage - -By setting a second parameter to true, `!important` is added after the font-size value. (Example is in `scss`) - -```scss -.label { - @include responsive-font-size(2.5rem, true); -} -``` - -CSS: - -```css -.label { - font-size: 2.5rem !important; -} - -@media (max-width: 1200px) { - .label { - font-size: calc(1.375rem + 1.5vw) !important; - } -} -``` - - ## Best practices - Don't set RFS on the `html` element, because this influences the value of `rem` and could lead to unexpected results. -- Always set your line-heights relative (in `em` or unitless) to prevent interline issues. - +- Always set your line-heights relative (in `em` or unitless) to prevent interline issues with font sizes. ## Browser support -RFS is supported by all browsers that support [media queries](https://caniuse.com/#feat=css-mediaqueries) and [viewport units](https://caniuse.com/#feat=viewport-units). In browsers like IE8 or older, the font size will be set but the fluid rescaling will be disabled. A list of the most popular browsers that support RFS: -- Chrome -- Safari -- Opera -- Firefox -- Edge -- Samsung Internet -- UC Browsers -- IE >= 9 - - -## Demos - -- [Simple Codepen Demo](https://codepen.io/MartijnCuppens/pen/ZBjdMy) -- [RFS in Bootstrap demo](https://project-rfs.github.io/) - +RFS is supported by all browsers that support [media queries](https://caniuse.com/#feat=css-mediaqueries) and [viewport units](https://caniuse.com/#feat=viewport-units). ## Creator @@ -368,7 +605,6 @@ RFS is supported by all browsers that support [media queries](https://caniuse.co - <https://twitter.com/Martijn_Cuppens> - <https://github.com/MartijnCuppens> - ## Copyright and license Code released under [the MIT license](https://github.com/twbs/rfs/blob/master/LICENSE). @@ -1,25 +1,29 @@ { "name": "rfs", - "description": "A scss-mixin for responsive font-sizes.", - "main": "postcss/rfs.js", + "description": "Powerful & easy-to-use responsive resizing engine.", + "main": "postcss.js", "authors": [ "Martijn Cuppens <martijn.cuppens@gmail.com>" ], "license": "MIT", "keywords": [ "rfs", - "scss", + "fluid", "responsive", - "responsive-font-size", "font-size", - "typography" + "typography", + "mixin", + "scss", + "sass", + "less", + "stylus", + "postcss" ], "homepage": "https://github.com/twbs/rfs", "ignore": [ "**/.*", "node_modules", "bower_components", - "test", - "tests" + "test" ] } diff --git a/examples/README.md b/examples/README.md index 012f79a..7deb92c 100644 --- a/examples/README.md +++ b/examples/README.md @@ -1,6 +1,8 @@ # Examples -Setup +## Setup + +Install dependencies in the root of the project. ```shell npm install @@ -8,20 +10,24 @@ npm install yarn ``` +## Example setup + +Each folder contains a node (`index.js`) & gulp (`gulpfile.js`) example. + ## Less ### node ```shell -cd examples/less/node -node ./index.js +cd examples/less +node index.js ``` ### Gulp ```shell -cd examples/less/gulp -gulp build +cd examples/less +gulp ``` @@ -30,15 +36,15 @@ gulp build ### node ```shell -cd examples/postcss/node -node ./index.js +cd examples/postcss +node index.js ``` ### Gulp ```shell -cd examples/postcss/gulp -gulp build +cd examples/postcss +gulp ``` @@ -47,15 +53,15 @@ gulp build ### node ```shell -cd examples/scss/node -node ./index.js +cd examples/scss +node index.js ``` ### Gulp ```shell -cd examples/scss/gulp -gulp build +cd examples/scss +gulp ``` @@ -64,13 +70,13 @@ gulp build ### node ```shell -cd examples/stylus/node -node ./index.js +cd examples/stylus +node index.js ``` ### Gulp ```shell -cd examples/stylus/gulp -gulp build +cd examples/stylus +gulp ``` diff --git a/examples/less/dest/main.css b/examples/less/dest/main.css new file mode 100644 index 0000000..17ab0bd --- /dev/null +++ b/examples/less/dest/main.css @@ -0,0 +1,203 @@ +.selector-1 { + background-color: #f00; + width: 300px; + font-size: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-1 { + font-size: 2rem; + } +} +.selector-2 { + font-size: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-2 { + font-size: 2rem; + } +} +.selector-3 { + font-size: calc(1.325rem + 0.9vw) !important; +} +@media (min-width: 1200px) { + .selector-3 { + font-size: 2rem !important; + } +} +.selector-4 { + font-size: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-4 { + font-size: 2rem; + } +} +.selector-5 { + font-size: 2em; +} +.selector-6 { + font-size: inherit; +} +@supports (display: flex) { + .selector-7 { + font-size: calc(1.3rem + 0.6vw); + } + @media (min-width: 1200px) { + .selector-7 { + font-size: 1.75rem; + } + } +} +.selector-8 { + flex: 0 999 calc(4.325rem + 36.9vw); +} +@media (min-width: 1200px) { + .selector-8 { + flex: 0 999 32rem; + } +} +.selector-9 { + padding: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-9 { + padding: 2rem; + } +} +.selector-10 { + padding: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-10 { + padding: 2rem; + } +} +.selector-11 { + padding-top: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-11 { + padding-top: 2rem; + } +} +.selector-12 { + padding-right: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-12 { + padding-right: 2rem; + } +} +.selector-13 { + padding-bottom: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-13 { + padding-bottom: 2rem; + } +} +.selector-14 { + padding-left: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-14 { + padding-left: 2rem; + } +} +.selector-15 { + margin: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-15 { + margin: 2rem; + } +} +.selector-16 { + margin-top: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-16 { + margin-top: 2rem; + } +} +.selector-17 { + margin-right: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-17 { + margin-right: 2rem; + } +} +.selector-18 { + margin-bottom: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-18 { + margin-bottom: 2rem; + } +} +.selector-19 { + margin-left: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-19 { + margin-left: 2rem; + } +} +.selector-20 { + margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw); +} +@media (min-width: 1200px) { + .selector-20 { + margin: 2rem 3rem; + } +} +.selector-21 { + margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw) !important; +} +@media (min-width: 1200px) { + .selector-21 { + margin: 2rem 3rem !important; + } +} +.selector-22 { + font-size: 0; +} +.selector-23 { + margin: 0 calc(1.425rem + 2.1vw); +} +@media (min-width: 1200px) { + .selector-23 { + margin: 0 3rem; + } +} +.selector-24 { + box-shadow: 0 0 calc(1.325rem + 0.9vw) #f00 , 0 0 calc(1.425rem + 2.1vw) #0f0; +} +@media (min-width: 1200px) { + .selector-24 { + box-shadow: 0 0 2rem #f00 , 0 0 3rem #0f0; + } +} +.selector-25 { + --value: calc(1.425rem + 2.1vw); +} +@media (min-width: 1200px) { + .selector-25 { + --value: 3rem; + } +} +.selector-26 { + font-size: 0.625rem; +} +.selector-27 { + margin: calc(-1.425rem - 2.1vw); +} +@media (min-width: 1200px) { + .selector-27 { + margin: -3rem; + } +} +.selector-28 { + margin: -0.5rem; +} diff --git a/examples/less/gulp/dest/main.css b/examples/less/gulp/dest/main.css deleted file mode 100644 index 43cc4e7..0000000 --- a/examples/less/gulp/dest/main.css +++ /dev/null @@ -1,58 +0,0 @@ -.selector-1 { - background-color: #f00; - width: 300px; - font-size: 2rem ; -} -@media (max-width: 1200px) { - .selector-1 { - font-size: calc(1.325rem + 0.9vw) ; - } -} -.selector-2 { - font-size: 2rem ; -} -@media (max-width: 1200px) { - .selector-2 { - font-size: calc(1.325rem + 0.9vw) ; - } -} -.selector-3 { - font-size: 2rem !important; -} -@media (max-width: 1200px) { - .selector-3 { - font-size: calc(1.325rem + 0.9vw) !important; - } -} -.selector-4 { - font-size: 2rem ; -} -@media (max-width: 1200px) { - .selector-4 { - font-size: calc(1.325rem + 0.9vw) ; - } -} -.selector-5 { - font-size: 2em ; -} -.selector-6 { - font-size: inherit ; -} -@supports (display: flex) { - .selector-7 { - font-size: 1.75rem ; - } - @media (max-width: 1200px) { - .selector-7 { - font-size: calc(1.3rem + 0.6vw) ; - } - } -} -.selector-8 { - font-size: 2rem ; -} -@media (max-width: 1200px) { - .selector-8 { - font-size: calc(1.325rem + 0.9vw) ; - } -} diff --git a/examples/less/gulp/src/main.less b/examples/less/gulp/src/main.less deleted file mode 100644 index ed2cc25..0000000 --- a/examples/less/gulp/src/main.less +++ /dev/null @@ -1,37 +0,0 @@ -@import "../../../../less"; - -.selector-1 { - background-color: #f00; - width: 300px; - .responsive-font-size(32px); -} - -.selector-2 { - .responsive-font-size(2rem); -} - -.selector-3 { - .responsive-font-size(2rem, true); -} - -.selector-4 { - .rfs(2rem); -} - -.selector-5 { - .responsive-font-size(2em); -} - -.selector-6 { - .responsive-font-size(inherit); -} - -@supports (display: flex) { - .selector-7 { - .rfs(28px); - } -} - -.selector-8 { - .responsive-font-size(32); -} diff --git a/examples/less/gulp/gulpfile.js b/examples/less/gulpfile.js index 51600f9..a6048b6 100644 --- a/examples/less/gulp/gulpfile.js +++ b/examples/less/gulpfile.js @@ -3,7 +3,7 @@ const gulp = require('gulp'); const less = require('gulp-less'); -gulp.task('build', () => { +gulp.task('default', () => { return gulp.src('./src/**/*.less') .pipe(less()) .pipe(gulp.dest('./dest')); diff --git a/examples/less/node/index.js b/examples/less/index.js index 41760fb..85dc8ce 100644 --- a/examples/less/node/index.js +++ b/examples/less/index.js @@ -17,8 +17,6 @@ less.render( if (err) { throw err; } - - console.log('Responsive font sizes generated.'); }); }, error => { diff --git a/examples/less/node/dest/main.css b/examples/less/node/dest/main.css deleted file mode 100644 index 43cc4e7..0000000 --- a/examples/less/node/dest/main.css +++ /dev/null @@ -1,58 +0,0 @@ -.selector-1 { - background-color: #f00; - width: 300px; - font-size: 2rem ; -} -@media (max-width: 1200px) { - .selector-1 { - font-size: calc(1.325rem + 0.9vw) ; - } -} -.selector-2 { - font-size: 2rem ; -} -@media (max-width: 1200px) { - .selector-2 { - font-size: calc(1.325rem + 0.9vw) ; - } -} -.selector-3 { - font-size: 2rem !important; -} -@media (max-width: 1200px) { - .selector-3 { - font-size: calc(1.325rem + 0.9vw) !important; - } -} -.selector-4 { - font-size: 2rem ; -} -@media (max-width: 1200px) { - .selector-4 { - font-size: calc(1.325rem + 0.9vw) ; - } -} -.selector-5 { - font-size: 2em ; -} -.selector-6 { - font-size: inherit ; -} -@supports (display: flex) { - .selector-7 { - font-size: 1.75rem ; - } - @media (max-width: 1200px) { - .selector-7 { - font-size: calc(1.3rem + 0.6vw) ; - } - } -} -.selector-8 { - font-size: 2rem ; -} -@media (max-width: 1200px) { - .selector-8 { - font-size: calc(1.325rem + 0.9vw) ; - } -} diff --git a/examples/less/node/src/main.less b/examples/less/node/src/main.less deleted file mode 100644 index ed2cc25..0000000 --- a/examples/less/node/src/main.less +++ /dev/null @@ -1,37 +0,0 @@ -@import "../../../../less"; - -.selector-1 { - background-color: #f00; - width: 300px; - .responsive-font-size(32px); -} - -.selector-2 { - .responsive-font-size(2rem); -} - -.selector-3 { - .responsive-font-size(2rem, true); -} - -.selector-4 { - .rfs(2rem); -} - -.selector-5 { - .responsive-font-size(2em); -} - -.selector-6 { - .responsive-font-size(inherit); -} - -@supports (display: flex) { - .selector-7 { - .rfs(28px); - } -} - -.selector-8 { - .responsive-font-size(32); -} diff --git a/examples/less/src/main.less b/examples/less/src/main.less new file mode 100644 index 0000000..e5d1c2a --- /dev/null +++ b/examples/less/src/main.less @@ -0,0 +1,133 @@ +@import "../../../less"; + +// responsive-font-size property with `px` unit +.selector-1 { + background-color: #f00; + width: 300px; + .font-size(32px); +} + +// responsive-font-size property with `rem` unit +.selector-2 { + .font-size(2rem); +} + +// responsive-font-size property with !important +.selector-3 { + .font-size(2rem important); +} + +// rfs shorthand +.selector-4 { + .rfs(2rem); +} + +// not supported unit +.selector-5 { + .font-size(2em); +} + +// special value +.selector-6 { + .font-size(inherit); +} + +// responsive-font-size property inside @support-query +@supports (display: flex) { + .selector-7 { + .rfs(28px); + } +} + +// responsive-font-size property without unit +.selector-8 { + .rfs(0 999 32rem, flex); +} + +// padding property +.selector-9 { + .rfs(2rem, padding); +} + +// padding shorthands +.selector-10 { + .padding(2rem); +} + +.selector-11 { + .padding-top(2rem); +} + +.selector-12 { + .padding-right(2rem); +} + +.selector-13 { + .padding-bottom(2rem); +} + +.selector-14 { + .padding-left(2rem); +} + +// margin shorthands +.selector-15 { + .margin(2rem); +} + +.selector-16 { + .margin-top(2rem); +} + +.selector-17 { + .margin-right(2rem); +} + +.selector-18 { + .margin-bottom(2rem); +} + +.selector-19 { + .margin-left(2rem); +} + +// Multiple values +.selector-20 { + .margin(2rem 3rem); +} + +// Multiple values with important +.selector-21 { + .margin(2rem 3rem important); +} + +// Zero test +.selector-22 { + .rfs(0); +} + +// Zero test +.selector-23 { + .margin(0 3rem); +} + +// Value with comma +.selector-24 { + .rfs(0 0 2rem #f00 ~"," 0 0 3rem #0f0, box-shadow); +} + +.selector-25 { + .rfs(3rem, --value); +} + +.selector-26 { + .font-size(10px); +} + +.selector-27 { + .margin(-3rem); +} + +.selector-28 { + .margin(-.5rem); +} diff --git a/examples/postcss/dest/main.css b/examples/postcss/dest/main.css new file mode 100644 index 0000000..41814d6 --- /dev/null +++ b/examples/postcss/dest/main.css @@ -0,0 +1,275 @@ +.selector-1 { + background-color: #f00; + width: 300px; + font-size: calc(1.325rem + 0.9vw); +} + +@media (min-width: 1200px) { + + .selector-1 { + font-size: 2rem; + } +} + +.selector-2 { + font-size: calc(1.325rem + 0.9vw); +} + +@media (min-width: 1200px) { + + .selector-2 { + font-size: 2rem; + } +} + +.selector-3 { + font-size: calc(1.325rem + 0.9vw) !important; +} + +@media (min-width: 1200px) { + + .selector-3 { + font-size: 2rem !important; + } +} + +.selector-4 { + font-size: calc(1.325rem + 0.9vw); +} + +@media (min-width: 1200px) { + + .selector-4 { + font-size: 2rem; + } +} + +.selector-5 { + font-size: 2em; +} + +.selector-6 { + font-size: inherit; +} + +@supports (display: flex) { + .selector-7 { + font-size: calc(1.3rem + 0.6vw); + } + @media (min-width: 1200px) { + + .selector-7 { + font-size: 1.75rem; + } + } +} + +.selector-8 { + flex: 0 999 calc(4.325rem + 36.9vw); +} + +@media (min-width: 1200px) { + + .selector-8 { + flex: 0 999 32rem; + } +} + +.selector-9 { + padding: calc(1.325rem + 0.9vw); +} + +@media (min-width: 1200px) { + + .selector-9 { + padding: 2rem; + } +} + +.selector-10 { + padding: calc(1.325rem + 0.9vw); +} + +@media (min-width: 1200px) { + + .selector-10 { + padding: 2rem; + } +} + +.selector-11 { + padding-top: calc(1.325rem + 0.9vw); +} + +@media (min-width: 1200px) { + + .selector-11 { + padding-top: 2rem; + } +} + +.selector-12 { + padding-right: calc(1.325rem + 0.9vw); +} + +@media (min-width: 1200px) { + + .selector-12 { + padding-right: 2rem; + } +} + +.selector-13 { + padding-bottom: calc(1.325rem + 0.9vw); +} + +@media (min-width: 1200px) { + + .selector-13 { + padding-bottom: 2rem; + } +} + +.selector-14 { + padding-left: calc(1.325rem + 0.9vw); +} + +@media (min-width: 1200px) { + + .selector-14 { + padding-left: 2rem; + } +} + +.selector-15 { + margin: calc(1.325rem + 0.9vw); +} + +@media (min-width: 1200px) { + + .selector-15 { + margin: 2rem; + } +} + +.selector-16 { + margin-top: calc(1.325rem + 0.9vw); +} + +@media (min-width: 1200px) { + + .selector-16 { + margin-top: 2rem; + } +} + +.selector-17 { + margin-right: calc(1.325rem + 0.9vw); +} + +@media (min-width: 1200px) { + + .selector-17 { + margin-right: 2rem; + } +} + +.selector-18 { + margin-bottom: calc(1.325rem + 0.9vw); +} + +@media (min-width: 1200px) { + + .selector-18 { + margin-bottom: 2rem; + } +} + +.selector-19 { + margin-left: calc(1.325rem + 0.9vw); +} + +@media (min-width: 1200px) { + + .selector-19 { + margin-left: 2rem; + } +} + +.selector-20 { + margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw); +} + +@media (min-width: 1200px) { + + .selector-20 { + margin: 2rem 3rem; + } +} + +.selector-21 { + margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw) !important; +} + +@media (min-width: 1200px) { + + .selector-21 { + margin: 2rem 3rem !important; + } +} + +.selector-22 { + font-size: 0; +} + +.selector-23 { + margin: 0 calc(1.425rem + 2.1vw); +} + +@media (min-width: 1200px) { + + .selector-23 { + margin: 0 3rem; + } +} + +.selector-24 { + box-shadow: 0 0 calc(1.325rem + 0.9vw) #f00, 0 0 calc(1.425rem + 2.1vw) #0f0; +} + +@media (min-width: 1200px) { + + .selector-24 { + box-shadow: 0 0 2rem #f00, 0 0 3rem #0f0; + } +} + +.selector-25 { + --value: calc(1.425rem + 2.1vw); +} + +@media (min-width: 1200px) { + + .selector-25 { + --value: 3rem; + } +} + +.selector-26 { + font-size: 0.625rem; +} + +.selector-27 { + margin: calc(-1.425rem - 2.1vw); +} + +@media (min-width: 1200px) { + + .selector-27 { + margin: -3rem; + } +} + +.selector-28 { + margin: -0.5rem; +} diff --git a/examples/postcss/gulp/dest/main.css b/examples/postcss/gulp/dest/main.css deleted file mode 100644 index 0afd3a6..0000000 --- a/examples/postcss/gulp/dest/main.css +++ /dev/null @@ -1,76 +0,0 @@ -.selector-1 { - background-color: #f00; - width: 300px; - font-size: 2rem; -} - -@media (max-width: 1200px) { - - .selector-1 { - font-size: calc(1.325rem + 0.9vw); - } -} - -.selector-2 { - font-size: 2rem; -} - -@media (max-width: 1200px) { - - .selector-2 { - font-size: calc(1.325rem + 0.9vw); - } -} - -.selector-3 { - font-size: 2rem !important; -} - -@media (max-width: 1200px) { - - .selector-3 { - font-size: calc(1.325rem + 0.9vw) !important; - } -} - -.selector-4 { - font-size: 2rem; -} - -@media (max-width: 1200px) { - - .selector-4 { - font-size: calc(1.325rem + 0.9vw); - } -} - -.selector-5 { - font-size: 2em; -} - -.selector-6 { - font-size: inherit; -} - -@supports (display: flex) { - .selector-7 { - font-size: 1.75rem; - } - @media (max-width: 1200px) { - - .selector-7 { - font-size: calc(1.3rem + 0.6vw); - } - } -} - -.selector-8 { - font-size: 2rem; -} - -@media (max-width: 1200px) { - - .selector-8 { - font-size: calc(1.325rem + 0.9vw); - } -} diff --git a/examples/postcss/gulp/src/main.css b/examples/postcss/gulp/src/main.css deleted file mode 100644 index d1027ca..0000000 --- a/examples/postcss/gulp/src/main.css +++ /dev/null @@ -1,35 +0,0 @@ -.selector-1 { - background-color: #f00; - width: 300px; - responsive-font-size: 32px; -} - -.selector-2 { - responsive-font-size: 2rem; -} - -.selector-3 { - responsive-font-size: 2rem !important; -} - -.selector-4 { - rfs: 2rem; -} - -.selector-5 { - responsive-font-size: 2em; -} - -.selector-6 { - responsive-font-size: inherit; -} - -@supports (display: flex) { - .selector-7 { - rfs: 28px; - } -} - -.selector-8 { - responsive-font-size: 32; -} diff --git a/examples/postcss/gulp/gulpfile.js b/examples/postcss/gulpfile.js index 9c56767..62bbc88 100644 --- a/examples/postcss/gulp/gulpfile.js +++ b/examples/postcss/gulpfile.js @@ -2,23 +2,22 @@ const gulp = require('gulp'); const postcss = require('gulp-postcss'); -const rfs = require('../../..'); +const rfs = require('../../postcss'); const options = { twoDimensional: false, - baseFontSize: 20, - fontSizeUnit: 'rem', + baseValue: 20, + unit: 'rem', breakpoint: 1200, breakpointUnit: 'px', factor: 10, class: false, unitPrecision: 6, safariIframeResizeBugFix: false, - remValue: 16, - propList: ['responsive-font-size', 'rfs'] + remValue: 16 }; -gulp.task('build', () => { +gulp.task('default', () => { return gulp.src('./src/main.css') .pipe(postcss([rfs(options)])) .pipe(gulp.dest('./dest')); diff --git a/examples/postcss/node/index.js b/examples/postcss/index.js index b132c26..f005f6a 100644 --- a/examples/postcss/node/index.js +++ b/examples/postcss/index.js @@ -3,19 +3,20 @@ const fs = require('fs'); const path = require('path'); const postcss = require('postcss'); -const rfs = require('../../..'); +const rfs = require('../../postcss'); const css = fs.readFileSync(path.join(__dirname, '/src/main.css'), 'utf8'); const options = { twoDimensional: false, - baseFontSize: 20, - fontSizeUnit: 'rem', - breakpoint: '75rem', + baseValue: 20, + unit: 'rem', + breakpoint: 1200, breakpointUnit: 'px', factor: 10, + class: false, unitPrecision: 6, - remValue: 16, - propList: ['responsive-font-size', 'rfs'] + safariIframeResizeBugFix: false, + remValue: 16 }; const processedCss = postcss(rfs(options)).process(css).css; @@ -24,6 +25,4 @@ fs.writeFile(path.join(__dirname, '/dest/main.css'), processedCss, err => { if (err) { throw err; } - - console.log('Responsive font sizes generated.'); }); diff --git a/examples/postcss/node/dest/main.css b/examples/postcss/node/dest/main.css deleted file mode 100644 index 0afd3a6..0000000 --- a/examples/postcss/node/dest/main.css +++ /dev/null @@ -1,76 +0,0 @@ -.selector-1 { - background-color: #f00; - width: 300px; - font-size: 2rem; -} - -@media (max-width: 1200px) { - - .selector-1 { - font-size: calc(1.325rem + 0.9vw); - } -} - -.selector-2 { - font-size: 2rem; -} - -@media (max-width: 1200px) { - - .selector-2 { - font-size: calc(1.325rem + 0.9vw); - } -} - -.selector-3 { - font-size: 2rem !important; -} - -@media (max-width: 1200px) { - - .selector-3 { - font-size: calc(1.325rem + 0.9vw) !important; - } -} - -.selector-4 { - font-size: 2rem; -} - -@media (max-width: 1200px) { - - .selector-4 { - font-size: calc(1.325rem + 0.9vw); - } -} - -.selector-5 { - font-size: 2em; -} - -.selector-6 { - font-size: inherit; -} - -@supports (display: flex) { - .selector-7 { - font-size: 1.75rem; - } - @media (max-width: 1200px) { - - .selector-7 { - font-size: calc(1.3rem + 0.6vw); - } - } -} - -.selector-8 { - font-size: 2rem; -} - -@media (max-width: 1200px) { - - .selector-8 { - font-size: calc(1.325rem + 0.9vw); - } -} diff --git a/examples/postcss/node/src/main.css b/examples/postcss/node/src/main.css deleted file mode 100644 index d1027ca..0000000 --- a/examples/postcss/node/src/main.css +++ /dev/null @@ -1,35 +0,0 @@ -.selector-1 { - background-color: #f00; - width: 300px; - responsive-font-size: 32px; -} - -.selector-2 { - responsive-font-size: 2rem; -} - -.selector-3 { - responsive-font-size: 2rem !important; -} - -.selector-4 { - rfs: 2rem; -} - -.selector-5 { - responsive-font-size: 2em; -} - -.selector-6 { - responsive-font-size: inherit; -} - -@supports (display: flex) { - .selector-7 { - rfs: 28px; - } -} - -.selector-8 { - responsive-font-size: 32; -} diff --git a/examples/postcss/src/main.css b/examples/postcss/src/main.css new file mode 100644 index 0000000..2a1db4a --- /dev/null +++ b/examples/postcss/src/main.css @@ -0,0 +1,115 @@ +.selector-1 { + background-color: #f00; + width: 300px; + font-size: rfs(32px); +} + +.selector-2 { + font-size: rfs(2rem); +} + +.selector-3 { + font-size: rfs(2rem) !important; +} + +.selector-4 { + font-size: rfs(2rem); +} + +.selector-5 { + font-size: rfs(2em); +} + +.selector-6 { + font-size: rfs(inherit); +} + +@supports (display: flex) { + .selector-7 { + font-size: rfs(28px); + } +} + +.selector-8 { + flex: rfs(0 999 32rem); +} + +.selector-9 { + 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/examples/scss/dest/main.css b/examples/scss/dest/main.css new file mode 100644 index 0000000..d8b1ad4 --- /dev/null +++ b/examples/scss/dest/main.css @@ -0,0 +1,252 @@ +.selector-1 { + background-color: #f00; + width: 300px; + font-size: calc(1.325rem + 0.9vw); +} + +@media (min-width: 1200px) { + .selector-1 { + font-size: 2rem; + } +} + +.selector-2 { + font-size: calc(1.325rem + 0.9vw); +} + +@media (min-width: 1200px) { + .selector-2 { + font-size: 2rem; + } +} + +.selector-3 { + font-size: calc(1.325rem + 0.9vw) !important; +} + +@media (min-width: 1200px) { + .selector-3 { + font-size: 2rem !important; + } +} + +.selector-4 { + font-size: calc(1.325rem + 0.9vw); +} + +@media (min-width: 1200px) { + .selector-4 { + font-size: 2rem; + } +} + +.selector-5 { + font-size: 2em; +} + +.selector-6 { + font-size: inherit; +} + +@supports (display: flex) { + .selector-7 { + font-size: calc(1.3rem + 0.6vw); + } + @media (min-width: 1200px) { + .selector-7 { + font-size: 1.75rem; + } + } +} + +.selector-8 { + flex: 0 999 calc(4.325rem + 36.9vw); +} + +@media (min-width: 1200px) { + .selector-8 { + flex: 0 999 32rem; + } +} + +.selector-9 { + padding: calc(1.325rem + 0.9vw); +} + +@media (min-width: 1200px) { + .selector-9 { + padding: 2rem; + } +} + +.selector-10 { + padding: calc(1.325rem + 0.9vw); +} + +@media (min-width: 1200px) { + .selector-10 { + padding: 2rem; + } +} + +.selector-11 { + padding-top: calc(1.325rem + 0.9vw); +} + +@media (min-width: 1200px) { + .selector-11 { + padding-top: 2rem; + } +} + +.selector-12 { + padding-right: calc(1.325rem + 0.9vw); +} + +@media (min-width: 1200px) { + .selector-12 { + padding-right: 2rem; + } +} + +.selector-13 { + padding-bottom: calc(1.325rem + 0.9vw); +} + +@media (min-width: 1200px) { + .selector-13 { + padding-bottom: 2rem; + } +} + +.selector-14 { + padding-left: calc(1.325rem + 0.9vw); +} + +@media (min-width: 1200px) { + .selector-14 { + padding-left: 2rem; + } +} + +.selector-15 { + margin: calc(1.325rem + 0.9vw); +} + +@media (min-width: 1200px) { + .selector-15 { + margin: 2rem; + } +} + +.selector-16 { + margin-top: calc(1.325rem + 0.9vw); +} + +@media (min-width: 1200px) { + .selector-16 { + margin-top: 2rem; + } +} + +.selector-17 { + margin-right: calc(1.325rem + 0.9vw); +} + +@media (min-width: 1200px) { + .selector-17 { + margin-right: 2rem; + } +} + +.selector-18 { + margin-bottom: calc(1.325rem + 0.9vw); +} + +@media (min-width: 1200px) { + .selector-18 { + margin-bottom: 2rem; + } +} + +.selector-19 { + margin-left: calc(1.325rem + 0.9vw); +} + +@media (min-width: 1200px) { + .selector-19 { + margin-left: 2rem; + } +} + +.selector-20 { + margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw); +} + +@media (min-width: 1200px) { + .selector-20 { + margin: 2rem 3rem; + } +} + +.selector-21 { + margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw) !important; +} + +@media (min-width: 1200px) { + .selector-21 { + margin: 2rem 3rem !important; + } +} + +.selector-22 { + font-size: 0; +} + +.selector-23 { + margin: 0 calc(1.425rem + 2.1vw); +} + +@media (min-width: 1200px) { + .selector-23 { + margin: 0 3rem; + } +} + +.selector-24 { + box-shadow: 0 0 calc(1.325rem + 0.9vw) #f00 , 0 0 calc(1.425rem + 2.1vw) #0f0; +} + +@media (min-width: 1200px) { + .selector-24 { + box-shadow: 0 0 2rem #f00 , 0 0 3rem #0f0; + } +} + +.selector-25 { + --value: calc(1.425rem + 2.1vw); +} + +@media (min-width: 1200px) { + .selector-25 { + --value: 3rem; + } +} + +.selector-26 { + font-size: 0.625rem; +} + +.selector-27 { + margin: calc(-1.425rem - 2.1vw); +} + +@media (min-width: 1200px) { + .selector-27 { + margin: -3rem; + } +} + +.selector-28 { + margin: -0.5rem; +} diff --git a/examples/scss/gulp/dest/main.css b/examples/scss/gulp/dest/main.css deleted file mode 100644 index 3bed4b0..0000000 --- a/examples/scss/gulp/dest/main.css +++ /dev/null @@ -1,44 +0,0 @@ -.selector-1 { - background-color: #f00; - width: 300px; - font-size: 2rem; } - @media (max-width: 1200px) { - .selector-1 { - font-size: calc(1.325rem + 0.9vw) ; } } - -.selector-2 { - font-size: 2rem; } - @media (max-width: 1200px) { - .selector-2 { - font-size: calc(1.325rem + 0.9vw) ; } } - -.selector-3 { - font-size: 2rem !important; } - @media (max-width: 1200px) { - .selector-3 { - font-size: calc(1.325rem + 0.9vw) !important; } } - -.selector-4 { - font-size: 2rem; } - @media (max-width: 1200px) { - .selector-4 { - font-size: calc(1.325rem + 0.9vw) ; } } - -.selector-5 { - font-size: 2em; } - -.selector-6 { - font-size: inherit; } - -@supports (display: flex) { - .selector-7 { - font-size: 1.75rem; } - @media (max-width: 1200px) { - .selector-7 { - font-size: calc(1.3rem + 0.6vw) ; } } } - -.selector-8 { - font-size: 2rem; } - @media (max-width: 1200px) { - .selector-8 { - font-size: calc(1.325rem + 0.9vw) ; } } diff --git a/examples/scss/gulp/src/main.scss b/examples/scss/gulp/src/main.scss deleted file mode 100644 index 5c7b744..0000000 --- a/examples/scss/gulp/src/main.scss +++ /dev/null @@ -1,37 +0,0 @@ -@import "../../../../scss"; - -.selector-1 { - background-color: #f00; - width: 300px; - @include responsive-font-size(32px); -} - -.selector-2 { - @include responsive-font-size(2rem); -} - -.selector-3 { - @include responsive-font-size(2rem, true); -} - -.selector-4 { - @include rfs(2rem); -} - -.selector-5 { - @include responsive-font-size(2em); -} - -.selector-6 { - @include responsive-font-size(inherit); -} - -@supports (display: flex) { - .selector-7 { - @include rfs(28px); - } -} - -.selector-8 { - @include responsive-font-size(32); -} diff --git a/examples/scss/gulp/gulpfile.js b/examples/scss/gulpfile.js index f46a31d..33acf36 100644 --- a/examples/scss/gulp/gulpfile.js +++ b/examples/scss/gulpfile.js @@ -3,9 +3,9 @@ const gulp = require('gulp'); const sass = require('gulp-sass'); -gulp.task('build', () => { +gulp.task('default', () => { return gulp.src('./src/**/*.scss') - .pipe(sass().on('error', sass.logError)) + .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError)) .pipe(gulp.dest('./dest')); }); diff --git a/examples/scss/node/index.js b/examples/scss/index.js index 1d7f4d5..9591bf3 100644 --- a/examples/scss/node/index.js +++ b/examples/scss/index.js @@ -6,7 +6,8 @@ const sass = require('node-sass'); sass.render({ file: path.join(__dirname, '/src/main.scss'), - outFile: path.join(__dirname, '/dest/main.css') + outFile: path.join(__dirname, '/dest/main.css'), + outputStyle: 'expanded' }, (error, result) => { // Node-style callback from v3.0.0 onwards if (error) { throw error; @@ -17,8 +18,6 @@ sass.render({ if (err) { throw err; } - - console.log('Responsive font sizes generated.'); }); } ); diff --git a/examples/scss/node/dest/main.css b/examples/scss/node/dest/main.css deleted file mode 100644 index 3bed4b0..0000000 --- a/examples/scss/node/dest/main.css +++ /dev/null @@ -1,44 +0,0 @@ -.selector-1 { - background-color: #f00; - width: 300px; - font-size: 2rem; } - @media (max-width: 1200px) { - .selector-1 { - font-size: calc(1.325rem + 0.9vw) ; } } - -.selector-2 { - font-size: 2rem; } - @media (max-width: 1200px) { - .selector-2 { - font-size: calc(1.325rem + 0.9vw) ; } } - -.selector-3 { - font-size: 2rem !important; } - @media (max-width: 1200px) { - .selector-3 { - font-size: calc(1.325rem + 0.9vw) !important; } } - -.selector-4 { - font-size: 2rem; } - @media (max-width: 1200px) { - .selector-4 { - font-size: calc(1.325rem + 0.9vw) ; } } - -.selector-5 { - font-size: 2em; } - -.selector-6 { - font-size: inherit; } - -@supports (display: flex) { - .selector-7 { - font-size: 1.75rem; } - @media (max-width: 1200px) { - .selector-7 { - font-size: calc(1.3rem + 0.6vw) ; } } } - -.selector-8 { - font-size: 2rem; } - @media (max-width: 1200px) { - .selector-8 { - font-size: calc(1.325rem + 0.9vw) ; } } diff --git a/examples/scss/node/src/main.scss b/examples/scss/node/src/main.scss deleted file mode 100644 index 5c7b744..0000000 --- a/examples/scss/node/src/main.scss +++ /dev/null @@ -1,37 +0,0 @@ -@import "../../../../scss"; - -.selector-1 { - background-color: #f00; - width: 300px; - @include responsive-font-size(32px); -} - -.selector-2 { - @include responsive-font-size(2rem); -} - -.selector-3 { - @include responsive-font-size(2rem, true); -} - -.selector-4 { - @include rfs(2rem); -} - -.selector-5 { - @include responsive-font-size(2em); -} - -.selector-6 { - @include responsive-font-size(inherit); -} - -@supports (display: flex) { - .selector-7 { - @include rfs(28px); - } -} - -.selector-8 { - @include responsive-font-size(32); -} diff --git a/examples/scss/src/main.scss b/examples/scss/src/main.scss new file mode 100644 index 0000000..8e7250f --- /dev/null +++ b/examples/scss/src/main.scss @@ -0,0 +1,137 @@ +@import "../../../scss"; + +// font-size property with `px` unit +.selector-1 { + background-color: #f00; + width: 300px; + @include font-size(32px); +} + +// font-size property with `rem` unit +.selector-2 { + @include font-size(2rem); +} + +// font-size property with !important +.selector-3 { + @include font-size(2rem !important); +} + +// rfs shorthand +.selector-4 { + @include rfs(2rem); +} + +// not supported unit +.selector-5 { + @include font-size(2em); +} + +// special value +.selector-6 { + @include font-size(inherit); +} + +// font-size property inside @support-query +@supports (display: flex) { + .selector-7 { + @include rfs(28px); + } +} + +// flex property with unitless values +.selector-8 { + @include rfs(0 999 32rem, flex); +} + +// padding property +.selector-9 { + @include rfs(2rem, $property: padding); +} + +// padding shorthands +.selector-10 { + @include padding(2rem); +} + +.selector-11 { + @include padding-top(2rem); +} + +.selector-12 { + @include padding-right(2rem); +} + +.selector-13 { + @include padding-bottom(2rem); +} + +.selector-14 { + @include padding-left(2rem); +} + +// margin shorthands +.selector-15 { + @include margin(2rem); +} + +.selector-16 { + @include margin-top(2rem); +} + +.selector-17 { + @include margin-right(2rem); +} + +.selector-18 { + @include margin-bottom(2rem); +} + +.selector-19 { + @include margin-left(2rem); +} + +// Multiple values +.selector-20 { + @include margin(2rem 3rem); +} + +// Multiple values with important +.selector-21 { + @include margin(2rem 3rem !important); +} + +// Zero test +.selector-22 { + @include rfs(0); +} + +// Zero combination test +.selector-23 { + @include margin(0 3rem); +} + +// Value with comma +.selector-24 { + @include rfs(0 0 2rem #f00 #{","} 0 0 3rem #0f0, box-shadow); +} + +// Custom properties +.selector-25 { + @include rfs(3rem, --value); +} + +// Test small value +.selector-26 { + @include font-size(10px); +} + +// Negative units +.selector-27 { + @include margin(-3rem); +} + +// Small negative unit +.selector-28 { + @include margin(-.5rem); +} diff --git a/examples/stylus/dest/main.css b/examples/stylus/dest/main.css new file mode 100644 index 0000000..da6e0f6 --- /dev/null +++ b/examples/stylus/dest/main.css @@ -0,0 +1,203 @@ +.selector-1 { + background-color: #f00; + width: 300px; + font-size: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-1 { + font-size: 2rem; + } +} +.selector-2 { + font-size: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-2 { + font-size: 2rem; + } +} +.selector-3 { + font-size: calc(1.325rem + 0.9vw) !important; +} +@media (min-width: 1200px) { + .selector-3 { + font-size: 2rem !important; + } +} +.selector-4 { + font-size: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-4 { + font-size: 2rem; + } +} +.selector-5 { + font-size: 2em; +} +.selector-6 { + font-size: inherit; +} +@supports (display: flex) { + .selector-7 { + font-size: calc(1.3rem + 0.6vw); + } +@media (min-width: 1200px) { + .selector-7 { + font-size: 1.75rem; + } +} +} +.selector-8 { + flex: 0 999 calc(4.325rem + 36.9vw); +} +@media (min-width: 1200px) { + .selector-8 { + flex: 0 999 32rem; + } +} +.selector-9 { + padding: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-9 { + padding: 2rem; + } +} +.selector-10 { + padding: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-10 { + padding: 2rem; + } +} +.selector-11 { + padding-top: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-11 { + padding-top: 2rem; + } +} +.selector-12 { + padding-right: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-12 { + padding-right: 2rem; + } +} +.selector-13 { + padding-bottom: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-13 { + padding-bottom: 2rem; + } +} +.selector-14 { + padding-left: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-14 { + padding-left: 2rem; + } +} +.selector-15 { + margin: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-15 { + margin: 2rem; + } +} +.selector-16 { + margin-top: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-16 { + margin-top: 2rem; + } +} +.selector-17 { + margin-right: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-17 { + margin-right: 2rem; + } +} +.selector-18 { + margin-bottom: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-18 { + margin-bottom: 2rem; + } +} +.selector-19 { + margin-left: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-19 { + margin-left: 2rem; + } +} +.selector-20 { + margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw); +} +@media (min-width: 1200px) { + .selector-20 { + margin: 2rem 3rem; + } +} +.selector-21 { + margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw) !important; +} +@media (min-width: 1200px) { + .selector-21 { + margin: 2rem 3rem !important; + } +} +.selector-22 { + font-size: 0; +} +.selector-23 { + margin: 0 calc(1.425rem + 2.1vw); +} +@media (min-width: 1200px) { + .selector-23 { + margin: 0 3rem; + } +} +.selector-24 { + box-shadow: 0 0 calc(1.325rem + 0.9vw) #f00 , 0 0 calc(1.425rem + 2.1vw) #0f0; +} +@media (min-width: 1200px) { + .selector-24 { + box-shadow: 0 0 2rem #f00 , 0 0 3rem #0f0; + } +} +.selector-25 { + --value: calc(1.425rem + 2.1vw); +} +@media (min-width: 1200px) { + .selector-25 { + --value: 3rem; + } +} +.selector-26 { + font-size: 0.625rem; +} +.selector-27 { + margin: calc(-1.425rem - 2.1vw); +} +@media (min-width: 1200px) { + .selector-27 { + margin: -3rem; + } +} +.selector-28 { + margin: -0.5rem; +} diff --git a/examples/stylus/gulp/dest/main.css b/examples/stylus/gulp/dest/main.css deleted file mode 100644 index 11ac0f3..0000000 --- a/examples/stylus/gulp/dest/main.css +++ /dev/null @@ -1,58 +0,0 @@ -.selector-1 { - background-color: #f00; - width: 300px; - font-size: 2rem; -} -@media (max-width: 1200px) { - .selector-1 { - font-size: calc(1.325rem + 0.9vw); - } -} -.selector-2 { - font-size: 2rem; -} -@media (max-width: 1200px) { - .selector-2 { - font-size: calc(1.325rem + 0.9vw); - } -} -.selector-3 { - font-size: 2rem !important; -} -@media (max-width: 1200px) { - .selector-3 { - font-size: calc(1.325rem + 0.9vw)!important; - } -} -.selector-4 { - font-size: 2rem; -} -@media (max-width: 1200px) { - .selector-4 { - font-size: calc(1.325rem + 0.9vw); - } -} -.selector-5 { - font-size: 2em; -} -.selector-6 { - font-size: inherit; -} -@supports (display: flex) { - .selector-7 { - font-size: 1.75rem; - } -@media (max-width: 1200px) { - .selector-7 { - font-size: calc(1.3rem + 0.6vw); - } -} -} -.selector-8 { - font-size: 2rem; -} -@media (max-width: 1200px) { - .selector-8 { - font-size: calc(1.325rem + 0.9vw); - } -} diff --git a/examples/stylus/gulp/src/main.styl b/examples/stylus/gulp/src/main.styl deleted file mode 100644 index 0a1c728..0000000 --- a/examples/stylus/gulp/src/main.styl +++ /dev/null @@ -1,27 +0,0 @@ -@import "../../../../stylus" -.selector-1 - background-color: #f00 - width: 300px - responsive-font-size(32px) - -.selector-2 - responsive-font-size(2rem) - -.selector-3 - responsive-font-size(2rem, true) - -.selector-4 - rfs(2rem) - -.selector-5 - responsive-font-size(2em) - -.selector-6 - responsive-font-size(inherit) - -@supports (display: flex) - .selector-7 - rfs(28px) - -.selector-8 - responsive-font-size(32) diff --git a/examples/stylus/gulp/gulpfile.js b/examples/stylus/gulpfile.js index 3ea42bd..abde6d4 100644 --- a/examples/stylus/gulp/gulpfile.js +++ b/examples/stylus/gulpfile.js @@ -3,7 +3,7 @@ const gulp = require('gulp'); const stylus = require('gulp-stylus'); -gulp.task('build', () => { +gulp.task('default', () => { return gulp.src('./src/**/*.styl') .pipe(stylus()) .pipe(gulp.dest('./dest')); diff --git a/examples/stylus/node/index.js b/examples/stylus/index.js index b139adf..8ab8f13 100644 --- a/examples/stylus/node/index.js +++ b/examples/stylus/index.js @@ -17,7 +17,5 @@ stylus.render(str, { if (err) { throw err; } - - console.log('Responsive font sizes generated.'); }); }); diff --git a/examples/stylus/node/dest/main.css b/examples/stylus/node/dest/main.css deleted file mode 100644 index 11ac0f3..0000000 --- a/examples/stylus/node/dest/main.css +++ /dev/null @@ -1,58 +0,0 @@ -.selector-1 { - background-color: #f00; - width: 300px; - font-size: 2rem; -} -@media (max-width: 1200px) { - .selector-1 { - font-size: calc(1.325rem + 0.9vw); - } -} -.selector-2 { - font-size: 2rem; -} -@media (max-width: 1200px) { - .selector-2 { - font-size: calc(1.325rem + 0.9vw); - } -} -.selector-3 { - font-size: 2rem !important; -} -@media (max-width: 1200px) { - .selector-3 { - font-size: calc(1.325rem + 0.9vw)!important; - } -} -.selector-4 { - font-size: 2rem; -} -@media (max-width: 1200px) { - .selector-4 { - font-size: calc(1.325rem + 0.9vw); - } -} -.selector-5 { - font-size: 2em; -} -.selector-6 { - font-size: inherit; -} -@supports (display: flex) { - .selector-7 { - font-size: 1.75rem; - } -@media (max-width: 1200px) { - .selector-7 { - font-size: calc(1.3rem + 0.6vw); - } -} -} -.selector-8 { - font-size: 2rem; -} -@media (max-width: 1200px) { - .selector-8 { - font-size: calc(1.325rem + 0.9vw); - } -} diff --git a/examples/stylus/node/src/main.styl b/examples/stylus/node/src/main.styl deleted file mode 100644 index 0a1c728..0000000 --- a/examples/stylus/node/src/main.styl +++ /dev/null @@ -1,27 +0,0 @@ -@import "../../../../stylus" -.selector-1 - background-color: #f00 - width: 300px - responsive-font-size(32px) - -.selector-2 - responsive-font-size(2rem) - -.selector-3 - responsive-font-size(2rem, true) - -.selector-4 - rfs(2rem) - -.selector-5 - responsive-font-size(2em) - -.selector-6 - responsive-font-size(inherit) - -@supports (display: flex) - .selector-7 - rfs(28px) - -.selector-8 - responsive-font-size(32) diff --git a/examples/stylus/src/main.styl b/examples/stylus/src/main.styl new file mode 100644 index 0000000..245037c --- /dev/null +++ b/examples/stylus/src/main.styl @@ -0,0 +1,88 @@ +@import "../../../stylus" + +.selector-1 + background-color: #f00 + width: 300px + rfs(32px) + +.selector-2 + rfs(2rem) + +.selector-3 + rfs(2rem !important) + +.selector-4 + rfs(2rem) + +.selector-5 + rfs(2em) + +.selector-6 + rfs(inherit) + +@supports (display: flex) + .selector-7 + rfs(28px) + +.selector-8 + rfs(0 999 32rem, flex) + +.selector-9 + rfs(2rem, padding) + +.selector-10 + rfs-padding(2rem) + +.selector-11 + rfs-padding-top(2rem) + +.selector-12 + rfs-padding-right(2rem) + +.selector-13 + rfs-padding-bottom(2rem) + +.selector-14 + rfs-padding-left(2rem) + +.selector-15 + rfs-margin(2rem) + +.selector-16 + rfs-margin-top(2rem) + +.selector-17 + rfs-margin-right(2rem) + +.selector-18 + rfs-margin-bottom(2rem) + +.selector-19 + rfs-margin-left(2rem) + +.selector-20 + rfs-margin(2rem 3rem) + +.selector-21 + rfs-margin(2rem 3rem !important) + +.selector-22 + rfs(0) + +.selector-23 + rfs-margin(0 3rem) + +.selector-24 + rfs(0 0 2rem #f00\, 0 0 3rem #0f0, box-shadow) + +.selector-25 + rfs(3rem, --value) + +.selector-26 + rfs-font-size(10px) + +.selector-27 + rfs-margin(-3rem) + +.selector-28 + rfs-margin(-.5rem) @@ -1,25 +1,28 @@ // Less RFS mixin // -// Automated font-resizing +// Automated responsive values for for font sizes, paddings, margins and much more // // See https://github.com/twbs/rfs // Configuration -// Base font size -@rfs-base-font-size: 1.25rem; -@rfs-font-size-unit: rem; +// Base value +@rfs-base-value: 1.25rem; +@rfs-unit: rem; -// Breakpoint at where font-size starts decreasing if screen width is smaller +// Breakpoint at where value stops increasing @rfs-breakpoint: 1200px; @rfs-breakpoint-unit: px; -// Resize font-size based on screen height and width +// Resize value based on screen height and width @rfs-two-dimensional: false; // Factor of decrease @rfs-factor: 10; +// Mode. Possibilities: "min-media-query", "max-media-query" +@rfs-mode: "min-media-query"; + // Generate enable or disable classes. Possibilities: false, "enable" or "disable" @rfs-class: false; @@ -29,212 +32,208 @@ // Safari iframe resize bug: https://github.com/twbs/rfs/issues/14 @rfs-safari-iframe-resize-bug-fix: false; -// Disable RFS by setting @enable-responsive-font-sizes to false -@enable-responsive-font-sizes: true; +// Disable RFS by setting @enable-rfs to false +@enable-rfs: true; -// Responsive font-size mixin -.rfs(@fs, @important: false) { +// RFS mixin +.rfs(@values, @property: font-size) { + ._rfs-calculate(1, ~"", ~""); +} - & when (not(@important)) { - ._rfs-prefix(@fs, ~""); - } +// Recursive calculate mixin +._rfs-calculate(@index, @valueResult, @fluidValueResult) { - & when (@important) { - ._rfs-prefix(@fs, ~" !important"); - } -} + & when (@index <= length(@values)) { + @currentValue: if(extract(@values, @index) = important, ~"!important" , extract(@values, @index)); + @space: if(@index = length(@values), ~"", ~" "); -._rfs-prefix(@fs, @suffix) { + & when (not(isunit(@currentValue, px)) and not(isunit(@currentValue, rem))) { + ._rfs-calculate((@index + 1), ~"@{valueResult}@{currentValue}@{space}", ~"@{fluidValueResult}@{currentValue}@{space}"); + } - & when ((not(isunit(@fs, px)) and not(isunit(@fs, rem)) and not((isnumber(@fs)) and (get-unit(@fs) = ~""))) or (@fs = 0)) { - font-size: @fs @suffix; - } + & when ((isunit(@currentValue, px)) or (isunit(@currentValue, rem))) { + @val: if(isunit(@currentValue, rem), unit(@currentValue * @rfs-rem-value), unit(@currentValue)); - & when (((isnumber(@fs)) and (get-unit(@fs) = ~"")) or (isunit(@fs, px)) or (isunit(@fs, rem))) { - ._rfs-render-base(@fs, @suffix); - } -} + // Remove unit if zero + @value-unit: if(@val = 0, ~"", @rfs-unit); -._rfs-render-base(@fs, @suffix) { + @renderedValue: unit(if(@rfs-unit = px, @val, @val / @rfs-rem-value), @value-unit); - & when ((isnumber(@fs)) and (get-unit(@fs) = ~"")) { - ._rfs-render-base-number(@fs, @suffix); - ._rfs-render-media-query(@fs, @suffix); - } + @rfs-min: if(isunit(@rfs-base-value, rem), unit(@rfs-base-value * @rfs-rem-value), unit(@rfs-base-value)); - & when ((isunit(@fs, px))) { - ._rfs-render-base-number(unit(@fs), @suffix); - ._rfs-render-media-query(unit(@fs), @suffix); - } + & when (not((abs(@val) > @rfs-min) and (@rfs-factor > 1) and (@enable-rfs = true))) { + ._rfs-calculate((@index + 1), ~"@{valueResult}@{renderedValue}@{space}", ~"@{fluidValueResult}@{renderedValue}@{space}"); + } - & when ((isunit(@fs, rem))) { - ._rfs-render-base-number(unit(@fs/.0625), @suffix); - ._rfs-render-media-query(unit(@fs/.0625), @suffix); - } -} + & when ((abs(@val) > @rfs-min) and (@rfs-factor > 1) and (@enable-rfs = true)) { -._rfs-render-media-query(@fs, @suffix) { - & when ((@fs > @rfs-base-font-size) and (@rfs-factor > 1) and (@enable-responsive-font-sizes = true)) { + @breakpoint: if(isunit(@rfs-breakpoint, em) or isunit(@rfs-breakpoint, rem), unit(@rfs-breakpoint * @rfs-rem-value), unit(@rfs-breakpoint)); + @max-width: unit(if(@rfs-breakpoint-unit = px, @breakpoint, @breakpoint / @rfs-rem-value), @rfs-breakpoint-unit); - & when ((isnumber(@rfs-breakpoint)) and (get-unit(@rfs-breakpoint) = ~"")) { - ._rfs-render-media-query-breakpoint(@fs, @suffix, @rfs-breakpoint); - } + // Calculate minimum value + @value-min: @rfs-min + (abs(@val) - @rfs-min) / @rfs-factor; - & when ((isunit(@rfs-breakpoint, px))) { - ._rfs-render-media-query-breakpoint(@fs, @suffix, unit(@rfs-breakpoint)); - } + // Calculate difference between @val and the minimum value + // Rounding needed to prevent rounding errors + @value-variable-width: unit(round((abs(@val) - @value-min) / (@breakpoint / 100), 15), if(@rfs-two-dimensional, vmin, vw)); - & when ((isunit(@rfs-breakpoint, rem))) { - ._rfs-render-media-query-breakpoint(@fs, @suffix, unit(@rfs-breakpoint * @rfs-rem-value)); - } + & when (@val > 0) { + @renderedFluidValue: calc(unit(if(@rfs-unit = px, @value-min, @value-min / @rfs-rem-value), @rfs-unit) ~"+" @value-variable-width); + ._rfs-calculate((@index + 1), ~"@{valueResult}@{renderedValue}@{space}", ~"@{fluidValueResult}@{renderedFluidValue}@{space}"); + } - & when ((isunit(@rfs-breakpoint, em))) { - ._rfs-render-media-query-breakpoint(@fs, @suffix, unit(@rfs-breakpoint * @rfs-rem-value)); + & when (@val < 0) { + @renderedFluidValue: calc(unit(if(@rfs-unit = px, -@value-min, -@value-min / @rfs-rem-value), @rfs-unit) ~"-" @value-variable-width); + ._rfs-calculate((@index + 1), ~"@{valueResult}@{renderedValue}@{space}", ~"@{fluidValueResult}@{renderedFluidValue}@{space}"); + } + } } } -} -._rfs-render-media-query-breakpoint(@fs, @suffix, @breakpoint) { - & when (@rfs-two-dimensional) { - ._rfs-render-media-query-two-dimensional(@fs, @suffix, @breakpoint); - } - & when (not(@rfs-two-dimensional)) { - ._rfs-render-media-query-one-dimension(@fs, @suffix, @breakpoint); - } -} + & when (@index > length(@values)) { + @fluidValue: @fluidValueResult; -._rfs-render-media-query-one-dimension(@fs, @suffix, @breakpoint) { - & when (@rfs-breakpoint-unit = px) { - @media (max-width: unit(@breakpoint, px)) { - ._rfs-render-media-query-content(@fs, @suffix, @breakpoint); + & when (@valueResult = @fluidValueResult) { + @{property}: @valueResult; } - } - & when (@rfs-breakpoint-unit = rem) { - @media (max-width: unit((@breakpoint / @rfs-rem-value), rem)) { - ._rfs-render-media-query-content(@fs, @suffix, @breakpoint); + & when (not(@valueResult = @fluidValueResult)) { + + & when (@rfs-class = "disable") and (@rfs-mode = "max-media-query") { + &, + .disable-rfs &, + &.disable-rfs { + @{property}: @valueResult; + } + } + + & when (@rfs-class = "enable") and (@rfs-mode = "min-media-query") { + @{property}: @valueResult; + + .enable-rfs &, + &.enable-rfs { + @{property}: @fluidValue; + } + } + + & when (not((@rfs-class = "disable") and (@rfs-mode = "max-media-query"))) and not((@rfs-class = "enable") and (@rfs-mode = "min-media-query")) { + @{property}: if(@rfs-mode = "min-media-query", @fluidValue, @valueResult); + } + + // Media query + & when (@rfs-class = "enable") { + .enable-rfs &, + &.enable-rfs { + ._rfs-render-media-query(); + } + } + + & when (@rfs-class = "disable") and (@rfs-mode = "min-media-query") { + .disable-rfs &, + &.disable-rfs { + @{property}: @valueResult; + } + + ._rfs-render-media-query(); + } + + & when (not(@rfs-class = "enable")) and not(@rfs-class = "disable") { + ._rfs-render-media-query(); + } + + & when ((@rfs-safari-iframe-resize-bug-fix)) { + // stylelint-disable-next-line length-zero-no-unit + min-width: 0vw; + } } } +} - & when (@rfs-breakpoint-unit = em) { - @media (max-width: unit((@breakpoint / @rfs-rem-value), em)) { - ._rfs-render-media-query-content(@fs, @suffix, @breakpoint); +._rfs-render-media-query () { + & when (@rfs-two-dimensional) { + & when (@rfs-mode = "min-media-query") { + @media (min-width: @max-width), (min-height: @max-width) { + @{property}: @valueResult; + } } - } -} -._rfs-render-media-query-two-dimensional(@fs, @suffix, @breakpoint) { - & when (@rfs-breakpoint-unit = px) { - @media (max-width: unit(@breakpoint, px)), (max-height: unit(@breakpoint, px)) { - ._rfs-render-media-query-content(@fs, @suffix, @breakpoint); + & when (@rfs-mode = "max-media-query") { + @media (max-width: @max-width), (max-height: @max-width) { + @{property}: @fluidValue; + } } } - & when (@rfs-breakpoint-unit = rem) { - @media (max-width: unit((@breakpoint / @rfs-rem-value), rem)), (max-height: unit((@breakpoint / @rfs-rem-value), rem)) { - ._rfs-render-media-query-content(@fs, @suffix, @breakpoint); + & when (not(@rfs-two-dimensional)) { + & when (@rfs-mode = "min-media-query") { + @media (min-width: @max-width) { + @{property}: @valueResult; + } } - } - & when (@rfs-breakpoint-unit = em) { - @media (max-width: unit((@breakpoint / @rfs-rem-value), em)), (max-height: unit((@breakpoint / @rfs-rem-value), em)) { - ._rfs-render-media-query-content(@fs, @suffix, @breakpoint); + & when (@rfs-mode = "max-media-query") { + @media (max-width: @max-width) { + @{property}: @fluidValue; + } } } } -._rfs-render-media-query-content(@fs, @suffix, @breakpoint) { - & when ((isnumber(@rfs-base-font-size)) and (get-unit(@rfs-base-font-size) = ~"")) { - ._rfs-render-media-query-content-dimensional(@fs, @suffix, @rfs-base-font-size, @breakpoint); - } +._rfs-render-media-query-content() { - & when ((isunit(@rfs-base-font-size, px))) { - ._rfs-render-media-query-content-dimensional(@fs, @suffix, unit(@rfs-base-font-size), @breakpoint); - } - - & when ((isunit(@rfs-base-font-size, rem))) { - ._rfs-render-media-query-content-dimensional(@fs, @suffix, unit(@rfs-base-font-size * @rfs-rem-value), @breakpoint); + & when (@rfs-class = "enable") { + .enable-rfs &, + &.enable-rfs { + @{property}: if(@rfs-mode = "min-media-query", @valueResult, @fluidValue); + } } - & when (@rfs-safari-iframe-resize-bug-fix) { - // stylelint-disable-next-line length-zero-no-unit - min-width: 0vw; + & when (not(@rfs-class = "enable")) { + @{property}: if(@rfs-mode = "min-media-query", @valueResult, @fluidValue); } } -._rfs-render-media-query-content-dimensional(@fs, @suffix, @rfs-min, @breakpoint) { - & when (@rfs-two-dimensional) { - // Calculate base font-size for given font-size - @fs-min: @rfs-min + (@fs - @rfs-min) / @rfs-factor; - // Calculate difference between given font-size and base font-size for given font-size - @fs-variable-width: unit((@fs - @fs-min) / (@breakpoint / 100), vmin); - ._rfs-render-enable-class(@fs-min, @fs-variable-width, @suffix); - } - - & when (not(@rfs-two-dimensional)) { - // Calculate base font-size for given font-size - @fs-min: @rfs-min + (@fs - @rfs-min) / @rfs-factor; - // Calculate difference between given font-size and base font-size for given font-size - @fs-variable-width: unit((@fs - @fs-min) / (@breakpoint / 100), vw); - ._rfs-render-enable-class(@fs-min, @fs-variable-width, @suffix); - } +// Sharthand mixins +.font-size(@value) { + .rfs(@value); } -._rfs-render-fluid(@fs-min, @fs-variable-width, @suffix) { - - & when (@rfs-font-size-unit = px) { - font-size: calc(unit(@fs-min, px) ~"+" @fs-variable-width) @suffix; - } - - & when (@rfs-font-size-unit = rem) { - font-size: calc(unit(@fs-min / @rfs-rem-value, rem) ~"+" @fs-variable-width) @suffix; - } +.padding(@value, @property: padding) { + .rfs(@value, @property); } -._rfs-render-enable-class(@fs-min, @fs-variable-width, @suffix) { - - & when (@rfs-class = "enable") { - .enable-responsive-font-size &, - &.enable-responsive-font-size { - ._rfs-render-fluid(@fs-min, @fs-variable-width, @suffix); - } - } +.padding-top(@value, @property: padding-top) { + .rfs(@value, @property); +} - & when (not(@rfs-class = "enable")) { - ._rfs-render-fluid(@fs-min, @fs-variable-width, @suffix); - } +.padding-right(@value, @property: padding-right) { + .rfs(@value, @property); } -._rfs-render-base-declaration(@fs, @suffix) { +.padding-bottom(@value, @property: padding-bottom) { + .rfs(@value, @property); +} - & when (@rfs-font-size-unit = px) { - font-size: unit(@fs, px) @suffix; - } +.padding-left(@value, @property: padding-left) { + .rfs(@value, @property); +} - & when (@rfs-font-size-unit = rem) { - font-size: unit((@fs / @rfs-rem-value), rem) @suffix; - } +.margin(@value, @property: margin) { + .rfs(@value, @property); } -._rfs-render-base-number(@fs, @suffix) { - & when (@rfs-class = "disable") { - &, - .disable-responsive-font-size &, - &.disable-responsive-font-size { - ._rfs-render-base-declaration(@fs, @suffix); - } - } +.margin-top(@value, @property: margin-top) { + .rfs(@value, @property); +} - & when (not(@rfs-class = "disable")) { - ._rfs-render-base-declaration(@fs, @suffix); - } +.margin-right(@value, @property: margin-right) { + .rfs(@value, @property); } -// The font-size & responsive-font-size mixins use RFS to rescale font sizes -.font-size(@fs, @important: false) { - .rfs(@fs, @important); +.margin-bottom(@value, @property: margin-bottom) { + .rfs(@value, @property); } -.responsive-font-size(@fs, @important: false) { - .rfs(@fs, @important); +.margin-left(@value, @property: margin-left) { + .rfs(@value, @property); } diff --git a/lib/rfs.js b/lib/rfs.js new file mode 100644 index 0000000..3cae1ee --- /dev/null +++ b/lib/rfs.js @@ -0,0 +1,163 @@ +const postcss = require('postcss'); +const valueParser = require('postcss-value-parser'); + +const BREAKPOINT_ERROR = 'breakpoint option is invalid, it should be set in `px`, `rem` or `em`.'; +const BREAKPOINT_UNIT_ERROR = 'breakpointUnit option is invalid, it should be `px`, `rem` or `em`.'; +const BASE_RFS_ERROR = 'baseValue option is invalid, it should be set in `px` or `rem`.'; + +module.exports = class { + constructor(opts) { + const defaultOptions = { + baseValue: 20, + unit: 'rem', + breakpoint: 1200, + breakpointUnit: 'px', + factor: 10, + twoDimensional: false, + unitPrecision: 5, + remValue: 16, + functionName: 'rfs', + enableRfs: true, + mode: 'min-media-query' + }; + + this.opts = Object.assign(defaultOptions, opts); + + if (typeof this.opts.baseValue !== 'number') { + if (this.opts.baseValue.endsWith('px')) { + this.opts.baseValue = parseFloat(this.opts.baseValue); + } else if (this.opts.baseValue.endsWith('rem')) { + this.opts.baseValue = parseFloat(this.opts.baseValue) / this.opts.remValue; + } else { + console.error(BASE_RFS_ERROR); + } + } + + if (typeof this.opts.breakpoint !== 'number') { + if (this.opts.breakpoint.endsWith('px')) { + this.opts.breakpoint = parseFloat(this.opts.breakpoint); + } else if (this.opts.breakpoint.endsWith('em')) { + this.opts.breakpoint = parseFloat(this.opts.breakpoint) * this.opts.remValue; + } else { + console.error(BREAKPOINT_ERROR); + } + } + + if (!['px', 'rem', 'em'].includes(this.opts.breakpointUnit)) { + console.error(BREAKPOINT_UNIT_ERROR); + } + } + + toFixed(number, precision) { + const multiplier = Math.pow(10, precision + 1); + const wholeNumber = Math.floor(number * multiplier); + + return Math.round(wholeNumber / 10) * 10 / multiplier; + } + + renderValue(value) { + // Do not add unit if value is 0 + if (value === 0) { + return value; + } + + // Render value in desired unit + if (this.opts.unit === 'rem') { + return `${this.toFixed(value / this.opts.remValue, this.opts.unitPrecision)}rem`; + } + + return `${this.toFixed(value, this.opts.unitPrecision)}px`; + } + + process(declarationValue, fluid) { + const parsed = valueParser(declarationValue); + + // Function walk() will visit all the of the nodes in the tree, + // invoking the callback for each. + parsed.walk(node => { + // Since we only want to transform rfs() values, + // we can ignore anything else. + if (node.type !== 'function' && node.value !== this.opts.functionName) { + return; + } + + node.nodes.filter(node => node.type === 'word').forEach(node => { + node.value = node.value.replace(/^(-?\d*\.?\d+)(.*)/g, (match, value, unit) => { + value = parseFloat(value); + + // Return value if it's not a number or px/rem value + if (isNaN(value) || !['px', 'rem'].includes(unit)) { + return match; + } + + // Multiply by remValue if value is in rem + if (unit === 'rem') { + value *= this.opts.remValue; + } + + // Only add responsive function if needed + if (!fluid || this.opts.baseValue >= Math.abs(value) || this.opts.factor <= 1 || !this.opts.enableRfs) { + return this.renderValue(value); + } + + // Calculate base and difference + let baseValue = this.opts.baseValue + ((Math.abs(value) - this.opts.baseValue) / this.opts.factor); + const diff = Math.abs(value) - baseValue; + + // Divide by remValue if needed + if (this.opts.unit === 'rem') { + baseValue /= this.opts.remValue; + } + + const viewportUnit = this.opts.twoDimensional ? 'vmin' : 'vw'; + if (value > 0) { + return `calc(${this.toFixed(baseValue, this.opts.unitPrecision)}${this.opts.unit} + ${this.toFixed(diff * 100 / this.opts.breakpoint, this.opts.unitPrecision)}${viewportUnit})`; + } + + return `calc(-${this.toFixed(baseValue, this.opts.unitPrecision)}${this.opts.unit} - ${this.toFixed(diff * 100 / this.opts.breakpoint, this.opts.unitPrecision)}${viewportUnit})`; + }); + }); + + // Now we will transform the existing rgba() function node + // into a word node with the hex value + node.type = 'word'; + node.value = valueParser.stringify(node.nodes); + }); + + return parsed.toString(); + } + + // Return the value without `rfs()` function + // eg. `4px rfs(32px)` => `.25rem 2rem` + value(value) { + return this.process(value, false); + } + + // Convert `rfs()` function to fluid css + // eg. `4px rfs(32px)` => `.25rem calc(1.325rem + 0.9vw)` + fluidValue(value) { + return this.process(value, true); + } + + renderMediaQuery() { + const mediaQuery = { + name: 'media' + }; + + const dimPrefix = (this.opts.mode === 'min-media-query') ? 'min' : 'max'; + const breakpoint = (this.opts.breakpointUnit === 'px') ? this.opts.breakpoint : this.opts.breakpoint / this.opts.remValue; + + if (this.opts.twoDimensional) { + mediaQuery.params = `(${dimPrefix}-width: ${breakpoint}${this.opts.breakpointUnit}), (${dimPrefix}-height: ${breakpoint}${this.opts.breakpointUnit})`; + } else { + mediaQuery.params = `(${dimPrefix}-width: ${breakpoint}${this.opts.breakpointUnit})`; + } + + return postcss.atRule(mediaQuery); + } + + getOptions() { + return this.opts; + } +}; + diff --git a/package-lock.json b/package-lock.json index 64278b5..f600847 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7140,10 +7140,9 @@ "dev": true }, "postcss-value-parser": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", - "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", - "dev": true + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.1.tgz", + "integrity": "sha512-3Jk+/CVH0HBfgSSFWALKm9Hyzf4kumPjZfUxkRYZNcqFztELb2APKxv0nlX8HCdc1/ymePmT/nFf1ST6fjWH2A==" }, "prelude-ls": { "version": "1.1.2", @@ -8483,6 +8482,12 @@ "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", "dev": true }, + "postcss-value-parser": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", + "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", + "dev": true + }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", diff --git a/package.json b/package.json index a268d92..3e629af 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "rfs", "version": "8.0.4", "main": "postcss.js", - "description": "Powerful & easy-to-use responsive font sizing engine.", + "description": "Powerful & easy-to-use responsive resizing engine.", "author": "Martijn Cuppens <martijn.cuppens@gmail.com>", "license": "MIT", "repository": { @@ -14,6 +14,7 @@ }, "homepage": "https://github.com/twbs/rfs#readme", "files": [ + "lib/", "less.less", "postcss.js", "sass.sass", @@ -22,9 +23,11 @@ ], "keywords": [ "rfs", + "fluid", "responsive", "font-size", "typography", + "mixin", "scss", "sass", "less", @@ -40,11 +43,22 @@ "xo": "xo", "lint": "npm-run-all --parallel xo stylelint", "test": "npm run lint && npm run mocha", - "generate-test-results": "node-sass test/sass/ -o test/expected/", - "gulp-examples": "cd examples/less/gulp && gulp build && cd ../../postcss/gulp && gulp build && cd ../../scss/gulp && gulp build && cd ../../stylus/gulp && gulp build && cd ../../../..", - "node-examples": "node examples/less/node/index.js && node examples/postcss/node/index.js && node examples/scss/node/index.js && node examples/stylus/node/index.js" + "generate-test-results": "node-sass test/sass/ -o test/expected/ && prettier --write test/expected/*.css", + "examples": "npm-run-all --parallel --continue-on-error gulp-examples node-examples", + "gulp-examples": "npm-run-all --parallel --continue-on-error gulp-example-*", + "gulp-example-less": "gulp --gulpfile=examples/less/gulpfile.js", + "gulp-example-postcss": "gulp --gulpfile=examples/postcss/gulpfile.js", + "gulp-example-scss": "gulp --gulpfile=examples/scss/gulpfile.js", + "gulp-example-stylus": "gulp --gulpfile=examples/stylus/gulpfile.js", + "node-examples": "npm-run-all --parallel --continue-on-error node-example-*", + "node-example-less": "node examples/less/index.js", + "node-example-postcss": "node examples/postcss/index.js", + "node-example-scss": "node examples/scss/index.js", + "node-example-stylus": "node examples/stylus/index.js" + }, + "dependencies": { + "postcss-value-parser": "^4.0.1" }, - "dependencies": {}, "devDependencies": { "gulp": "^4.0.2", "gulp-less": "^4.0.1", @@ -1,7 +1,7 @@ /*! * PostCSS RFS plugin * - * Automated font-resizing + * Automated responsive values for for font sizes, paddings, margins and much more * * Licensed under MIT (https://github.com/twbs/rfs/blob/master/LICENSE) */ @@ -9,211 +9,136 @@ 'use strict'; const postcss = require('postcss'); +const RfsClass = require('./lib/rfs.js'); + +const DISABLE_RFS_SELECTOR = '.disable-rfs'; +const ENABLE_RFS_SELECTOR = '.enable-rfs'; module.exports = postcss.plugin('postcss-rfs', opts => { - const BREAKPOINT_ERROR = 'breakpoint option is invalid, it must be set in `px`, `rem` or `em`.'; - const BREAKPOINT_UNIT_ERROR = 'breakpointUnit option is invalid, it must be `px`, `rem` or `em`.'; - const BASE_FONT_SIZE_ERROR = 'baseFontSize option is invalid, it must be set in `px` or `rem`.'; - const DISABLE_RESPONSIVE_FONT_SIZE_SELECTOR = '.disable-responsive-font-size'; - const ENABLE_RESPONSIVE_FONT_SIZE_SELECTOR = '.enable-responsive-font-size'; - - const defaultOptions = { - baseFontSize: 20, - fontSizeUnit: 'rem', - breakpoint: '75rem', - breakpointUnit: 'px', - factor: 10, - twoDimensional: false, - unitPrecision: 5, - remValue: 16, - propList: ['responsive-font-size', 'rfs'], - class: false, - safariIframeResizeBugFix: false, - enableResponsiveFontSizes: true - }; + const rfs = new RfsClass(opts); - opts = Object.assign(defaultOptions, opts); - - if (typeof opts.baseFontSize !== 'number') { - if (opts.baseFontSize.endsWith('px')) { - opts.baseFontSize = parseFloat(opts.baseFontSize); - } else if (opts.baseFontSize.endsWith('rem')) { - opts.baseFontSize = parseFloat(opts.baseFontSize) / opts.remValue; - } else { - console.error(BASE_FONT_SIZE_ERROR); - } - } - - if (typeof opts.breakpoint !== 'number') { - if (opts.breakpoint.endsWith('px')) { - opts.breakpoint = parseFloat(opts.breakpoint); - } else if (opts.breakpoint.endsWith('em')) { - opts.breakpoint = parseFloat(opts.breakpoint) * opts.remValue; - } else { - console.error(BREAKPOINT_ERROR); - } - } + // Get the options merged with defaults + opts = rfs.getOptions(); + const mediaQuery = rfs.renderMediaQuery(); return css => { css.walkRules(rule => { - if (rule.selector.includes(DISABLE_RESPONSIVE_FONT_SIZE_SELECTOR)) { - return; - } - - rule.walkDecls(decl => { - // Skip if property is not in propList - if (!opts.propList.includes(decl.prop)) { - return; + const mediaQueryRules = []; + const extraBlocks = []; + const {parent} = rule; + let removeRule = false; + let dcRule; + let ecRule; + let ruleSelector = rule.selector; + + // Prepare rule to add to media query + if (opts.class === 'enable') { + const selectors = rule.selector.split(','); + let tempRuleSelector = ''; + + for (const selector of selectors) { + tempRuleSelector += `${ENABLE_RFS_SELECTOR} ${selector},\n`; + tempRuleSelector += `${selector + ENABLE_RFS_SELECTOR},\n`; } - // Set property to font-size - decl.prop = 'font-size'; - - // Skip if value is not in px or rem - if (isNaN(decl.value) && !new RegExp(/(\d*\.?\d+)(px|rem)/g).test(decl.value)) { - return; - } - - // Get the float value of the value - let value = parseFloat(decl.value); - - // Multiply by remValue if value is in rem - if (decl.value.includes('rem')) { - value *= opts.remValue; - } - - // Render value in desired unit - if (opts.fontSizeUnit === 'px') { - decl.value = `${toFixed(value, opts.unitPrecision)}px`; - } else if (opts.fontSizeUnit === 'rem') { - decl.value = `${toFixed(value / opts.remValue, opts.unitPrecision)}rem`; - } else { - console.error('fontSizeUnit option is not valid, it must be `px` or `rem`.'); - } + ruleSelector = tempRuleSelector.slice(0, -2); + } - // Only add media query if needed - if (opts.baseFontSize >= value || opts.factor <= 1 || !opts.enableResponsiveFontSizes) { - return; - } + const fluidRule = postcss.rule({ + selector: ruleSelector + }); - // Calculate font-size and font-size difference - let baseFontSize = opts.baseFontSize + ((value - opts.baseFontSize) / opts.factor); - const fontSizeDiff = value - baseFontSize; + // Disable classes + if (opts.class === 'disable') { + const selectors = rule.selector.split(','); + let ruleSelector = ''; - // Divide by remValue if needed - if (opts.fontSizeUnit === 'rem') { - baseFontSize /= opts.remValue; + for (const selector of selectors) { + ruleSelector += (opts.mode === 'max-media-query') ? `${selector},\n` : ''; + ruleSelector += `${DISABLE_RFS_SELECTOR} ${selector},\n`; + ruleSelector += `${selector + DISABLE_RFS_SELECTOR},\n`; } - const viewportUnit = opts.twoDimensional ? 'vmin' : 'vw'; - - value = `calc(${toFixed(baseFontSize, opts.unitPrecision)}${opts.fontSizeUnit} + ${toFixed(fontSizeDiff * 100 / opts.breakpoint, opts.unitPrecision)}${viewportUnit})`; - - const mediaQuery = postcss.atRule(renderMediaQuery(opts)); - let ruleSelector = rule.selector; - - // Prefix with .enable-responsive-font-size class if needed - if (opts.class === 'enable') { - const selectors = rule.selector.split(','); - let tempRuleSelector = ''; - - for (const selector of selectors) { - tempRuleSelector += `${ENABLE_RESPONSIVE_FONT_SIZE_SELECTOR} ${selector},\n`; - tempRuleSelector += `${selector + ENABLE_RESPONSIVE_FONT_SIZE_SELECTOR},\n`; - } - - ruleSelector = tempRuleSelector.slice(0, -2); - } + ruleSelector = ruleSelector.slice(0, -2); - const mediaQueryRule = postcss.rule({ + dcRule = postcss.rule({ selector: ruleSelector, source: rule.source }); + } - mediaQueryRule.append(decl.clone({value})); + rule.walkDecls(decl => { + // Check if the selector doesn't contain the disabled selector + // Check if value contains rfs() function + if (!rule.selector.includes(DISABLE_RFS_SELECTOR) && new RegExp(opts.functionName + '(.*)', 'g').test(decl.value)) { + const value = rfs.value(decl.value); + const fluidValue = rfs.fluidValue(decl.value); + decl.value = value; + + if (value !== fluidValue) { + const defaultValue = (opts.mode === 'min-media-query') ? ((opts.class === 'enable') ? value : fluidValue) : value; + const mediaQueryValue = (opts.mode === 'min-media-query') ? value : fluidValue; + decl.value = defaultValue; + + fluidRule.append(decl.clone({value: mediaQueryValue})); + mediaQueryRules.push(fluidRule); + + // Disable classes + if (opts.class === 'disable') { + const declOpts = (opts.mode === 'max-media-query') ? {} : {value}; + dcRule.append(decl.clone(declOpts)); + extraBlocks.push(dcRule); + } else if (opts.class === 'enable' && opts.mode === 'min-media-query') { + if (ecRule === undefined) { + ecRule = postcss.rule({ + selector: ruleSelector, + source: parent.source + }); + } + + ecRule.append(decl.clone({value: fluidValue})); + extraBlocks.push(ecRule); + } + + // Remove declaration if needed + if (opts.class === 'disable' && opts.mode === 'max-media-query') { + if (decl.prev() || decl.next()) { + decl.remove(); + } else { + removeRule = true; + } + } + } + } + }); + if (mediaQueryRules.length !== 0) { // Safari iframe resize bug: https://github.com/twbs/rfs/issues/14 if (opts.safariIframeResizeBugFix) { - mediaQueryRule.append(postcss.decl({ + rule.append({ prop: 'min-width', value: '0vw' - })); + }); } - mediaQuery.append(mediaQueryRule); - rule.parent.insertAfter(rule, mediaQuery.clone()); + const fluidMediaQuery = mediaQuery.clone(); - // Disable classes - if (opts.class === 'disable') { - const selectors = rule.selector.split(','); - let ruleSelector = ''; - - for (const selector of selectors) { - ruleSelector += `${selector},\n`; - ruleSelector += `${DISABLE_RESPONSIVE_FONT_SIZE_SELECTOR} ${selector},\n`; - ruleSelector += `${selector + DISABLE_RESPONSIVE_FONT_SIZE_SELECTOR},\n`; - } + mediaQueryRules.forEach(mediaQueryRule => { + fluidMediaQuery.append(mediaQueryRule); + }); - ruleSelector = ruleSelector.slice(0, -2); + parent.insertAfter(rule, fluidMediaQuery); - const dcRule = postcss.rule({ - selector: ruleSelector, - source: rule.source + if (extraBlocks.length > 0) { + extraBlocks.forEach(disableBlock => { + parent.insertAfter(rule, disableBlock); }); - - dcRule.append(decl.clone()); - rule.parent.insertAfter(rule, dcRule); - - if (decl.prev() || decl.next()) { - decl.remove(); - } else { - decl.parent.remove(); - } } - }); - }); - }; - function renderMediaQuery(opts) { - const mediaQuery = { - name: 'media' - }; - - switch (opts.breakpointUnit) { - case 'em': - case 'rem': { - const breakpoint = opts.breakpoint / opts.remValue; - - if (opts.twoDimensional) { - mediaQuery.params = `(max-width: ${breakpoint}${opts.breakpointUnit}), (max-height: ${breakpoint}${opts.breakpointUnit})`; - } else { - mediaQuery.params = `(max-width: ${breakpoint}${opts.breakpointUnit})`; + if (removeRule) { + rule.remove(); } - - break; } - - case 'px': - if (opts.twoDimensional) { - mediaQuery.params = `(max-width: ${opts.breakpoint}px), (max-height: ${opts.breakpoint}px)`; - } else { - mediaQuery.params = `(max-width: ${opts.breakpoint}px)`; - } - - break; - - default: - console.error(BREAKPOINT_UNIT_ERROR); - break; - } - - return mediaQuery; - } - - function toFixed(number, precision) { - const multiplier = Math.pow(10, precision + 1); - const wholeNumber = Math.floor(number * multiplier); - - return Math.round(wholeNumber / 10) * 10 / multiplier; - } + }); + }; }); @@ -2,21 +2,21 @@ // SCSS RFS mixin // -// Automated responsive font sizes +// Automated responsive values for for font sizes, paddings, margins and much more // // Licensed under MIT (https://github.com/twbs/rfs/blob/master/LICENSE) // Configuration -// Base font size -$rfs-base-font-size: 1.25rem !default; -$rfs-font-size-unit: rem !default; +// Base value +$rfs-base-value: 1.25rem !default; +$rfs-unit: rem !default; -@if $rfs-font-size-unit != rem and $rfs-font-size-unit != px { - @error "`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`."; +@if $rfs-unit != rem and $rfs-unit != px { + @error "`#{$rfs-unit}` is not a valid unit for $rfs-unit. Use `px` or `rem`."; } -// Breakpoint at where font-size starts decreasing if screen width is smaller +// Breakpoint at where values start decreasing if screen width is smaller $rfs-breakpoint: 1200px !default; $rfs-breakpoint-unit: px !default; @@ -24,16 +24,19 @@ $rfs-breakpoint-unit: px !default; @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`."; } -// Resize font size based on screen height and width +// Resize values based on screen height and width $rfs-two-dimensional: false !default; // Factor of decrease $rfs-factor: 10 !default; -@if type-of($rfs-factor) != "number" or $rfs-factor <= 1 { +@if type-of($rfs-factor) != number or $rfs-factor <= 1 { @error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1."; } +// Mode. Possibilities: "min-media-query", "max-media-query" +$rfs-mode: min-media-query !default; + // Generate enable or disable classes. Possibilities: false, "enable" or "disable" $rfs-class: false !default; @@ -43,51 +46,63 @@ $rfs-rem-value: 16 !default; // Safari iframe resize bug: https://github.com/twbs/rfs/issues/14 $rfs-safari-iframe-resize-bug-fix: false !default; -// Disable RFS by setting $enable-responsive-font-sizes to false -$enable-responsive-font-sizes: true !default; +// Disable RFS by setting $enable-rfs to false +$enable-rfs: true !default; -// Cache $rfs-base-font-size unit -$rfs-base-font-size-unit: unit($rfs-base-font-size); +// Cache $rfs-base-value unit +$rfs-base-value-unit: unit($rfs-base-value); -// Remove px-unit from $rfs-base-font-size for calculations -@if $rfs-base-font-size-unit == "px" { - $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1); +// Remove px-unit from $rfs-base-value for calculations +@if $rfs-base-value-unit == px { + $rfs-base-value: $rfs-base-value / ($rfs-base-value * 0 + 1); } -@else if $rfs-base-font-size-unit == "rem" { - $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1 / $rfs-rem-value); +@else if $rfs-base-value-unit == rem { + $rfs-base-value: $rfs-base-value / ($rfs-base-value * 0 + 1 / $rfs-rem-value); } // Cache $rfs-breakpoint unit to prevent multiple calls $rfs-breakpoint-unit-cache: unit($rfs-breakpoint); // Remove unit from $rfs-breakpoint for calculations -@if $rfs-breakpoint-unit-cache == "px" { +@if $rfs-breakpoint-unit-cache == px { $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1); } -@else if $rfs-breakpoint-unit-cache == "rem" or $rfs-breakpoint-unit-cache == "em" { +@else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == "em" { $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value); } -// Internal mixin that adds disable classes to the selector if needed. -@mixin _rfs-disable-class { - @if $rfs-class == "disable" { - // Adding an extra class increases specificity, which prevents the media query to override the font size - &, - .disable-responsive-font-size &, - &.disable-responsive-font-size { +// Calculate the media query value +$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit}); +$rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width); +$rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height); + +// Internal mixin used to determine which media query needs to be used +@mixin _rfs-media-query { + @if $rfs-two-dimensional { + @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}), (#{$rfs-mq-property-height}: #{$rfs-mq-value}) { @content; } } @else { - @content; + @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) { + @content; + } } } -// Internal mixin that adds enable classes to the selector if needed. -@mixin _rfs-enable-class { - @if $rfs-class == "enable" { - .enable-responsive-font-size &, - &.enable-responsive-font-size { +// Internal mixin that adds disable classes to the selector if needed. +@mixin _rfs-rule { + @if $rfs-class == disable and $rfs-mode == max-media-query { + // Adding an extra class increases specificity, which prevents the media query to override the property + &, + .disable-rfs &, + &.disable-rfs { + @content; + } + } + @else if $rfs-class == enable and $rfs-mode == min-media-query { + .enable-rfs &, + &.enable-rfs { @content; } } @@ -96,91 +111,192 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint); } } -// Internal mixin used to determine which media query needs to be used -@mixin _rfs-media-query($mq-value) { - @if $rfs-two-dimensional { - @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) { +// Internal mixin that adds enable classes to the selector if needed. +@mixin _rfs-media-query-rule { + + @if $rfs-class == enable { + @if $rfs-mode == min-media-query { @content; } + + @include _rfs-media-query { + .enable-rfs &, + &.enable-rfs { + @content; + } + } } @else { - @media (max-width: #{$mq-value}) { + @if $rfs-class == disable and $rfs-mode == min-media-query { + .disable-rfs &, + &.disable-rfs { + @content; + } + } + @include _rfs-media-query { @content; } } } -// Responsive font size mixin -@mixin rfs($fs, $important: false) { - // Cache $fs unit - $fs-unit: if(type-of($fs) == "number", unit($fs), false); +// Helper function to get the formatted non-responsive value +@function rfs-value($values) { + // Convert to list + $values: if(type-of($values) != list, ($values,), $values); - // Add !important suffix if needed - $rfs-suffix: if($important, " !important", ""); + $val: ''; - // If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value - @if not $fs-unit or $fs-unit != "" and $fs-unit != "px" and $fs-unit != "rem" or $fs == 0 { - font-size: #{$fs}#{$rfs-suffix}; - } - @else { - // Remove unit from $fs for calculations - @if $fs-unit == "px" { - $fs: $fs / ($fs * 0 + 1); + // Loop over each value and calculate value + @each $value in $values { + @if $value == 0 { + $val: $val + ' 0'; } - @else if $fs-unit == "rem" { - $fs: $fs / ($fs * 0 + 1 / $rfs-rem-value); + @else { + // Cache $value unit + $unit: if(type-of($value) == "number", unit($value), false); + + @if $unit == px { + // Convert to rem if needed + $val: $val + ' ' + if($rfs-unit == rem, #{$value / ($value * 0 + $rfs-rem-value)}rem, $value); + } + @else if $unit == rem { + // Convert to px if needed + $val: $val + ' ' + if($rfs-unit == px, #{$value / ($value * 0 + 1) * $rfs-rem-value}px, $value); + } + @else { + // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value + $val: $val + ' ' + $value; + } } + } + + // Remove first space + @return unquote(str-slice($val, 2)); +} - // Set default font size - $rfs-static: if($rfs-font-size-unit == rem, #{$fs / $rfs-rem-value}rem, #{$fs}px); +// Helper function to get the responsive value calculated by RFS +@function rfs-fluid-value($values) { + // Convert to list + $values: if(type-of($values) != list, ($values,), $values); - // Only add the media query if the font size is bigger than the minimum font size - @if $fs <= $rfs-base-font-size or not $enable-responsive-font-sizes { - font-size: #{$rfs-static}#{$rfs-suffix}; + $val: ''; + + // Loop over each value and calculate value + @each $value in $values { + @if $value == 0 { + $val: $val + ' 0'; } + @else { - // Calculate the minimum font size for $fs - $fs-min: $rfs-base-font-size + ($fs - $rfs-base-font-size) / $rfs-factor; + // Cache $value unit + $unit: if(type-of($value) == "number", unit($value), false); - // Calculate difference between $fs and the minimum font size - $fs-diff: $fs - $fs-min; + // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value + @if not $unit or $unit != px and $unit != rem { + $val: $val + ' ' + $value; + } - // Base font-size formatting - $min-width: if($rfs-font-size-unit == rem, #{$fs-min / $rfs-rem-value}rem, #{$fs-min}px); + @else { + // Remove unit from $value for calculations + $value: $value / ($value * 0 + if($unit == px, 1, 1 / $rfs-rem-value)); - // Use `vmin` if two-dimensional is enabled - $variable-unit: if($rfs-two-dimensional, vmin, vw); + // Only add the media query if the value is greater than the minimum value + @if abs($value) <= $rfs-base-value or not $enable-rfs { + $val: $val + ' ' + if($rfs-unit == rem, #{$value / $rfs-rem-value}rem, #{$value}px); + } + @else { + // Calculate the minimum value + $value-min: $rfs-base-value + (abs($value) - $rfs-base-value) / $rfs-factor; - // Calculate the variable width between 0 and $rfs-breakpoint - $variable-width: #{$fs-diff * 100 / $rfs-breakpoint}#{$variable-unit}; + // Calculate difference between $value and the minimum value + $value-diff: abs($value) - $value-min; - // Set the calculated font-size - $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix}; + // Base value formatting + $min-width: if($rfs-unit == rem, #{$value-min / $rfs-rem-value}rem, #{$value-min}px); - // Breakpoint formatting - $mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit}); + // Use `vmin` if two-dimensional is enabled + $variable-unit: if($rfs-two-dimensional, vmin, vw); - @include _rfs-disable-class { - font-size: #{$rfs-static}#{$rfs-suffix}; - } + // Calculate the variable width between 0 and $rfs-breakpoint + $variable-width: #{$value-diff * 100 / $rfs-breakpoint}#{$variable-unit}; - @include _rfs-media-query($mq-value) { - @include _rfs-enable-class { - font-size: $rfs-fluid; + // Return the calculated value + $val: $val + ' ' + if($value < 0, calc(-#{$min-width} - #{$variable-width}), calc(#{$min-width} + #{$variable-width})); } + } + } + } + + // Remove first space + @return unquote(str-slice($val, 2)); +} + +// RFS mixin +@mixin rfs($values, $property: font-size) { + @if $values != null { + $val: rfs-value($values); + $fluidVal: rfs-fluid-value($values); + + // Do not print the media query if responsive & non-responsive values are the same + @if $val == $fluidVal { + #{$property}: $val; + } + @else { + @include _rfs-rule { + #{$property}: if($rfs-mode == max-media-query, $val, $fluidVal); // Include safari iframe resize fix if needed min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null); } + + @include _rfs-media-query-rule { + #{$property}: if($rfs-mode == max-media-query, $fluidVal, $val); + } } } } -// The font-size & responsive-font-size mixins use RFS to rescale the font size -@mixin font-size($fs, $important: false) { - @include rfs($fs, $important); +// Shorthand helper mixins +@mixin font-size($value) { + @include rfs($value); +} + +@mixin padding($value) { + @include rfs($value, padding); +} + +@mixin padding-top($value) { + @include rfs($value, padding-top); +} + +@mixin padding-right($value) { + @include rfs($value, padding-right); +} + +@mixin padding-bottom($value) { + @include rfs($value, padding-bottom); +} + +@mixin padding-left($value) { + @include rfs($value, padding-left); +} + +@mixin margin($value) { + @include rfs($value, margin); +} + +@mixin margin-top($value) { + @include rfs($value, margin-top); +} + +@mixin margin-right($value) { + @include rfs($value, margin-right); +} + +@mixin margin-bottom($value) { + @include rfs($value, margin-bottom); } -@mixin responsive-font-size($fs, $important: false) { - @include rfs($fs, $important); +@mixin margin-left($value) { + @include rfs($value, margin-left); } diff --git a/stylus.styl b/stylus.styl index 83ff35a..9fdc254 100644 --- a/stylus.styl +++ b/stylus.styl @@ -1,25 +1,28 @@ // Stylus RFS mixin // -// Automated font-resizing +// Automated responsive values for for font sizes, paddings, margins and much more // -// See https://github.com/twbs/rfs +// Licensed under MIT (https://github.com/twbs/rfs/blob/master/LICENSE) // Configuration -// Base font size -$rfs-base-font-size ?= 1.25rem -$rfs-font-size-unit ?= rem +// Base value +$rfs-base-value ?= 1.25rem +$rfs-unit ?= rem -// Breakpoint at where font-size starts decreasing if screen width is smaller +// Breakpoint at where values start decreasing if screen width is smaller $rfs-breakpoint ?= 1200px $rfs-breakpoint-unit ?= px -// Resize font-size based on screen height and width +// Resize values based on screen height and width $rfs-two-dimensional ?= false // Factor of decrease $rfs-factor ?= 10 +// Mode. Possibilities: "min-media-query", "max-media-query" +$rfs-mode ?= "min-media-query" + // Generate enable or disable classes. Possibilities: false, "enable" or "disable" $rfs-class ?= false @@ -29,17 +32,17 @@ $rfs-rem-value ?= 16 // Safari iframe resize bug: https://github.com/twbs/rfs/issues/14 $rfs-safari-iframe-resize-bug-fix ?= false -// Disable RFS by setting $enable-responsive-font-sizes to false -$enable-responsive-font-sizes ?= true +// Disable RFS by setting $enable-rfs to false +$enable-rfs ?= true -// Cache $rfs-base-font-size unit -$rfs-base-font-size-unit = unit($rfs-base-font-size) +// Cache $rfs-base-value unit +$rfs-base-value-unit = unit($rfs-base-value) -// Remove px-unit from $rfs-base-font-size for calculations -if $rfs-base-font-size-unit == "px" - $rfs-base-font-size = unit($rfs-base-font-size, "") -else if $rfs-base-font-size-unit == "rem" - $rfs-base-font-size = unit($rfs-base-font-size * $rfs-rem-value, "") +// Remove px-unit from $rfs-base-value for calculations +if $rfs-base-value-unit == "px" + $rfs-base-value = unit($rfs-base-value, "") +else if $rfs-base-value-unit == "rem" + $rfs-base-value = unit($rfs-base-value * $rfs-rem-value, "") // Cache $rfs-breakpoint unit to prevent multiple calls $rfs-breakpoint-unit-cache = unit($rfs-breakpoint) @@ -50,122 +53,195 @@ if $rfs-breakpoint-unit-cache == "px" else if $rfs-breakpoint-unit-cache == "rem" or $rfs-breakpoint-unit-cache == "em" $rfs-breakpoint = unit($rfs-breakpoint * $rfs-rem-value, "") -// Responsive font-size mixin -rfs($fs, $important = false) - $rfs-suffix = unquote('') - - if type-of($fs) == "unit" - $fs-unit = unit($fs) +if $rfs-breakpoint-unit == px + $rfs-mq-value = unit($rfs-breakpoint, px) +else + $rfs-mq-value = unit($rfs-breakpoint / $rfs-rem-value, $rfs-breakpoint-unit) + + +if $rfs-mode == min-media-query + $rfs-mq-property-width = min-width +else + $rfs-mq-property-width = max-width + +if $rfs-mode == min-media-query + $rfs-mq-property-height = min-height +else + $rfs-mq-property-height = max-height + +_rfs-rule() + if $rfs-class == "disable" and $rfs-mode == max-media-query + &, + .disable-rfs &, + &.disable-rfs + {block} + else if $rfs-class == "enable" and $rfs-mode == min-media-query + .enable-rfs &, + &.enable-rfs + {block} + else + {block} + +_rfs-media-query-rule() + if $rfs-class == "enable" + if $rfs-mode == min-media-query + {block} + +_rfs-media-query() + .enable-rfs &, + &.enable-rfs + {block} + else + if $rfs-class == disable and $rfs-mode == min-media-query + .disable-rfs &, + &.disable-rfs + {block} + +_rfs-media-query() + {block} + +// Internal mixin used to determine which media query needs to be used +_rfs-media-query() + if $rfs-two-dimensional + @media ({$rfs-mq-property-width}: $rfs-mq-value), ({$rfs-mq-property-height}: $rfs-mq-value) + {block} + else + @media ({$rfs-mq-property-width}: $rfs-mq-value) + {block} - // Add !important suffix if needed - if $important - $rfs-suffix = !important +// Helper function to get the formatted non-responsive value +rfs-value($value) + if $value == 0 + 0 - // If $fs is not a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value - if type-of($fs) != "unit" or ($fs-unit != "" and $fs-unit != "px" and $fs-unit != "rem") or $fs == 0 - font-size: ($fs)$rfs-suffix + else if type-of($value) != "unit" + $value else - // Variables for storing static and fluid rescaling - $rfs-static = null - $rfs-fluid = null - - // Remove px-unit from $fs for calculations - if $fs-unit == px - $fs = unit($fs, "") - else if $fs-unit == rem - $fs = unit($fs * $rfs-rem-value, "") - - // Set default font-size. - if $rfs-font-size-unit == rem - $rfs-static = unit(($fs / $rfs-rem-value), rem)$rfs-suffix - else if $rfs-font-size-unit == px - $rfs-static = unit($fs, px)$rfs-suffix + $unit = unit($value) + + if $unit == "px" + if $rfs-unit == "rem" + unit($value / $rfs-rem-value, rem) + else + unit($value, px) + + else if $unit == "rem" + if $rfs-unit == "rem" + unit($value, rem) + else + unit($value * $rfs-rem-value, px) else - error("`$rfs-font-size-unit` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`.") + $value - if type-of($rfs-factor) != "unit" or $rfs-factor < 1 - error("`$rfs-factor` is not a valid $rfs-factor, it must be greater or equal to 1.") - // Only add media query if font-size is bigger as the minimum font-size - // If $rfs-factor == 1, no rescaling will take place - if $fs > $rfs-base-font-size and $rfs-factor != 1 and $enable-responsive-font-sizes - $min-width = null - $variable-unit = null +// Helper function to get the responsive value calculated by RFS +rfs-fluid-value($value) + if $value == 0 + 0 + else if type-of($value) != "unit" + $value + else if unit($value) != "px" and unit($value) != "rem" + $value + else + if unit($value) == "rem" + $value = unit($value * $rfs-rem-value, "") + else + $value = unit($value, "") - // Calculate minimum font-size for given font-size - $fs-min = $rfs-base-font-size + ($fs - $rfs-base-font-size) / $rfs-factor + // Only add the media query if the value is greater than the minimum value + if abs($value) <= $rfs-base-value or !$enable-rfs + if $rfs-unit == "rem" + unit($value / $rfs-rem-value, rem) + else + unit($value, px) + else + // Calculate the minimum value + $value-min = $rfs-base-value + (abs($value) - $rfs-base-value) / $rfs-factor; - // Calculate difference between given font-size and minimum font-size for given font-size - $fs-diff = $fs - $fs-min + // Calculate difference between $value and the minimum value + $value-diff = abs($value) - $value-min; - // Base font-size formatting - // No need to check if the unit is valid, because we did that before - if $rfs-font-size-unit == rem - $min-width = unit($fs-min / $rfs-rem-value, rem) + // Base value formatting + if $rfs-unit == rem + $min-width = unit($value-min / $rfs-rem-value, rem) else - $min-width = unit($fs-min, px) + $min-width = unit($value-min, px) - // If two-dimensional, use smallest of screen width and height + // Use `vmin` if two-dimensional is enabled if $rfs-two-dimensional $variable-unit = vmin else $variable-unit = vw // Calculate the variable width between 0 and $rfs-breakpoint - $variable-width = unit(round($fs-diff * 100) / $rfs-breakpoint, $variable-unit) + $variable-width = unit(round($value-diff * 100) / $rfs-breakpoint, $variable-unit) - // Set the calculated font-size - $rfs-fluid = unquote("calc(" + $min-width + " + " + $variable-width + ")" + $rfs-suffix) + // Return the calculated value + if $value != abs($value) + unquote("calc(-" + $min-width + " - " + $variable-width + ")") + else + unquote("calc(" + $min-width + " + " + $variable-width + ")") - // Rendering - if $rfs-fluid == null - // Only render static font-size if no fluid font-size is available - font-size: $rfs-static - else - $mq-value = null +// RFS mixin +rfs($values, $property = font-size) + $val = '' + $fluidVal = '' - // RFS breakpoint formatting - if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem - $mq-value = unit($rfs-breakpoint / $rfs-rem-value, $rfs-breakpoint-unit) - else if $rfs-breakpoint-unit == px - $mq-value = unit($rfs-breakpoint, px) - else - error("`$rfs-breakpoint-unit` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.") - - if $rfs-class == "disable" - // Adding an extra class increases specificity, - // which prevents the media query to override the font size - &, - .disable-responsive-font-size &, - &.disable-responsive-font-size - font-size: $rfs-static + // Loop over each value and calculate responsive & non-responsive values + for $value in $values + $val+= ' ' + rfs-value($value) + $fluidVal+= ' ' + rfs-fluid-value($value) + + // Remove first space + $val = unquote(slice($val, 1)) + $fluidVal = unquote(slice($fluidVal, 1)) + + // Do not print the media query if responsive & non-responsive values are the same + if $val == $fluidVal + {$property}: $val + else + +_rfs-rule() + if $rfs-mode == "min-media-query" + {$property}: $fluidVal else - font-size: $rfs-static + {$property}: $val - if $rfs-two-dimensional - @media (max-width: $mq-value), (max-height: $mq-value) - if $rfs-class == "enable" - .enable-responsive-font-size &, - &.enable-responsive-font-size - font-size: $rfs-fluid - else - font-size: $rfs-fluid - - if $rfs-safari-iframe-resize-bug-fix - min-width: 0vw + if $rfs-safari-iframe-resize-bug-fix and $rfs-mode == "min-media-query" + min-width: 0vw + + +_rfs-media-query-rule() + if $rfs-mode == "min-media-query" + {$property}: $val else - @media (max-width: $mq-value) - if $rfs-class == "enable" - .enable-responsive-font-size &, - &.enable-responsive-font-size - font-size: $rfs-fluid - else - font-size: $rfs-fluid - - if $rfs-safari-iframe-resize-bug-fix - // stylelint-disable-next-line length-zero-no-unit - min-width: 0vw - -// The responsive-font-size mixin uses RFS to rescale font sizes -responsive-font-size($fs, $important = false) - rfs($fs, $important) + {$property}: $fluidVal + +rfs-font-size($value) + rfs($value) + +rfs-padding($value, $property = padding) + rfs($value, $property) + +rfs-padding-top($value, $property = padding-top) + rfs($value, $property) + +rfs-padding-right($value, $property = padding-right) + rfs($value, $property) + +rfs-padding-bottom($value, $property = padding-bottom) + rfs($value, $property) + +rfs-padding-left($value, $property = padding-left) + rfs($value, $property) + +rfs-margin($value, $property = margin) + rfs($value, $property) + +rfs-margin-top($value, $property = margin-top) + rfs($value, $property) + +rfs-margin-right($value, $property = margin-right) + rfs($value, $property) + +rfs-margin-bottom($value, $property = margin-bottom) + rfs($value, $property) + +rfs-margin-left($value, $property = margin-left) + rfs($value, $property) diff --git a/test/expected/test-1.css b/test/expected/test-1.css index 28600b3..215e510 100644 --- a/test/expected/test-1.css +++ b/test/expected/test-1.css @@ -1,50 +1,230 @@ .selector-1 { background-color: #f00; width: 300px; - font-size: 2rem; } - @media (max-width: 1200px) { - .selector-1 { - font-size: calc(1.325rem + 0.9vw) ; } } + font-size: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-1 { + font-size: 2rem; + } +} .selector-2 { - font-size: 2rem; } - @media (max-width: 1200px) { - .selector-2 { - font-size: calc(1.325rem + 0.9vw) ; } } + font-size: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-2 { + font-size: 2rem; + } +} .selector-3 { - font-size: 2rem !important; } - @media (max-width: 1200px) { - .selector-3 { - font-size: calc(1.325rem + 0.9vw) !important; } } + font-size: calc(1.325rem + 0.9vw) !important; +} +@media (min-width: 1200px) { + .selector-3 { + font-size: 2rem !important; + } +} .selector-4 { - font-size: 2rem; } - @media (max-width: 1200px) { - .selector-4 { - font-size: calc(1.325rem + 0.9vw) ; } } + font-size: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-4 { + font-size: 2rem; + } +} .selector-5 { - font-size: 2em; } + font-size: 2em; +} .selector-6 { - font-size: inherit; } + font-size: inherit; +} @supports (display: flex) { .selector-7 { - font-size: 1.75rem; } - @media (max-width: 1200px) { - .selector-7 { - font-size: calc(1.3rem + 0.6vw) ; } } } + font-size: calc(1.3rem + 0.6vw); + } + @media (min-width: 1200px) { + .selector-7 { + font-size: 1.75rem; + } + } +} .selector-8 { - font-size: 2rem; } - @media (max-width: 1200px) { - .selector-8 { - font-size: calc(1.325rem + 0.9vw) ; } } + flex: 0 999 calc(4.325rem + 36.9vw); +} +@media (min-width: 1200px) { + .selector-8 { + flex: 0 999 32rem; + } +} .selector-9 { - font-size: 2rem; } - @media (max-width: 1200px) { - .selector-9 { - font-size: calc(1.325rem + 0.9vw) ; } } + padding: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-9 { + padding: 2rem; + } +} + +.selector-10 { + padding: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-10 { + padding: 2rem; + } +} + +.selector-11 { + padding-top: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-11 { + padding-top: 2rem; + } +} + +.selector-12 { + padding-right: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-12 { + padding-right: 2rem; + } +} + +.selector-13 { + padding-bottom: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-13 { + padding-bottom: 2rem; + } +} + +.selector-14 { + padding-left: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-14 { + padding-left: 2rem; + } +} + +.selector-15 { + margin: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-15 { + margin: 2rem; + } +} + +.selector-16 { + margin-top: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-16 { + margin-top: 2rem; + } +} + +.selector-17 { + margin-right: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-17 { + margin-right: 2rem; + } +} + +.selector-18 { + margin-bottom: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-18 { + margin-bottom: 2rem; + } +} + +.selector-19 { + margin-left: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .selector-19 { + margin-left: 2rem; + } +} + +.selector-20 { + margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw); +} +@media (min-width: 1200px) { + .selector-20 { + margin: 2rem 3rem; + } +} + +.selector-21 { + margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw) !important; +} +@media (min-width: 1200px) { + .selector-21 { + margin: 2rem 3rem !important; + } +} + +.selector-22 { + font-size: 0; +} + +.selector-23 { + margin: 0 calc(1.425rem + 2.1vw); +} +@media (min-width: 1200px) { + .selector-23 { + margin: 0 3rem; + } +} + +.selector-24 { + box-shadow: 0 0 calc(1.325rem + 0.9vw) #f00, 0 0 calc(1.425rem + 2.1vw) #0f0; +} +@media (min-width: 1200px) { + .selector-24 { + box-shadow: 0 0 2rem #f00, 0 0 3rem #0f0; + } +} + +.selector-25 { + --value: calc(1.425rem + 2.1vw); +} +@media (min-width: 1200px) { + .selector-25 { + --value: 3rem; + } +} + +.selector-26 { + font-size: 0.625rem; +} + +.selector-27 { + margin: calc(-1.425rem - 2.1vw); +} +@media (min-width: 1200px) { + .selector-27 { + margin: -3rem; + } +} + +.selector-28 { + margin: -0.5rem; +} diff --git a/test/expected/test-10.css b/test/expected/test-10.css index 44c81dc..9998292 100644 --- a/test/expected/test-10.css +++ b/test/expected/test-10.css @@ -1,57 +1,253 @@ .selector-1 { background-color: #f00; width: 300px; - font-size: 32px; } - @media (max-width: 50rem), (max-height: 50rem) { - .selector-1 { - font-size: calc(16px + 2vmin) ; - min-width: 0vw; } } + font-size: calc(16px + 2vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-1 { + font-size: 32px; + } +} .selector-2 { - font-size: 32px; } - @media (max-width: 50rem), (max-height: 50rem) { - .selector-2 { - font-size: calc(16px + 2vmin) ; - min-width: 0vw; } } + font-size: calc(16px + 2vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-2 { + font-size: 32px; + } +} .selector-3 { - font-size: 32px !important; } - @media (max-width: 50rem), (max-height: 50rem) { - .selector-3 { - font-size: calc(16px + 2vmin) !important; - min-width: 0vw; } } + font-size: calc(16px + 2vmin) !important; + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-3 { + font-size: 32px !important; + } +} .selector-4 { - font-size: 32px; } - @media (max-width: 50rem), (max-height: 50rem) { - .selector-4 { - font-size: calc(16px + 2vmin) ; - min-width: 0vw; } } + font-size: calc(16px + 2vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-4 { + font-size: 32px; + } +} .selector-5 { - font-size: 2em; } + font-size: 2em; +} .selector-6 { - font-size: inherit; } + font-size: inherit; +} @supports (display: flex) { .selector-7 { - font-size: 28px; } - @media (max-width: 50rem), (max-height: 50rem) { - .selector-7 { - font-size: calc(15.2px + 1.6vmin) ; - min-width: 0vw; } } } + font-size: calc(15.2px + 1.6vmin); + min-width: 0vw; + } + @media (min-width: 50rem), (min-height: 50rem) { + .selector-7 { + font-size: 28px; + } + } +} .selector-8 { - font-size: 32px; } - @media (max-width: 50rem), (max-height: 50rem) { - .selector-8 { - font-size: calc(16px + 2vmin) ; - min-width: 0vw; } } + flex: 0 999 calc(112px + 50vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-8 { + flex: 0 999 512px; + } +} .selector-9 { - font-size: 32px; } - @media (max-width: 50rem), (max-height: 50rem) { - .selector-9 { - font-size: calc(16px + 2vmin) ; - min-width: 0vw; } } + padding: calc(16px + 2vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-9 { + padding: 32px; + } +} + +.selector-10 { + padding: calc(16px + 2vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-10 { + padding: 32px; + } +} + +.selector-11 { + padding-top: calc(16px + 2vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-11 { + padding-top: 32px; + } +} + +.selector-12 { + padding-right: calc(16px + 2vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-12 { + padding-right: 32px; + } +} + +.selector-13 { + padding-bottom: calc(16px + 2vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-13 { + padding-bottom: 32px; + } +} + +.selector-14 { + padding-left: calc(16px + 2vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-14 { + padding-left: 32px; + } +} + +.selector-15 { + margin: calc(16px + 2vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-15 { + margin: 32px; + } +} + +.selector-16 { + margin-top: calc(16px + 2vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-16 { + margin-top: 32px; + } +} + +.selector-17 { + margin-right: calc(16px + 2vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-17 { + margin-right: 32px; + } +} + +.selector-18 { + margin-bottom: calc(16px + 2vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-18 { + margin-bottom: 32px; + } +} + +.selector-19 { + margin-left: calc(16px + 2vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-19 { + margin-left: 32px; + } +} + +.selector-20 { + margin: calc(16px + 2vmin) calc(19.2px + 3.6vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-20 { + margin: 32px 48px; + } +} + +.selector-21 { + margin: calc(16px + 2vmin) calc(19.2px + 3.6vmin) !important; + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-21 { + margin: 32px 48px !important; + } +} + +.selector-22 { + font-size: 0; +} + +.selector-23 { + margin: 0 calc(19.2px + 3.6vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-23 { + margin: 0 48px; + } +} + +.selector-24 { + box-shadow: 0 0 calc(16px + 2vmin) #f00, 0 0 calc(19.2px + 3.6vmin) #0f0; + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-24 { + box-shadow: 0 0 32px #f00, 0 0 48px #0f0; + } +} + +.selector-25 { + --value: calc(19.2px + 3.6vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-25 { + --value: 48px; + } +} + +.selector-26 { + font-size: 10px; +} + +.selector-27 { + margin: calc(-19.2px - 3.6vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-27 { + margin: -48px; + } +} + +.selector-28 { + margin: -8px; +} diff --git a/test/expected/test-11.css b/test/expected/test-11.css new file mode 100644 index 0000000..25a1c40 --- /dev/null +++ b/test/expected/test-11.css @@ -0,0 +1,230 @@ +.selector-1 { + background-color: #f00; + width: 300px; + font-size: 2rem; +} +@media (max-width: 1200px) { + .selector-1 { + font-size: calc(1.325rem + 0.9vw); + } +} + +.selector-2 { + font-size: 2rem; +} +@media (max-width: 1200px) { + .selector-2 { + font-size: calc(1.325rem + 0.9vw); + } +} + +.selector-3 { + font-size: 2rem !important; +} +@media (max-width: 1200px) { + .selector-3 { + font-size: calc(1.325rem + 0.9vw) !important; + } +} + +.selector-4 { + font-size: 2rem; +} +@media (max-width: 1200px) { + .selector-4 { + font-size: calc(1.325rem + 0.9vw); + } +} + +.selector-5 { + font-size: 2em; +} + +.selector-6 { + font-size: inherit; +} + +@supports (display: flex) { + .selector-7 { + font-size: 1.75rem; + } + @media (max-width: 1200px) { + .selector-7 { + font-size: calc(1.3rem + 0.6vw); + } + } +} + +.selector-8 { + flex: 0 999 32rem; +} +@media (max-width: 1200px) { + .selector-8 { + flex: 0 999 calc(4.325rem + 36.9vw); + } +} + +.selector-9 { + padding: 2rem; +} +@media (max-width: 1200px) { + .selector-9 { + padding: calc(1.325rem + 0.9vw); + } +} + +.selector-10 { + padding: 2rem; +} +@media (max-width: 1200px) { + .selector-10 { + padding: calc(1.325rem + 0.9vw); + } +} + +.selector-11 { + padding-top: 2rem; +} +@media (max-width: 1200px) { + .selector-11 { + padding-top: calc(1.325rem + 0.9vw); + } +} + +.selector-12 { + padding-right: 2rem; +} +@media (max-width: 1200px) { + .selector-12 { + padding-right: calc(1.325rem + 0.9vw); + } +} + +.selector-13 { + padding-bottom: 2rem; +} +@media (max-width: 1200px) { + .selector-13 { + padding-bottom: calc(1.325rem + 0.9vw); + } +} + +.selector-14 { + padding-left: 2rem; +} +@media (max-width: 1200px) { + .selector-14 { + padding-left: calc(1.325rem + 0.9vw); + } +} + +.selector-15 { + margin: 2rem; +} +@media (max-width: 1200px) { + .selector-15 { + margin: calc(1.325rem + 0.9vw); + } +} + +.selector-16 { + margin-top: 2rem; +} +@media (max-width: 1200px) { + .selector-16 { + margin-top: calc(1.325rem + 0.9vw); + } +} + +.selector-17 { + margin-right: 2rem; +} +@media (max-width: 1200px) { + .selector-17 { + margin-right: calc(1.325rem + 0.9vw); + } +} + +.selector-18 { + margin-bottom: 2rem; +} +@media (max-width: 1200px) { + .selector-18 { + margin-bottom: calc(1.325rem + 0.9vw); + } +} + +.selector-19 { + margin-left: 2rem; +} +@media (max-width: 1200px) { + .selector-19 { + margin-left: calc(1.325rem + 0.9vw); + } +} + +.selector-20 { + margin: 2rem 3rem; +} +@media (max-width: 1200px) { + .selector-20 { + margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw); + } +} + +.selector-21 { + margin: 2rem 3rem !important; +} +@media (max-width: 1200px) { + .selector-21 { + margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw) !important; + } +} + +.selector-22 { + font-size: 0; +} + +.selector-23 { + margin: 0 3rem; +} +@media (max-width: 1200px) { + .selector-23 { + margin: 0 calc(1.425rem + 2.1vw); + } +} + +.selector-24 { + box-shadow: 0 0 2rem #f00, 0 0 3rem #0f0; +} +@media (max-width: 1200px) { + .selector-24 { + box-shadow: 0 0 calc(1.325rem + 0.9vw) #f00, 0 0 calc(1.425rem + 2.1vw) #0f0; + } +} + +.selector-25 { + --value: 3rem; +} +@media (max-width: 1200px) { + .selector-25 { + --value: calc(1.425rem + 2.1vw); + } +} + +.selector-26 { + font-size: 0.625rem; +} + +.selector-27 { + margin: -3rem; +} +@media (max-width: 1200px) { + .selector-27 { + margin: calc(-1.425rem - 2.1vw); + } +} + +.selector-28 { + margin: -0.5rem; +} diff --git a/test/expected/test-2.css b/test/expected/test-2.css index 318a432..9780f2e 100644 --- a/test/expected/test-2.css +++ b/test/expected/test-2.css @@ -1,29 +1,115 @@ .selector-1 { background-color: #f00; width: 300px; - font-size: 2rem; } + font-size: 2rem; +} .selector-2 { - font-size: 2rem; } + font-size: 2rem; +} .selector-3 { - font-size: 2rem !important; } + font-size: 2rem !important; +} .selector-4 { - font-size: 2rem; } + font-size: 2rem; +} .selector-5 { - font-size: 2em; } + font-size: 2em; +} .selector-6 { - font-size: inherit; } + font-size: inherit; +} @supports (display: flex) { .selector-7 { - font-size: 1.75rem; } } + font-size: 1.75rem; + } +} .selector-8 { - font-size: 2rem; } + flex: 0 999 32rem; +} .selector-9 { - font-size: 2rem; } + padding: 2rem; +} + +.selector-10 { + padding: 2rem; +} + +.selector-11 { + padding-top: 2rem; +} + +.selector-12 { + padding-right: 2rem; +} + +.selector-13 { + padding-bottom: 2rem; +} + +.selector-14 { + padding-left: 2rem; +} + +.selector-15 { + margin: 2rem; +} + +.selector-16 { + margin-top: 2rem; +} + +.selector-17 { + margin-right: 2rem; +} + +.selector-18 { + margin-bottom: 2rem; +} + +.selector-19 { + margin-left: 2rem; +} + +.selector-20 { + margin: 2rem 3rem; +} + +.selector-21 { + margin: 2rem 3rem !important; +} + +.selector-22 { + font-size: 0; +} + +.selector-23 { + margin: 0 3rem; +} + +.selector-24 { + box-shadow: 0 0 2rem #f00, 0 0 3rem #0f0; +} + +.selector-25 { + --value: 3rem; +} + +.selector-26 { + font-size: 0.625rem; +} + +.selector-27 { + margin: -3rem; +} + +.selector-28 { + margin: -0.5rem; +} diff --git a/test/expected/test-3.css b/test/expected/test-3.css index 0fe39d5..1463c78 100644 --- a/test/expected/test-3.css +++ b/test/expected/test-3.css @@ -1,63 +1,322 @@ .selector-1 { background-color: #f00; - width: 300px; } - .selector-1, - .disable-responsive-font-size .selector-1, .selector-1.disable-responsive-font-size { - font-size: 2rem; } - @media (max-width: 1200px) { - .selector-1 { - font-size: calc(1.325rem + 0.9vw) ; } } - -.selector-2, -.disable-responsive-font-size .selector-2, .selector-2.disable-responsive-font-size { - font-size: 2rem; } - -@media (max-width: 1200px) { - .selector-2 { - font-size: calc(1.325rem + 0.9vw) ; } } + width: 300px; + font-size: calc(1.325rem + 0.9vw); +} +.disable-rfs .selector-1, +.selector-1.disable-rfs { + font-size: 2rem; +} +@media (min-width: 1200px) { + .selector-1 { + font-size: 2rem; + } +} -.selector-3, -.disable-responsive-font-size .selector-3, .selector-3.disable-responsive-font-size { - font-size: 2rem !important; } +.selector-2 { + font-size: calc(1.325rem + 0.9vw); +} +.disable-rfs .selector-2, +.selector-2.disable-rfs { + font-size: 2rem; +} +@media (min-width: 1200px) { + .selector-2 { + font-size: 2rem; + } +} -@media (max-width: 1200px) { +.selector-3 { + font-size: calc(1.325rem + 0.9vw) !important; +} +.disable-rfs .selector-3, +.selector-3.disable-rfs { + font-size: 2rem !important; +} +@media (min-width: 1200px) { .selector-3 { - font-size: calc(1.325rem + 0.9vw) !important; } } - -.selector-4, -.disable-responsive-font-size .selector-4, .selector-4.disable-responsive-font-size { - font-size: 2rem; } + font-size: 2rem !important; + } +} -@media (max-width: 1200px) { +.selector-4 { + font-size: calc(1.325rem + 0.9vw); +} +.disable-rfs .selector-4, +.selector-4.disable-rfs { + font-size: 2rem; +} +@media (min-width: 1200px) { .selector-4 { - font-size: calc(1.325rem + 0.9vw) ; } } + font-size: 2rem; + } +} .selector-5 { - font-size: 2em; } + font-size: 2em; +} .selector-6 { - font-size: inherit; } + font-size: inherit; +} @supports (display: flex) { - .selector-7, - .disable-responsive-font-size .selector-7, .selector-7.disable-responsive-font-size { - font-size: 1.75rem; } - @media (max-width: 1200px) { + .selector-7 { + font-size: calc(1.3rem + 0.6vw); + } + .disable-rfs .selector-7, + .selector-7.disable-rfs { + font-size: 1.75rem; + } + @media (min-width: 1200px) { .selector-7 { - font-size: calc(1.3rem + 0.6vw) ; } } } + font-size: 1.75rem; + } + } +} -.selector-8, -.disable-responsive-font-size .selector-8, .selector-8.disable-responsive-font-size { - font-size: 2rem; } - -@media (max-width: 1200px) { +.selector-8 { + flex: 0 999 calc(4.325rem + 36.9vw); +} +.disable-rfs .selector-8, +.selector-8.disable-rfs { + flex: 0 999 32rem; +} +@media (min-width: 1200px) { .selector-8 { - font-size: calc(1.325rem + 0.9vw) ; } } - -.selector-9, -.disable-responsive-font-size .selector-9, .selector-9.disable-responsive-font-size { - font-size: 2rem; } + flex: 0 999 32rem; + } +} -@media (max-width: 1200px) { +.selector-9 { + padding: calc(1.325rem + 0.9vw); +} +.disable-rfs .selector-9, +.selector-9.disable-rfs { + padding: 2rem; +} +@media (min-width: 1200px) { .selector-9 { - font-size: calc(1.325rem + 0.9vw) ; } } + padding: 2rem; + } +} + +.selector-10 { + padding: calc(1.325rem + 0.9vw); +} +.disable-rfs .selector-10, +.selector-10.disable-rfs { + padding: 2rem; +} +@media (min-width: 1200px) { + .selector-10 { + padding: 2rem; + } +} + +.selector-11 { + padding-top: calc(1.325rem + 0.9vw); +} +.disable-rfs .selector-11, +.selector-11.disable-rfs { + padding-top: 2rem; +} +@media (min-width: 1200px) { + .selector-11 { + padding-top: 2rem; + } +} + +.selector-12 { + padding-right: calc(1.325rem + 0.9vw); +} +.disable-rfs .selector-12, +.selector-12.disable-rfs { + padding-right: 2rem; +} +@media (min-width: 1200px) { + .selector-12 { + padding-right: 2rem; + } +} + +.selector-13 { + padding-bottom: calc(1.325rem + 0.9vw); +} +.disable-rfs .selector-13, +.selector-13.disable-rfs { + padding-bottom: 2rem; +} +@media (min-width: 1200px) { + .selector-13 { + padding-bottom: 2rem; + } +} + +.selector-14 { + padding-left: calc(1.325rem + 0.9vw); +} +.disable-rfs .selector-14, +.selector-14.disable-rfs { + padding-left: 2rem; +} +@media (min-width: 1200px) { + .selector-14 { + padding-left: 2rem; + } +} + +.selector-15 { + margin: calc(1.325rem + 0.9vw); +} +.disable-rfs .selector-15, +.selector-15.disable-rfs { + margin: 2rem; +} +@media (min-width: 1200px) { + .selector-15 { + margin: 2rem; + } +} + +.selector-16 { + margin-top: calc(1.325rem + 0.9vw); +} +.disable-rfs .selector-16, +.selector-16.disable-rfs { + margin-top: 2rem; +} +@media (min-width: 1200px) { + .selector-16 { + margin-top: 2rem; + } +} + +.selector-17 { + margin-right: calc(1.325rem + 0.9vw); +} +.disable-rfs .selector-17, +.selector-17.disable-rfs { + margin-right: 2rem; +} +@media (min-width: 1200px) { + .selector-17 { + margin-right: 2rem; + } +} + +.selector-18 { + margin-bottom: calc(1.325rem + 0.9vw); +} +.disable-rfs .selector-18, +.selector-18.disable-rfs { + margin-bottom: 2rem; +} +@media (min-width: 1200px) { + .selector-18 { + margin-bottom: 2rem; + } +} + +.selector-19 { + margin-left: calc(1.325rem + 0.9vw); +} +.disable-rfs .selector-19, +.selector-19.disable-rfs { + margin-left: 2rem; +} +@media (min-width: 1200px) { + .selector-19 { + margin-left: 2rem; + } +} + +.selector-20 { + margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw); +} +.disable-rfs .selector-20, +.selector-20.disable-rfs { + margin: 2rem 3rem; +} +@media (min-width: 1200px) { + .selector-20 { + margin: 2rem 3rem; + } +} + +.selector-21 { + margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw) !important; +} +.disable-rfs .selector-21, +.selector-21.disable-rfs { + margin: 2rem 3rem !important; +} +@media (min-width: 1200px) { + .selector-21 { + margin: 2rem 3rem !important; + } +} + +.selector-22 { + font-size: 0; +} + +.selector-23 { + margin: 0 calc(1.425rem + 2.1vw); +} +.disable-rfs .selector-23, +.selector-23.disable-rfs { + margin: 0 3rem; +} +@media (min-width: 1200px) { + .selector-23 { + margin: 0 3rem; + } +} + +.selector-24 { + box-shadow: 0 0 calc(1.325rem + 0.9vw) #f00, 0 0 calc(1.425rem + 2.1vw) #0f0; +} +.disable-rfs .selector-24, +.selector-24.disable-rfs { + box-shadow: 0 0 2rem #f00, 0 0 3rem #0f0; +} +@media (min-width: 1200px) { + .selector-24 { + box-shadow: 0 0 2rem #f00, 0 0 3rem #0f0; + } +} + +.selector-25 { + --value: calc(1.425rem + 2.1vw); +} +.disable-rfs .selector-25, +.selector-25.disable-rfs { + --value: 3rem; +} +@media (min-width: 1200px) { + .selector-25 { + --value: 3rem; + } +} + +.selector-26 { + font-size: 0.625rem; +} + +.selector-27 { + margin: calc(-1.425rem - 2.1vw); +} +.disable-rfs .selector-27, +.selector-27.disable-rfs { + margin: -3rem; +} +@media (min-width: 1200px) { + .selector-27 { + margin: -3rem; + } +} + +.selector-28 { + margin: -0.5rem; +} diff --git a/test/expected/test-4.css b/test/expected/test-4.css index 4524004..538354a 100644 --- a/test/expected/test-4.css +++ b/test/expected/test-4.css @@ -1,50 +1,345 @@ .selector-1 { background-color: #f00; width: 300px; - font-size: 2rem; } - @media (max-width: 1200px) { - .enable-responsive-font-size .selector-1, .selector-1.enable-responsive-font-size { - font-size: calc(1.325rem + 0.9vw) ; } } + font-size: 2rem; +} +.enable-rfs .selector-1, +.selector-1.enable-rfs { + font-size: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .enable-rfs .selector-1, + .selector-1.enable-rfs { + font-size: 2rem; + } +} .selector-2 { - font-size: 2rem; } - @media (max-width: 1200px) { - .enable-responsive-font-size .selector-2, .selector-2.enable-responsive-font-size { - font-size: calc(1.325rem + 0.9vw) ; } } + font-size: 2rem; +} +.enable-rfs .selector-2, +.selector-2.enable-rfs { + font-size: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .enable-rfs .selector-2, + .selector-2.enable-rfs { + font-size: 2rem; + } +} .selector-3 { - font-size: 2rem !important; } - @media (max-width: 1200px) { - .enable-responsive-font-size .selector-3, .selector-3.enable-responsive-font-size { - font-size: calc(1.325rem + 0.9vw) !important; } } + font-size: 2rem !important; +} +.enable-rfs .selector-3, +.selector-3.enable-rfs { + font-size: calc(1.325rem + 0.9vw) !important; +} +@media (min-width: 1200px) { + .enable-rfs .selector-3, + .selector-3.enable-rfs { + font-size: 2rem !important; + } +} .selector-4 { - font-size: 2rem; } - @media (max-width: 1200px) { - .enable-responsive-font-size .selector-4, .selector-4.enable-responsive-font-size { - font-size: calc(1.325rem + 0.9vw) ; } } + font-size: 2rem; +} +.enable-rfs .selector-4, +.selector-4.enable-rfs { + font-size: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .enable-rfs .selector-4, + .selector-4.enable-rfs { + font-size: 2rem; + } +} .selector-5 { - font-size: 2em; } + font-size: 2em; +} .selector-6 { - font-size: inherit; } + font-size: inherit; +} @supports (display: flex) { .selector-7 { - font-size: 1.75rem; } - @media (max-width: 1200px) { - .enable-responsive-font-size .selector-7, .selector-7.enable-responsive-font-size { - font-size: calc(1.3rem + 0.6vw) ; } } } + font-size: 1.75rem; + } + .enable-rfs .selector-7, + .selector-7.enable-rfs { + font-size: calc(1.3rem + 0.6vw); + } + @media (min-width: 1200px) { + .enable-rfs .selector-7, + .selector-7.enable-rfs { + font-size: 1.75rem; + } + } +} .selector-8 { - font-size: 2rem; } - @media (max-width: 1200px) { - .enable-responsive-font-size .selector-8, .selector-8.enable-responsive-font-size { - font-size: calc(1.325rem + 0.9vw) ; } } + flex: 0 999 32rem; +} +.enable-rfs .selector-8, +.selector-8.enable-rfs { + flex: 0 999 calc(4.325rem + 36.9vw); +} +@media (min-width: 1200px) { + .enable-rfs .selector-8, + .selector-8.enable-rfs { + flex: 0 999 32rem; + } +} .selector-9 { - font-size: 2rem; } - @media (max-width: 1200px) { - .enable-responsive-font-size .selector-9, .selector-9.enable-responsive-font-size { - font-size: calc(1.325rem + 0.9vw) ; } } + padding: 2rem; +} +.enable-rfs .selector-9, +.selector-9.enable-rfs { + padding: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .enable-rfs .selector-9, + .selector-9.enable-rfs { + padding: 2rem; + } +} + +.selector-10 { + padding: 2rem; +} +.enable-rfs .selector-10, +.selector-10.enable-rfs { + padding: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .enable-rfs .selector-10, + .selector-10.enable-rfs { + padding: 2rem; + } +} + +.selector-11 { + padding-top: 2rem; +} +.enable-rfs .selector-11, +.selector-11.enable-rfs { + padding-top: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .enable-rfs .selector-11, + .selector-11.enable-rfs { + padding-top: 2rem; + } +} + +.selector-12 { + padding-right: 2rem; +} +.enable-rfs .selector-12, +.selector-12.enable-rfs { + padding-right: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .enable-rfs .selector-12, + .selector-12.enable-rfs { + padding-right: 2rem; + } +} + +.selector-13 { + padding-bottom: 2rem; +} +.enable-rfs .selector-13, +.selector-13.enable-rfs { + padding-bottom: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .enable-rfs .selector-13, + .selector-13.enable-rfs { + padding-bottom: 2rem; + } +} + +.selector-14 { + padding-left: 2rem; +} +.enable-rfs .selector-14, +.selector-14.enable-rfs { + padding-left: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .enable-rfs .selector-14, + .selector-14.enable-rfs { + padding-left: 2rem; + } +} + +.selector-15 { + margin: 2rem; +} +.enable-rfs .selector-15, +.selector-15.enable-rfs { + margin: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .enable-rfs .selector-15, + .selector-15.enable-rfs { + margin: 2rem; + } +} + +.selector-16 { + margin-top: 2rem; +} +.enable-rfs .selector-16, +.selector-16.enable-rfs { + margin-top: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .enable-rfs .selector-16, + .selector-16.enable-rfs { + margin-top: 2rem; + } +} + +.selector-17 { + margin-right: 2rem; +} +.enable-rfs .selector-17, +.selector-17.enable-rfs { + margin-right: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .enable-rfs .selector-17, + .selector-17.enable-rfs { + margin-right: 2rem; + } +} + +.selector-18 { + margin-bottom: 2rem; +} +.enable-rfs .selector-18, +.selector-18.enable-rfs { + margin-bottom: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .enable-rfs .selector-18, + .selector-18.enable-rfs { + margin-bottom: 2rem; + } +} + +.selector-19 { + margin-left: 2rem; +} +.enable-rfs .selector-19, +.selector-19.enable-rfs { + margin-left: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + .enable-rfs .selector-19, + .selector-19.enable-rfs { + margin-left: 2rem; + } +} + +.selector-20 { + margin: 2rem 3rem; +} +.enable-rfs .selector-20, +.selector-20.enable-rfs { + margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw); +} +@media (min-width: 1200px) { + .enable-rfs .selector-20, + .selector-20.enable-rfs { + margin: 2rem 3rem; + } +} + +.selector-21 { + margin: 2rem 3rem !important; +} +.enable-rfs .selector-21, +.selector-21.enable-rfs { + margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw) !important; +} +@media (min-width: 1200px) { + .enable-rfs .selector-21, + .selector-21.enable-rfs { + margin: 2rem 3rem !important; + } +} + +.selector-22 { + font-size: 0; +} + +.selector-23 { + margin: 0 3rem; +} +.enable-rfs .selector-23, +.selector-23.enable-rfs { + margin: 0 calc(1.425rem + 2.1vw); +} +@media (min-width: 1200px) { + .enable-rfs .selector-23, + .selector-23.enable-rfs { + margin: 0 3rem; + } +} + +.selector-24 { + box-shadow: 0 0 2rem #f00, 0 0 3rem #0f0; +} +.enable-rfs .selector-24, +.selector-24.enable-rfs { + box-shadow: 0 0 calc(1.325rem + 0.9vw) #f00, 0 0 calc(1.425rem + 2.1vw) #0f0; +} +@media (min-width: 1200px) { + .enable-rfs .selector-24, + .selector-24.enable-rfs { + box-shadow: 0 0 2rem #f00, 0 0 3rem #0f0; + } +} + +.selector-25 { + --value: 3rem; +} +.enable-rfs .selector-25, +.selector-25.enable-rfs { + --value: calc(1.425rem + 2.1vw); +} +@media (min-width: 1200px) { + .enable-rfs .selector-25, + .selector-25.enable-rfs { + --value: 3rem; + } +} + +.selector-26 { + font-size: 0.625rem; +} + +.selector-27 { + margin: -3rem; +} +.enable-rfs .selector-27, +.selector-27.enable-rfs { + margin: calc(-1.425rem - 2.1vw); +} +@media (min-width: 1200px) { + .enable-rfs .selector-27, + .selector-27.enable-rfs { + margin: -3rem; + } +} + +.selector-28 { + margin: -0.5rem; +} diff --git a/test/expected/test-5.css b/test/expected/test-5.css index 57c0fc1..4a07847 100644 --- a/test/expected/test-5.css +++ b/test/expected/test-5.css @@ -1,50 +1,230 @@ .selector-1 { background-color: #f00; width: 300px; - font-size: 2rem; } - @media (max-width: 75em) { - .selector-1 { - font-size: calc(1.325rem + 0.9vw) ; } } + font-size: calc(1.325rem + 0.9vw); +} +@media (min-width: 75em) { + .selector-1 { + font-size: 2rem; + } +} .selector-2 { - font-size: 2rem; } - @media (max-width: 75em) { - .selector-2 { - font-size: calc(1.325rem + 0.9vw) ; } } + font-size: calc(1.325rem + 0.9vw); +} +@media (min-width: 75em) { + .selector-2 { + font-size: 2rem; + } +} .selector-3 { - font-size: 2rem !important; } - @media (max-width: 75em) { - .selector-3 { - font-size: calc(1.325rem + 0.9vw) !important; } } + font-size: calc(1.325rem + 0.9vw) !important; +} +@media (min-width: 75em) { + .selector-3 { + font-size: 2rem !important; + } +} .selector-4 { - font-size: 2rem; } - @media (max-width: 75em) { - .selector-4 { - font-size: calc(1.325rem + 0.9vw) ; } } + font-size: calc(1.325rem + 0.9vw); +} +@media (min-width: 75em) { + .selector-4 { + font-size: 2rem; + } +} .selector-5 { - font-size: 2em; } + font-size: 2em; +} .selector-6 { - font-size: inherit; } + font-size: inherit; +} @supports (display: flex) { .selector-7 { - font-size: 1.75rem; } - @media (max-width: 75em) { - .selector-7 { - font-size: calc(1.3rem + 0.6vw) ; } } } + font-size: calc(1.3rem + 0.6vw); + } + @media (min-width: 75em) { + .selector-7 { + font-size: 1.75rem; + } + } +} .selector-8 { - font-size: 2rem; } - @media (max-width: 75em) { - .selector-8 { - font-size: calc(1.325rem + 0.9vw) ; } } + flex: 0 999 calc(4.325rem + 36.9vw); +} +@media (min-width: 75em) { + .selector-8 { + flex: 0 999 32rem; + } +} .selector-9 { - font-size: 2rem; } - @media (max-width: 75em) { - .selector-9 { - font-size: calc(1.325rem + 0.9vw) ; } } + padding: calc(1.325rem + 0.9vw); +} +@media (min-width: 75em) { + .selector-9 { + padding: 2rem; + } +} + +.selector-10 { + padding: calc(1.325rem + 0.9vw); +} +@media (min-width: 75em) { + .selector-10 { + padding: 2rem; + } +} + +.selector-11 { + padding-top: calc(1.325rem + 0.9vw); +} +@media (min-width: 75em) { + .selector-11 { + padding-top: 2rem; + } +} + +.selector-12 { + padding-right: calc(1.325rem + 0.9vw); +} +@media (min-width: 75em) { + .selector-12 { + padding-right: 2rem; + } +} + +.selector-13 { + padding-bottom: calc(1.325rem + 0.9vw); +} +@media (min-width: 75em) { + .selector-13 { + padding-bottom: 2rem; + } +} + +.selector-14 { + padding-left: calc(1.325rem + 0.9vw); +} +@media (min-width: 75em) { + .selector-14 { + padding-left: 2rem; + } +} + +.selector-15 { + margin: calc(1.325rem + 0.9vw); +} +@media (min-width: 75em) { + .selector-15 { + margin: 2rem; + } +} + +.selector-16 { + margin-top: calc(1.325rem + 0.9vw); +} +@media (min-width: 75em) { + .selector-16 { + margin-top: 2rem; + } +} + +.selector-17 { + margin-right: calc(1.325rem + 0.9vw); +} +@media (min-width: 75em) { + .selector-17 { + margin-right: 2rem; + } +} + +.selector-18 { + margin-bottom: calc(1.325rem + 0.9vw); +} +@media (min-width: 75em) { + .selector-18 { + margin-bottom: 2rem; + } +} + +.selector-19 { + margin-left: calc(1.325rem + 0.9vw); +} +@media (min-width: 75em) { + .selector-19 { + margin-left: 2rem; + } +} + +.selector-20 { + margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw); +} +@media (min-width: 75em) { + .selector-20 { + margin: 2rem 3rem; + } +} + +.selector-21 { + margin: calc(1.325rem + 0.9vw) calc(1.425rem + 2.1vw) !important; +} +@media (min-width: 75em) { + .selector-21 { + margin: 2rem 3rem !important; + } +} + +.selector-22 { + font-size: 0; +} + +.selector-23 { + margin: 0 calc(1.425rem + 2.1vw); +} +@media (min-width: 75em) { + .selector-23 { + margin: 0 3rem; + } +} + +.selector-24 { + box-shadow: 0 0 calc(1.325rem + 0.9vw) #f00, 0 0 calc(1.425rem + 2.1vw) #0f0; +} +@media (min-width: 75em) { + .selector-24 { + box-shadow: 0 0 2rem #f00, 0 0 3rem #0f0; + } +} + +.selector-25 { + --value: calc(1.425rem + 2.1vw); +} +@media (min-width: 75em) { + .selector-25 { + --value: 3rem; + } +} + +.selector-26 { + font-size: 0.625rem; +} + +.selector-27 { + margin: calc(-1.425rem - 2.1vw); +} +@media (min-width: 75em) { + .selector-27 { + margin: -3rem; + } +} + +.selector-28 { + margin: -0.5rem; +} diff --git a/test/expected/test-6.css b/test/expected/test-6.css index a3961f6..a6dd6fb 100644 --- a/test/expected/test-6.css +++ b/test/expected/test-6.css @@ -1,50 +1,231 @@ .selector-1 { background-color: #f00; width: 300px; - font-size: 2rem; } - @media (max-width: 1200px) { - .selector-1 { - font-size: calc(1.15625rem + 1.125vw) ; } } + font-size: calc(1.15625rem + 1.125vw); +} +@media (min-width: 1200px) { + .selector-1 { + font-size: 2rem; + } +} .selector-2 { - font-size: 2rem; } - @media (max-width: 1200px) { - .selector-2 { - font-size: calc(1.15625rem + 1.125vw) ; } } + font-size: calc(1.15625rem + 1.125vw); +} +@media (min-width: 1200px) { + .selector-2 { + font-size: 2rem; + } +} .selector-3 { - font-size: 2rem !important; } - @media (max-width: 1200px) { - .selector-3 { - font-size: calc(1.15625rem + 1.125vw) !important; } } + font-size: calc(1.15625rem + 1.125vw) !important; +} +@media (min-width: 1200px) { + .selector-3 { + font-size: 2rem !important; + } +} .selector-4 { - font-size: 2rem; } - @media (max-width: 1200px) { - .selector-4 { - font-size: calc(1.15625rem + 1.125vw) ; } } + font-size: calc(1.15625rem + 1.125vw); +} +@media (min-width: 1200px) { + .selector-4 { + font-size: 2rem; + } +} .selector-5 { - font-size: 2em; } + font-size: 2em; +} .selector-6 { - font-size: inherit; } + font-size: inherit; +} @supports (display: flex) { .selector-7 { - font-size: 1.75rem; } - @media (max-width: 1200px) { - .selector-7 { - font-size: calc(1.13125rem + 0.825vw) ; } } } + font-size: calc(1.13125rem + 0.825vw); + } + @media (min-width: 1200px) { + .selector-7 { + font-size: 1.75rem; + } + } +} .selector-8 { - font-size: 2rem; } - @media (max-width: 1200px) { - .selector-8 { - font-size: calc(1.15625rem + 1.125vw) ; } } + flex: 0 999 calc(4.15625rem + 37.125vw); +} +@media (min-width: 1200px) { + .selector-8 { + flex: 0 999 32rem; + } +} .selector-9 { - font-size: 2rem; } - @media (max-width: 1200px) { - .selector-9 { - font-size: calc(1.15625rem + 1.125vw) ; } } + padding: calc(1.15625rem + 1.125vw); +} +@media (min-width: 1200px) { + .selector-9 { + padding: 2rem; + } +} + +.selector-10 { + padding: calc(1.15625rem + 1.125vw); +} +@media (min-width: 1200px) { + .selector-10 { + padding: 2rem; + } +} + +.selector-11 { + padding-top: calc(1.15625rem + 1.125vw); +} +@media (min-width: 1200px) { + .selector-11 { + padding-top: 2rem; + } +} + +.selector-12 { + padding-right: calc(1.15625rem + 1.125vw); +} +@media (min-width: 1200px) { + .selector-12 { + padding-right: 2rem; + } +} + +.selector-13 { + padding-bottom: calc(1.15625rem + 1.125vw); +} +@media (min-width: 1200px) { + .selector-13 { + padding-bottom: 2rem; + } +} + +.selector-14 { + padding-left: calc(1.15625rem + 1.125vw); +} +@media (min-width: 1200px) { + .selector-14 { + padding-left: 2rem; + } +} + +.selector-15 { + margin: calc(1.15625rem + 1.125vw); +} +@media (min-width: 1200px) { + .selector-15 { + margin: 2rem; + } +} + +.selector-16 { + margin-top: calc(1.15625rem + 1.125vw); +} +@media (min-width: 1200px) { + .selector-16 { + margin-top: 2rem; + } +} + +.selector-17 { + margin-right: calc(1.15625rem + 1.125vw); +} +@media (min-width: 1200px) { + .selector-17 { + margin-right: 2rem; + } +} + +.selector-18 { + margin-bottom: calc(1.15625rem + 1.125vw); +} +@media (min-width: 1200px) { + .selector-18 { + margin-bottom: 2rem; + } +} + +.selector-19 { + margin-left: calc(1.15625rem + 1.125vw); +} +@media (min-width: 1200px) { + .selector-19 { + margin-left: 2rem; + } +} + +.selector-20 { + margin: calc(1.15625rem + 1.125vw) calc(1.25625rem + 2.325vw); +} +@media (min-width: 1200px) { + .selector-20 { + margin: 2rem 3rem; + } +} + +.selector-21 { + margin: calc(1.15625rem + 1.125vw) calc(1.25625rem + 2.325vw) !important; +} +@media (min-width: 1200px) { + .selector-21 { + margin: 2rem 3rem !important; + } +} + +.selector-22 { + font-size: 0; +} + +.selector-23 { + margin: 0 calc(1.25625rem + 2.325vw); +} +@media (min-width: 1200px) { + .selector-23 { + margin: 0 3rem; + } +} + +.selector-24 { + box-shadow: 0 0 calc(1.15625rem + 1.125vw) #f00, + 0 0 calc(1.25625rem + 2.325vw) #0f0; +} +@media (min-width: 1200px) { + .selector-24 { + box-shadow: 0 0 2rem #f00, 0 0 3rem #0f0; + } +} + +.selector-25 { + --value: calc(1.25625rem + 2.325vw); +} +@media (min-width: 1200px) { + .selector-25 { + --value: 3rem; + } +} + +.selector-26 { + font-size: 0.625rem; +} + +.selector-27 { + margin: calc(-1.25625rem - 2.325vw); +} +@media (min-width: 1200px) { + .selector-27 { + margin: -3rem; + } +} + +.selector-28 { + margin: -0.5rem; +} diff --git a/test/expected/test-7.css b/test/expected/test-7.css index 3b26cb8..194b0cf 100644 --- a/test/expected/test-7.css +++ b/test/expected/test-7.css @@ -1,50 +1,230 @@ .selector-1 { background-color: #f00; width: 300px; - font-size: 32px; } - @media (max-width: 1200px) { - .selector-1 { - font-size: calc(21.2px + 0.9vw) ; } } + font-size: calc(21.2px + 0.9vw); +} +@media (min-width: 1200px) { + .selector-1 { + font-size: 32px; + } +} .selector-2 { - font-size: 32px; } - @media (max-width: 1200px) { - .selector-2 { - font-size: calc(21.2px + 0.9vw) ; } } + font-size: calc(21.2px + 0.9vw); +} +@media (min-width: 1200px) { + .selector-2 { + font-size: 32px; + } +} .selector-3 { - font-size: 32px !important; } - @media (max-width: 1200px) { - .selector-3 { - font-size: calc(21.2px + 0.9vw) !important; } } + font-size: calc(21.2px + 0.9vw) !important; +} +@media (min-width: 1200px) { + .selector-3 { + font-size: 32px !important; + } +} .selector-4 { - font-size: 32px; } - @media (max-width: 1200px) { - .selector-4 { - font-size: calc(21.2px + 0.9vw) ; } } + font-size: calc(21.2px + 0.9vw); +} +@media (min-width: 1200px) { + .selector-4 { + font-size: 32px; + } +} .selector-5 { - font-size: 2em; } + font-size: 2em; +} .selector-6 { - font-size: inherit; } + font-size: inherit; +} @supports (display: flex) { .selector-7 { - font-size: 28px; } - @media (max-width: 1200px) { - .selector-7 { - font-size: calc(20.8px + 0.6vw) ; } } } + font-size: calc(20.8px + 0.6vw); + } + @media (min-width: 1200px) { + .selector-7 { + font-size: 28px; + } + } +} .selector-8 { - font-size: 32px; } - @media (max-width: 1200px) { - .selector-8 { - font-size: calc(21.2px + 0.9vw) ; } } + flex: 0 999 calc(69.2px + 36.9vw); +} +@media (min-width: 1200px) { + .selector-8 { + flex: 0 999 512px; + } +} .selector-9 { - font-size: 32px; } - @media (max-width: 1200px) { - .selector-9 { - font-size: calc(21.2px + 0.9vw) ; } } + padding: calc(21.2px + 0.9vw); +} +@media (min-width: 1200px) { + .selector-9 { + padding: 32px; + } +} + +.selector-10 { + padding: calc(21.2px + 0.9vw); +} +@media (min-width: 1200px) { + .selector-10 { + padding: 32px; + } +} + +.selector-11 { + padding-top: calc(21.2px + 0.9vw); +} +@media (min-width: 1200px) { + .selector-11 { + padding-top: 32px; + } +} + +.selector-12 { + padding-right: calc(21.2px + 0.9vw); +} +@media (min-width: 1200px) { + .selector-12 { + padding-right: 32px; + } +} + +.selector-13 { + padding-bottom: calc(21.2px + 0.9vw); +} +@media (min-width: 1200px) { + .selector-13 { + padding-bottom: 32px; + } +} + +.selector-14 { + padding-left: calc(21.2px + 0.9vw); +} +@media (min-width: 1200px) { + .selector-14 { + padding-left: 32px; + } +} + +.selector-15 { + margin: calc(21.2px + 0.9vw); +} +@media (min-width: 1200px) { + .selector-15 { + margin: 32px; + } +} + +.selector-16 { + margin-top: calc(21.2px + 0.9vw); +} +@media (min-width: 1200px) { + .selector-16 { + margin-top: 32px; + } +} + +.selector-17 { + margin-right: calc(21.2px + 0.9vw); +} +@media (min-width: 1200px) { + .selector-17 { + margin-right: 32px; + } +} + +.selector-18 { + margin-bottom: calc(21.2px + 0.9vw); +} +@media (min-width: 1200px) { + .selector-18 { + margin-bottom: 32px; + } +} + +.selector-19 { + margin-left: calc(21.2px + 0.9vw); +} +@media (min-width: 1200px) { + .selector-19 { + margin-left: 32px; + } +} + +.selector-20 { + margin: calc(21.2px + 0.9vw) calc(22.8px + 2.1vw); +} +@media (min-width: 1200px) { + .selector-20 { + margin: 32px 48px; + } +} + +.selector-21 { + margin: calc(21.2px + 0.9vw) calc(22.8px + 2.1vw) !important; +} +@media (min-width: 1200px) { + .selector-21 { + margin: 32px 48px !important; + } +} + +.selector-22 { + font-size: 0; +} + +.selector-23 { + margin: 0 calc(22.8px + 2.1vw); +} +@media (min-width: 1200px) { + .selector-23 { + margin: 0 48px; + } +} + +.selector-24 { + box-shadow: 0 0 calc(21.2px + 0.9vw) #f00, 0 0 calc(22.8px + 2.1vw) #0f0; +} +@media (min-width: 1200px) { + .selector-24 { + box-shadow: 0 0 32px #f00, 0 0 48px #0f0; + } +} + +.selector-25 { + --value: calc(22.8px + 2.1vw); +} +@media (min-width: 1200px) { + .selector-25 { + --value: 48px; + } +} + +.selector-26 { + font-size: 10px; +} + +.selector-27 { + margin: calc(-22.8px - 2.1vw); +} +@media (min-width: 1200px) { + .selector-27 { + margin: -48px; + } +} + +.selector-28 { + margin: -8px; +} diff --git a/test/expected/test-8.css b/test/expected/test-8.css index 135044a..88ddfe2 100644 --- a/test/expected/test-8.css +++ b/test/expected/test-8.css @@ -1,50 +1,231 @@ .selector-1 { background-color: #f00; width: 300px; - font-size: 2rem; } - @media (max-width: 1200px), (max-height: 1200px) { - .selector-1 { - font-size: calc(1.325rem + 0.9vmin) ; } } + font-size: calc(1.325rem + 0.9vmin); +} +@media (min-width: 1200px), (min-height: 1200px) { + .selector-1 { + font-size: 2rem; + } +} .selector-2 { - font-size: 2rem; } - @media (max-width: 1200px), (max-height: 1200px) { - .selector-2 { - font-size: calc(1.325rem + 0.9vmin) ; } } + font-size: calc(1.325rem + 0.9vmin); +} +@media (min-width: 1200px), (min-height: 1200px) { + .selector-2 { + font-size: 2rem; + } +} .selector-3 { - font-size: 2rem !important; } - @media (max-width: 1200px), (max-height: 1200px) { - .selector-3 { - font-size: calc(1.325rem + 0.9vmin) !important; } } + font-size: calc(1.325rem + 0.9vmin) !important; +} +@media (min-width: 1200px), (min-height: 1200px) { + .selector-3 { + font-size: 2rem !important; + } +} .selector-4 { - font-size: 2rem; } - @media (max-width: 1200px), (max-height: 1200px) { - .selector-4 { - font-size: calc(1.325rem + 0.9vmin) ; } } + font-size: calc(1.325rem + 0.9vmin); +} +@media (min-width: 1200px), (min-height: 1200px) { + .selector-4 { + font-size: 2rem; + } +} .selector-5 { - font-size: 2em; } + font-size: 2em; +} .selector-6 { - font-size: inherit; } + font-size: inherit; +} @supports (display: flex) { .selector-7 { - font-size: 1.75rem; } - @media (max-width: 1200px), (max-height: 1200px) { - .selector-7 { - font-size: calc(1.3rem + 0.6vmin) ; } } } + font-size: calc(1.3rem + 0.6vmin); + } + @media (min-width: 1200px), (min-height: 1200px) { + .selector-7 { + font-size: 1.75rem; + } + } +} .selector-8 { - font-size: 2rem; } - @media (max-width: 1200px), (max-height: 1200px) { - .selector-8 { - font-size: calc(1.325rem + 0.9vmin) ; } } + flex: 0 999 calc(4.325rem + 36.9vmin); +} +@media (min-width: 1200px), (min-height: 1200px) { + .selector-8 { + flex: 0 999 32rem; + } +} .selector-9 { - font-size: 2rem; } - @media (max-width: 1200px), (max-height: 1200px) { - .selector-9 { - font-size: calc(1.325rem + 0.9vmin) ; } } + padding: calc(1.325rem + 0.9vmin); +} +@media (min-width: 1200px), (min-height: 1200px) { + .selector-9 { + padding: 2rem; + } +} + +.selector-10 { + padding: calc(1.325rem + 0.9vmin); +} +@media (min-width: 1200px), (min-height: 1200px) { + .selector-10 { + padding: 2rem; + } +} + +.selector-11 { + padding-top: calc(1.325rem + 0.9vmin); +} +@media (min-width: 1200px), (min-height: 1200px) { + .selector-11 { + padding-top: 2rem; + } +} + +.selector-12 { + padding-right: calc(1.325rem + 0.9vmin); +} +@media (min-width: 1200px), (min-height: 1200px) { + .selector-12 { + padding-right: 2rem; + } +} + +.selector-13 { + padding-bottom: calc(1.325rem + 0.9vmin); +} +@media (min-width: 1200px), (min-height: 1200px) { + .selector-13 { + padding-bottom: 2rem; + } +} + +.selector-14 { + padding-left: calc(1.325rem + 0.9vmin); +} +@media (min-width: 1200px), (min-height: 1200px) { + .selector-14 { + padding-left: 2rem; + } +} + +.selector-15 { + margin: calc(1.325rem + 0.9vmin); +} +@media (min-width: 1200px), (min-height: 1200px) { + .selector-15 { + margin: 2rem; + } +} + +.selector-16 { + margin-top: calc(1.325rem + 0.9vmin); +} +@media (min-width: 1200px), (min-height: 1200px) { + .selector-16 { + margin-top: 2rem; + } +} + +.selector-17 { + margin-right: calc(1.325rem + 0.9vmin); +} +@media (min-width: 1200px), (min-height: 1200px) { + .selector-17 { + margin-right: 2rem; + } +} + +.selector-18 { + margin-bottom: calc(1.325rem + 0.9vmin); +} +@media (min-width: 1200px), (min-height: 1200px) { + .selector-18 { + margin-bottom: 2rem; + } +} + +.selector-19 { + margin-left: calc(1.325rem + 0.9vmin); +} +@media (min-width: 1200px), (min-height: 1200px) { + .selector-19 { + margin-left: 2rem; + } +} + +.selector-20 { + margin: calc(1.325rem + 0.9vmin) calc(1.425rem + 2.1vmin); +} +@media (min-width: 1200px), (min-height: 1200px) { + .selector-20 { + margin: 2rem 3rem; + } +} + +.selector-21 { + margin: calc(1.325rem + 0.9vmin) calc(1.425rem + 2.1vmin) !important; +} +@media (min-width: 1200px), (min-height: 1200px) { + .selector-21 { + margin: 2rem 3rem !important; + } +} + +.selector-22 { + font-size: 0; +} + +.selector-23 { + margin: 0 calc(1.425rem + 2.1vmin); +} +@media (min-width: 1200px), (min-height: 1200px) { + .selector-23 { + margin: 0 3rem; + } +} + +.selector-24 { + box-shadow: 0 0 calc(1.325rem + 0.9vmin) #f00, + 0 0 calc(1.425rem + 2.1vmin) #0f0; +} +@media (min-width: 1200px), (min-height: 1200px) { + .selector-24 { + box-shadow: 0 0 2rem #f00, 0 0 3rem #0f0; + } +} + +.selector-25 { + --value: calc(1.425rem + 2.1vmin); +} +@media (min-width: 1200px), (min-height: 1200px) { + .selector-25 { + --value: 3rem; + } +} + +.selector-26 { + font-size: 0.625rem; +} + +.selector-27 { + margin: calc(-1.425rem - 2.1vmin); +} +@media (min-width: 1200px), (min-height: 1200px) { + .selector-27 { + margin: -3rem; + } +} + +.selector-28 { + margin: -0.5rem; +} diff --git a/test/expected/test-9.css b/test/expected/test-9.css index 44c81dc..9998292 100644 --- a/test/expected/test-9.css +++ b/test/expected/test-9.css @@ -1,57 +1,253 @@ .selector-1 { background-color: #f00; width: 300px; - font-size: 32px; } - @media (max-width: 50rem), (max-height: 50rem) { - .selector-1 { - font-size: calc(16px + 2vmin) ; - min-width: 0vw; } } + font-size: calc(16px + 2vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-1 { + font-size: 32px; + } +} .selector-2 { - font-size: 32px; } - @media (max-width: 50rem), (max-height: 50rem) { - .selector-2 { - font-size: calc(16px + 2vmin) ; - min-width: 0vw; } } + font-size: calc(16px + 2vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-2 { + font-size: 32px; + } +} .selector-3 { - font-size: 32px !important; } - @media (max-width: 50rem), (max-height: 50rem) { - .selector-3 { - font-size: calc(16px + 2vmin) !important; - min-width: 0vw; } } + font-size: calc(16px + 2vmin) !important; + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-3 { + font-size: 32px !important; + } +} .selector-4 { - font-size: 32px; } - @media (max-width: 50rem), (max-height: 50rem) { - .selector-4 { - font-size: calc(16px + 2vmin) ; - min-width: 0vw; } } + font-size: calc(16px + 2vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-4 { + font-size: 32px; + } +} .selector-5 { - font-size: 2em; } + font-size: 2em; +} .selector-6 { - font-size: inherit; } + font-size: inherit; +} @supports (display: flex) { .selector-7 { - font-size: 28px; } - @media (max-width: 50rem), (max-height: 50rem) { - .selector-7 { - font-size: calc(15.2px + 1.6vmin) ; - min-width: 0vw; } } } + font-size: calc(15.2px + 1.6vmin); + min-width: 0vw; + } + @media (min-width: 50rem), (min-height: 50rem) { + .selector-7 { + font-size: 28px; + } + } +} .selector-8 { - font-size: 32px; } - @media (max-width: 50rem), (max-height: 50rem) { - .selector-8 { - font-size: calc(16px + 2vmin) ; - min-width: 0vw; } } + flex: 0 999 calc(112px + 50vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-8 { + flex: 0 999 512px; + } +} .selector-9 { - font-size: 32px; } - @media (max-width: 50rem), (max-height: 50rem) { - .selector-9 { - font-size: calc(16px + 2vmin) ; - min-width: 0vw; } } + padding: calc(16px + 2vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-9 { + padding: 32px; + } +} + +.selector-10 { + padding: calc(16px + 2vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-10 { + padding: 32px; + } +} + +.selector-11 { + padding-top: calc(16px + 2vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-11 { + padding-top: 32px; + } +} + +.selector-12 { + padding-right: calc(16px + 2vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-12 { + padding-right: 32px; + } +} + +.selector-13 { + padding-bottom: calc(16px + 2vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-13 { + padding-bottom: 32px; + } +} + +.selector-14 { + padding-left: calc(16px + 2vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-14 { + padding-left: 32px; + } +} + +.selector-15 { + margin: calc(16px + 2vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-15 { + margin: 32px; + } +} + +.selector-16 { + margin-top: calc(16px + 2vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-16 { + margin-top: 32px; + } +} + +.selector-17 { + margin-right: calc(16px + 2vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-17 { + margin-right: 32px; + } +} + +.selector-18 { + margin-bottom: calc(16px + 2vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-18 { + margin-bottom: 32px; + } +} + +.selector-19 { + margin-left: calc(16px + 2vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-19 { + margin-left: 32px; + } +} + +.selector-20 { + margin: calc(16px + 2vmin) calc(19.2px + 3.6vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-20 { + margin: 32px 48px; + } +} + +.selector-21 { + margin: calc(16px + 2vmin) calc(19.2px + 3.6vmin) !important; + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-21 { + margin: 32px 48px !important; + } +} + +.selector-22 { + font-size: 0; +} + +.selector-23 { + margin: 0 calc(19.2px + 3.6vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-23 { + margin: 0 48px; + } +} + +.selector-24 { + box-shadow: 0 0 calc(16px + 2vmin) #f00, 0 0 calc(19.2px + 3.6vmin) #0f0; + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-24 { + box-shadow: 0 0 32px #f00, 0 0 48px #0f0; + } +} + +.selector-25 { + --value: calc(19.2px + 3.6vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-25 { + --value: 48px; + } +} + +.selector-26 { + font-size: 10px; +} + +.selector-27 { + margin: calc(-19.2px - 3.6vmin); + min-width: 0vw; +} +@media (min-width: 50rem), (min-height: 50rem) { + .selector-27 { + margin: -48px; + } +} + +.selector-28 { + margin: -8px; +} diff --git a/test/less/main.less b/test/less/main.less index 3302d8d..02fc492 100644 --- a/test/less/main.less +++ b/test/less/main.less @@ -4,17 +4,17 @@ .selector-1 { background-color: #f00; width: 300px; - .responsive-font-size(32px); + .font-size(32px); } // responsive-font-size property with `rem` unit .selector-2 { - .responsive-font-size(2rem); + .font-size(2rem); } // responsive-font-size property with !important .selector-3 { - .responsive-font-size(2rem, true); + .font-size(2rem important); } // rfs shorthand @@ -24,12 +24,12 @@ // not supported unit .selector-5 { - .responsive-font-size(2em); + .font-size(2em); } // special value .selector-6 { - .responsive-font-size(inherit); + .font-size(inherit); } // responsive-font-size property inside @support-query @@ -41,10 +41,93 @@ // responsive-font-size property without unit .selector-8 { - .responsive-font-size(32); + .rfs(0 999 32rem, flex); } -// font-size shorthand +// padding property .selector-9 { - .font-size(2rem); + .rfs(2rem, padding); +} + +// padding shorthands +.selector-10 { + .padding(2rem); +} + +.selector-11 { + .padding-top(2rem); +} + +.selector-12 { + .padding-right(2rem); +} + +.selector-13 { + .padding-bottom(2rem); +} + +.selector-14 { + .padding-left(2rem); +} + +// margin shorthands +.selector-15 { + .margin(2rem); +} + +.selector-16 { + .margin-top(2rem); +} + +.selector-17 { + .margin-right(2rem); +} + +.selector-18 { + .margin-bottom(2rem); +} + +.selector-19 { + .margin-left(2rem); +} + +// Multiple values +.selector-20 { + .margin(2rem 3rem); +} + +// Multiple values with important +.selector-21 { + .margin(2rem 3rem important); +} + +// Zero test +.selector-22 { + .rfs(0); +} + +// Zero test +.selector-23 { + .margin(0 3rem); +} + +// Value with comma +.selector-24 { + .rfs(0 0 2rem #f00 ~"," 0 0 3rem #0f0, box-shadow); +} + +.selector-25 { + .rfs(3rem, --value); +} + +.selector-26 { + .font-size(10px); +} + +.selector-27 { + .margin(-3rem); +} + +.selector-28 { + .margin(-.5rem); } diff --git a/test/less/test-10.less b/test/less/test-10.less index d05bf48..991fc33 100644 --- a/test/less/test-10.less +++ b/test/less/test-10.less @@ -1,7 +1,7 @@ @import "../../less"; @import "main"; -@rfs-base-font-size: 12px; -@rfs-font-size-unit: px; +@rfs-base-value: 12px; +@rfs-unit: px; @rfs-breakpoint: 800; @rfs-breakpoint-unit: rem; @rfs-two-dimensional: true; diff --git a/test/less/test-11.less b/test/less/test-11.less new file mode 100644 index 0000000..137bfbf --- /dev/null +++ b/test/less/test-11.less @@ -0,0 +1,2 @@ +@import "main"; +@rfs-mode: "max-media-query"; diff --git a/test/less/test-2.less b/test/less/test-2.less index ce73abf..4c440ab 100644 --- a/test/less/test-2.less +++ b/test/less/test-2.less @@ -1,2 +1,2 @@ @import "main"; -@enable-responsive-font-sizes: false; +@enable-rfs: false; diff --git a/test/less/test-6.less b/test/less/test-6.less index 93fe09e..6aafade 100644 --- a/test/less/test-6.less +++ b/test/less/test-6.less @@ -1,2 +1,2 @@ @import "main"; -@rfs-base-font-size: 17px; +@rfs-base-value: 17px; diff --git a/test/less/test-7.less b/test/less/test-7.less index 0d712c8..8ea8d7d 100644 --- a/test/less/test-7.less +++ b/test/less/test-7.less @@ -1,2 +1,2 @@ @import "main"; -@rfs-font-size-unit: px; +@rfs-unit: px; diff --git a/test/less/test-9.less b/test/less/test-9.less index e8d7c36..bd2e356 100644 --- a/test/less/test-9.less +++ b/test/less/test-9.less @@ -1,6 +1,6 @@ @import "main"; -@rfs-base-font-size: 12px; -@rfs-font-size-unit: px; +@rfs-base-value: 12px; +@rfs-unit: px; @rfs-breakpoint: 800; @rfs-breakpoint-unit: rem; @rfs-two-dimensional: true; 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' } }; diff --git a/test/sass/_main.scss b/test/sass/_main.scss new file mode 100644 index 0000000..9a1a8e3 --- /dev/null +++ b/test/sass/_main.scss @@ -0,0 +1,137 @@ +@import "../../scss"; + +// font-size property with `px` unit +.selector-1 { + background-color: #f00; + width: 300px; + @include font-size(32px); +} + +// font-size property with `rem` unit +.selector-2 { + @include font-size(2rem); +} + +// font-size property with !important +.selector-3 { + @include font-size(2rem !important); +} + +// rfs shorthand +.selector-4 { + @include rfs(2rem); +} + +// not supported unit +.selector-5 { + @include font-size(2em); +} + +// special value +.selector-6 { + @include font-size(inherit); +} + +// font-size property inside @support-query +@supports (display: flex) { + .selector-7 { + @include rfs(28px); + } +} + +// flex property with unitless values +.selector-8 { + @include rfs(0 999 32rem, flex); +} + +// padding property +.selector-9 { + @include rfs(2rem, $property: padding); +} + +// padding shorthands +.selector-10 { + @include padding(2rem); +} + +.selector-11 { + @include padding-top(2rem); +} + +.selector-12 { + @include padding-right(2rem); +} + +.selector-13 { + @include padding-bottom(2rem); +} + +.selector-14 { + @include padding-left(2rem); +} + +// margin shorthands +.selector-15 { + @include margin(2rem); +} + +.selector-16 { + @include margin-top(2rem); +} + +.selector-17 { + @include margin-right(2rem); +} + +.selector-18 { + @include margin-bottom(2rem); +} + +.selector-19 { + @include margin-left(2rem); +} + +// Multiple values +.selector-20 { + @include margin(2rem 3rem); +} + +// Multiple values with important +.selector-21 { + @include margin(2rem 3rem !important); +} + +// Zero test +.selector-22 { + @include rfs(0); +} + +// Zero combination test +.selector-23 { + @include margin(0 3rem); +} + +// Value with comma +.selector-24 { + @include rfs(0 0 2rem #f00 #{","} 0 0 3rem #0f0, box-shadow); +} + +// Custom properties +.selector-25 { + @include rfs(3rem, --value); +} + +// Test small value +.selector-26 { + @include font-size(10px); +} + +// Negative units +.selector-27 { + @include margin(-3rem); +} + +// Small negative unit +.selector-28 { + @include margin(-.5rem); +} diff --git a/test/sass/main.scss b/test/sass/main.scss deleted file mode 100644 index c92eef6..0000000 --- a/test/sass/main.scss +++ /dev/null @@ -1,50 +0,0 @@ -@import "../../scss"; - -// responsive-font-size property with `px` unit -.selector-1 { - background-color: #f00; - width: 300px; - @include responsive-font-size(32px); -} - -// responsive-font-size property with `rem` unit -.selector-2 { - @include responsive-font-size(2rem); -} - -// responsive-font-size property with !important -.selector-3 { - @include responsive-font-size(2rem, true); -} - -// rfs shorthand -.selector-4 { - @include rfs(2rem); -} - -// not supported unit -.selector-5 { - @include responsive-font-size(2em); -} - -// special value -.selector-6 { - @include responsive-font-size(inherit); -} - -// responsive-font-size property inside @support-query -@supports (display: flex) { - .selector-7 { - @include rfs(28px); - } -} - -// responsive-font-size property without unit -.selector-8 { - @include responsive-font-size(32); -} - -// font-size shorthand -.selector-9 { - @include font-size(2rem); -} diff --git a/test/sass/test-10.scss b/test/sass/test-10.scss index 378e100..4b54c16 100644 --- a/test/sass/test-10.scss +++ b/test/sass/test-10.scss @@ -1,5 +1,5 @@ -$rfs-base-font-size: 12px; -$rfs-font-size-unit: px; +$rfs-base-value: 12px; +$rfs-unit: px; $rfs-breakpoint: 800; $rfs-breakpoint-unit: rem; $rfs-two-dimensional: true; diff --git a/test/sass/test-11.scss b/test/sass/test-11.scss new file mode 100644 index 0000000..22a4804 --- /dev/null +++ b/test/sass/test-11.scss @@ -0,0 +1,2 @@ +$rfs-mode: max-media-query; +@import "main"; diff --git a/test/sass/test-2.scss b/test/sass/test-2.scss index 9c8f267..c3420ea 100644 --- a/test/sass/test-2.scss +++ b/test/sass/test-2.scss @@ -1,2 +1,2 @@ -$enable-responsive-font-sizes: false; +$enable-rfs: false; @import "main"; diff --git a/test/sass/test-6.scss b/test/sass/test-6.scss index 926213e..4a250bf 100644 --- a/test/sass/test-6.scss +++ b/test/sass/test-6.scss @@ -1,2 +1,2 @@ -$rfs-base-font-size: 17px; +$rfs-base-value: 17px; @import "main"; diff --git a/test/sass/test-7.scss b/test/sass/test-7.scss index ceace3a..67d1404 100644 --- a/test/sass/test-7.scss +++ b/test/sass/test-7.scss @@ -1,2 +1,2 @@ -$rfs-font-size-unit: px; +$rfs-unit: px; @import "main"; diff --git a/test/sass/test-9.scss b/test/sass/test-9.scss index 84f6f73..7d9a4c1 100644 --- a/test/sass/test-9.scss +++ b/test/sass/test-9.scss @@ -1,5 +1,5 @@ -$rfs-base-font-size: 12px; -$rfs-font-size-unit: px; +$rfs-base-value: 12px; +$rfs-unit: px; $rfs-breakpoint: 800; $rfs-breakpoint-unit: rem; $rfs-two-dimensional: true; diff --git a/test/stylus/main.styl b/test/stylus/main.styl index 644bd9a..22f2f17 100644 --- a/test/stylus/main.styl +++ b/test/stylus/main.styl @@ -3,29 +3,86 @@ .selector-1 background-color: #f00 width: 300px - responsive-font-size(32px) + rfs(32px) .selector-2 - responsive-font-size(2rem) + rfs(2rem) .selector-3 - responsive-font-size(2rem, true) + rfs(2rem !important) .selector-4 rfs(2rem) .selector-5 - responsive-font-size(2em) + rfs(2em) .selector-6 - responsive-font-size(inherit) + rfs(inherit) @supports (display: flex) .selector-7 rfs(28px) .selector-8 - responsive-font-size(32) + rfs(0 999 32rem, flex) .selector-9 - responsive-font-size(2rem) + rfs(2rem, padding) + +.selector-10 + rfs-padding(2rem) + +.selector-11 + rfs-padding-top(2rem) + +.selector-12 + rfs-padding-right(2rem) + +.selector-13 + rfs-padding-bottom(2rem) + +.selector-14 + rfs-padding-left(2rem) + +.selector-15 + rfs-margin(2rem) + +.selector-16 + rfs-margin-top(2rem) + +.selector-17 + rfs-margin-right(2rem) + +.selector-18 + rfs-margin-bottom(2rem) + +.selector-19 + rfs-margin-left(2rem) + +.selector-20 + rfs-margin(2rem 3rem) + +.selector-21 + rfs-margin(2rem 3rem !important) + +.selector-22 + rfs(0) + +.selector-23 + rfs-margin(0 3rem) + +.selector-24 + rfs(0 0 2rem #f00\, 0 0 3rem #0f0, box-shadow) + +.selector-25 + rfs(3rem, --value) + +.selector-26 + rfs-font-size(10px) + +.selector-27 + rfs-margin(-3rem) + +.selector-28 + rfs-margin(-.5rem) diff --git a/test/stylus/test-10.styl b/test/stylus/test-10.styl index 695140f..1797f01 100644 --- a/test/stylus/test-10.styl +++ b/test/stylus/test-10.styl @@ -1,5 +1,5 @@ -$rfs-base-font-size = 12px -$rfs-font-size-unit = px +$rfs-base-value = 12px +$rfs-unit = px $rfs-breakpoint = 800 $rfs-breakpoint-unit = rem $rfs-two-dimensional = true diff --git a/test/stylus/test-11.styl b/test/stylus/test-11.styl new file mode 100644 index 0000000..03c0fd2 --- /dev/null +++ b/test/stylus/test-11.styl @@ -0,0 +1,2 @@ +$rfs-mode = "max-media-query" +@import "main" diff --git a/test/stylus/test-2.styl b/test/stylus/test-2.styl index 1ecdedc..3fba4fe 100644 --- a/test/stylus/test-2.styl +++ b/test/stylus/test-2.styl @@ -1,2 +1,2 @@ -$enable-responsive-font-sizes = false +$enable-rfs = false @import "main"; diff --git a/test/stylus/test-6.styl b/test/stylus/test-6.styl index f3df4b1..476d8d5 100644 --- a/test/stylus/test-6.styl +++ b/test/stylus/test-6.styl @@ -1,2 +1,2 @@ -$rfs-base-font-size = 17px +$rfs-base-value = 17px @import "main"; diff --git a/test/stylus/test-7.styl b/test/stylus/test-7.styl index fce5ecd..070bad8 100644 --- a/test/stylus/test-7.styl +++ b/test/stylus/test-7.styl @@ -1,2 +1,2 @@ -$rfs-font-size-unit = px +$rfs-unit = px @import "main"; diff --git a/test/stylus/test-9.styl b/test/stylus/test-9.styl index a860640..e37acb9 100644 --- a/test/stylus/test-9.styl +++ b/test/stylus/test-9.styl @@ -1,5 +1,5 @@ -$rfs-base-font-size = 12px -$rfs-font-size-unit = px +$rfs-base-value = 12px +$rfs-unit = px $rfs-breakpoint = 800 $rfs-breakpoint-unit = rem $rfs-two-dimensional = true diff --git a/test/tests.json b/test/tests.json index f61f030..726ebd1 100644 --- a/test/tests.json +++ b/test/tests.json @@ -38,5 +38,9 @@ { "id": "test-10", "name": "Include mixins multiple times" + }, + { + "id": "test-11", + "name": "Use max-media-query mode" } ] |
