0.4.1

CHANGELOG.md

@@ -1,11 +1,21 @@
 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 0.4.1
+
+**Added**
+
+- Support for automatically duplicating declarations that should propagate through breakpoints (#52)
+
+**Fixed**
+
+- Updates dependencies to fix known vulnerabilities (#55)
+
 ## 0.4.0
 
 **Added**
 
-- Support for configuring different grid specs across multiple breakpoints (#20)
+- Support for configuring different column specs across multiple breakpoints (#20)
 - Use the `tidy-var()` function to retrieve option values in declarations (#27, #32)
 - Use the `debug` option to maintain the input declaration as a comment (#45, #48)
 
@@ -22,7 +32,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 **Removed**
 
-- The `addGap` option for automatically adding the grid gap margin to column elements (#24)
+- The `addGap` option for automatically adding the column gap margin to column elements (#24)
 - Support for Node 6 (#41)
 
 ## 0.3.4

README.md

@@ -60,6 +60,7 @@ See [PostCSS] docs for examples for your environment.
 
 * [Tidy Properties](#tidy-properties)
 * [Tidy Functions](#tidy-functions)
+* [!tidy Rule](#tidy-rule)
 * [Options](#options)
 * [Options Cascade](#options-cascade)
 * [Using CSS Custom Properties in setting values](#using-css-custom-properties-in-setting-values)
@@ -131,7 +132,13 @@ Use `none` to bypass a required value. A single value applies to both `left` and
 
 These functions are provided for incorporating the `tidy-` properties' output without using the properties themselves. These can be used on their own or nested inside a `calc()` function, and allow for more control over the declarations added by the plugin.
 
-When using these functions, **the `siteMax`-based static value will not be output**. Use the `tidy-span-full()` and `tidy-offset-full()` functions to set the static `span` and `offset` widths, respectively.
+**Unlike the above _properties_, these functions only output one value:**
+* `tidy-[offset|span]()` outputs the fluid value
+* `tidy-[offset|span]-full()` outputs the static value, based on the `siteMax` in the configuration.
+
+Be sure to use the function most appropriate for your use-case. Typically, this means redeclaring the the `-full` version of the function in the breakpoint at which the site becomes static width. 
+
+**TIP:** For any function declarations that should stay the same across breakpoint configurations, or simply to redclare the `-full` version of a function, append the declaration with `!tidy` to signal to the plugin to handle duplicating the declaration.
 
 ### Span Function
 
@@ -190,12 +197,40 @@ When using these functions, **the `siteMax`-based static value will not be outpu
 > }
 > ```
 
+## `!tidy` Rule
+
+`!tidy` signifies that a declaration should cascade through configured 
+breakpoint changes.
+
+> #### Example
+>
+> Assuming one '64rem' breakpoint change configured...
+>
+> ```css
+>
+> /* Input: */
+> div {
+>   tidy-span: 3 !tidy;
+> }
+>
+> /* Output: */
+> div {
+>   tidy-span: 3;
+> }
+>
+> @media (min-width: 64rem) {
+>   div {
+>     tidy-span: 3;
+>   }
+> }
+> ```
+
 ## Options
 
 |Name|Type|Default|Description|
 |:--:|:--:|:-----:|:----------|
-|[`columns`](#columns)|`{Number}`|`undefined`|The number of grid columns.|
-|[`gap`](#gap)|`{String}`|`undefined`|The width of grid column gaps.|
+|[`columns`](#columns)|`{Number}`|`undefined`|The number of columns.|
+|[`gap`](#gap)|`{String}`|`undefined`|The width of column gaps.|
 |[`siteMax`](#siteMax)|`{String}`|`undefined`|The max-width of the site.|
 |[`edge`](#edge)|`{String}`|`undefined`|The value of the site's edge padding.|
 |[`debug`](#debug)|`{Boolean}`|`false`|Add debug comments.|
@@ -272,10 +307,10 @@ div {
 
 ### `breakpoints`
 
-Use the `breakpoints` object to define a grid configuration that will change based on screen size.
+Use the `breakpoints` object to define a columns configuration that will change based on screen size.
 
-1. Define the small-screen grid in the root object.
-2. Define one or more `min-width` breakpoints at which the grid spec will change, and any configuration options that will change.
+1. Define the small-screen columns configuration in the root object.
+2. Define one or more `min-width` breakpoints at which the columns configuration will change, and any configuration options that will change.
 4. The configuration settings cascade up from the root to the largest `breakpoint`.
 
 ```js
@@ -296,7 +331,7 @@ require('postcss-tidy-columns')({
 });
 ```
 
-See the [Scoped Settings](https://github.com/goodguyry/postcss-tidy-columns/wiki/Scoped-Settings) Wiki page for more.
+See the [Gotchas](https://github.com/goodguyry/postcss-tidy-columns/wiki/Gotchas#configuration-breakpoints-caveats) Wiki page for more.
 
 ## Options Cascade
 

docs/_layouts/page.html

@@ -14,7 +14,7 @@
 
 			<div class="article-header__intro">
 				<h1>{{ page.title }}</h1>
-				<p>This page demonstrates incorporating Tidy Columns into your flexbox layout. Toggle a grid overlay with the button in the header, and view <a href="/css/main.css">the CSS file</a> for additional context.</p>
+				<p>This page demonstrates incorporating Tidy Columns into your flexbox layout. Toggle a grid overlay with the button in the header, and view <a href="css/main.css">the CSS file</a> for additional context.</p>
 				<p>On desktop, this title holder is absolutely-positioned, which means it's out of document flow, so the image caption can't naturally sit next to it. Use Tidy Columns to add a left offset to the caption to correct maintain alignment and spacing.</p>
 			</div>
 

docs/_scss/article.scss

@@ -78,11 +78,20 @@
 
   @media (min(md)) {
     /**
-     * The header intro should span 6 columns on medium screens.
+     * The header intro should span 6 columns on medium screens AND large screens.
      *
-     * tidy-span: 6;
+     * Because I am using a breakpoint configuration to set up two distinct
+     * Tidy Columns configurations, the declaration must be re-declared within
+     * the breakpoint to ensure the correct values are used in the calculation.
+     *
+     * Append !tidy to the declaration to automatically duplicate it inside the
+     * configuration's breakpoints.
+     *
+     * When compiling from Sass, you are required to escape the exclamation: \!tidy
+     *
+     * tidy-span: 6 !tidy;
      */
-    tidy-span: 6;
+    tidy-span: 6 \!tidy;
   }
 
   @media (min(lg)) {
@@ -93,16 +102,5 @@
     padding-right: rem(64);
     position: absolute;
     right: 0;
-    /**
-     * Because I am using a breakpoint configuration to set up two distinct
-     * Tidy Columns configurations, the declaration must be re-declared within
-     * the breakpoint to ensure the correct values are used in the calculation.
-     *
-     * Check out the Tidy Columns Wiki for simple `keep-tidy` Sass mixin.
-     * @see https://github.com/goodguyry/postcss-tidy-columns/wiki
-     *
-     * tidy-span: 6;
-     */
-    tidy-span: 6;
   }
 }

docs/_scss/content.scss

@@ -6,11 +6,20 @@
   @include auto-margins;
   /**
    * The design calls for the content area to be 6 columns wide (out of 8) on
-   * small screens.
+   * small screens AND large screens.
    *
-   * tidy-span: 6;
+   * Because I am using a breakpoint configuration to set up two distinct
+   * Tidy Columns configurations, the declaration must be re-declared within
+   * the breakpoint to ensure the correct values are used in the calculation.
+   *
+   * Append !tidy to the declaration to automatically duplicate it inside the
+   * configuration's breakpoints.
+   *
+   * When compiling from Sass, you are required to escape the exclamation: \!tidy
+   *
+   * tidy-span: 6 !tidy;
    */
-  tidy-span: 6;
+  tidy-span: 6 \!tidy;
 
   @media (min(lg)) {
     /**
@@ -21,20 +30,6 @@
      * tidy-offset-left: 2;
      */
     tidy-offset-left: 2;
-    /**
-     * The design calls for the content area to be 6 columns wide (out of 12) on
-     * larger screens.
-     *
-     * Because I am using a breakpoint configuration to set up two distinct
-     * Tidy Columns configurations, the declaration must be re-declared within
-     * the breakpoint to ensure the correct values are used in the calculation.
-     *
-     * Check out the Tidy Columns Wiki for simple `keep-tidy` Sass mixin.
-     * @see https://github.com/goodguyry/postcss-tidy-columns/wiki
-     *
-     * tidy-span: 6;
-     */
-      tidy-span: 6;
   }
 }
 
@@ -132,27 +127,21 @@
      * the edge of the site, then tack on the edge value to pull the figure to
      * the edge of the site's max-width.
      *
-     * margin-left: calc(tidy-offset(-1) - tidy-var(edge));
+     * When using tidy-* functions in non-width properties, the `-full` version
+     * of the function must be declared in a media query matching the site's
+     * max-width to ensure the static value is calculated based on the site's
+     * max-width rather than `vw` units. Appending the declaration with !tidy
+     * automates this..
+     *
+     * margin-left: calc(tidy-offset(-1) - tidy-var(edge)) !tidy;
      */
-    margin-left: calc(tidy-offset(-2) - tidy-var(edge));
+    margin-left: calc(tidy-offset(-2) - tidy-var(edge)) \!tidy;
     max-width: tidy-var(siteMax);
 
     .content__img {
       margin-bottom: 0;
     }
   }
-
-  @media (min(full)) {
-    /**
-     * When using tidy-* functions in non-width properties, the `-full` version
-     * of the function must be declared in a media query matching the site's
-     * max-width to ensure the static value is calculated based on the site's
-     * max-width rather than `vw` units.
-     *
-     * margin-left: calc(tidy-offset-full(-2) - tidy-var(edge));
-     */
-    margin-left: calc(tidy-offset-full(-2) - tidy-var(edge));
-  }
 }
 
 .content__figcaption--fullwidth {
@@ -173,23 +162,17 @@
      * we must include the implied edge value in the offset so the distance is
      * correct.
      *
-     * right: calc(tidy-var(edge) + tidy-offset(1));
-     */
-    right: calc(tidy-var(edge) + tidy-offset(1));
-    // Override the `tidy-span` property from the rule's root.
-    width: auto;
-  }
-
-  @media (min(full)) {
-    /**
      * When using tidy-* functions in non-width properties, the `-full` version
      * of the function must be declared in a media query matching the site's
      * max-width to ensure the static value is calculated based on the site's
-     * max-width rather than `vw` units.
+     * max-width rather than `vw` units. Appending the declaration with !tidy
+     * automates this..
      *
-     * right: calc(tidy-var(edge) + tidy-offset-full(1));
+     * right: calc(tidy-var(edge) + tidy-offset(1)) \!tidy;
      */
-    right: calc(tidy-var(edge) + tidy-offset-full(1));
+    right: calc(tidy-var(edge) + tidy-offset(1)) \!tidy;
+    // Override the `tidy-span` property from the rule's root.
+    width: auto;
   }
 }
 

docs/_scss/site-footer.scss

@@ -7,47 +7,39 @@
   font-size: rem(12);
   margin-bottom: rem(10);
   /**
-   * Quick and dirty full-width container.
+   * Quick and dirty, fully-responsive, full-width container.
    *
-   * tidy-span: tidy-var(columns);
+   * Because I am using a breakpoint configuration to set up two distinct
+   * Tidy Columns configurations, the declaration must be re-declared within
+   * the breakpoint to ensure the correct values are used in the calculation.
+   *
+   * Append !tidy to the declaration to automatically duplicate it inside the
+   * configuration's breakpoints.
+   *
+   * When compiling from Sass, you are required to escape the exclamation: \!tidy
+   *
+   * tidy-span: tidy-var(columns) !tidy;
    */
-  tidy-span: tidy-var(columns);
+  tidy-span: tidy-var(columns) \!tidy;
 
-  @media(min(lg)) {
+  p {
     /**
+     * The design calls for the footer content to be offset by 1.5 columns.
+     * It happens.
+     *
+     * This offset is for all screen sizes.
+     *
      * Because I am using a breakpoint configuration to set up two distinct
      * Tidy Columns configurations, the declaration must be re-declared within
      * the breakpoint to ensure the correct values are used in the calculation.
      *
-     * Check out the Tidy Columns Wiki for simple `keep-tidy` Sass mixin.
-     * @see https://github.com/goodguyry/postcss-tidy-columns/wiki
+     * Append !tidy to the declaration to automatically duplicate it inside the
+     * configuration's breakpoints.
      *
-     * tidy-span: tidy-var(columns);
-     */
-    tidy-span: tidy-var(columns);
-  }
-
-  p {
-    /**
-     * The design calls for the footer content to be offset by 1.5 columns.
-     * It happens.
+     * When compiling from Sass, you are required to escape the exclamation: \!tidy
      *
-     * tidy-offset-left: 1.5;
+     * tidy-offset-left: 1.5 !tidy;
      */
-    tidy-offset-left: 1.5;
-
-    @media(min(lg)) {
-      /**
-       * Because I am using a breakpoint configuration to set up two distinct
-       * Tidy Columns configurations, the declaration must be re-declared within
-       * the breakpoint to ensure the correct values are used in the calculation.
-       *
-       * Check out the Tidy Columns Wiki for simple `keep-tidy` Sass mixin.
-       * @see https://github.com/goodguyry/postcss-tidy-columns/wiki
-       *
-       * tidy-offset-left: 1.5;
-       */
-      tidy-offset-left: 1.5;
-    }
+    tidy-offset-left: 1.5 \!tidy;
   }
 }