goodguyry / postcss-tidy-columns Goto Github PK

Using tidy-span() or tidy-offset() functions without a siteMax option value errors.

TypeError: Cannot read property 'replace' of undefined

      43 |       //   full = full.replace('calc', '');
      44 |       // }
    > 45 |       full = full.replace('calc', '');
         |                   ^
      46 |     }
      47 | 
      48 |     // Replace declaration(s) with cloned and updated declarations.

Refs #38

Config values with unsupported units are already ignored, and zero values are allowed in config options. However, a test to ignore a unitless non-zero value still fails.

Refs #34

Nested calc() is only being stripped when it is at the beginning of the expression.

// Passing.
div { 
  margin-left: calc(tidy-offset(3) + 20px); 
}

// Failing.
div { 
  margin-left: calc(20px + tidy-offset(3)); 
}

Tidy functions should respect locally-scoped plugin settings.

Input:

@tidy columns 12;
@tidy gap 1.25rem;
@tidy edge 2rem;
@tidy site-max 90rem;

div {
	@tidy columns 9;
	margin-left: tidy-offset(2);
}

Expected:

div {
	margin-left: calc((((100vw - 2rem * 2) / 9 - 1.1458rem) * 2) + 1.25rem * 2);
}

Actual:

div {
	margin-left: calc((((100vw - 2rem * 2) / 12 - 1.1458rem) * 2) + 1.25rem * 2);
}

Currently, the only way to define more than one grid config is to use @tidy rules inside rule blocks, which override the globally-defined grid spec. This gets tedious at scale, and can cause unexpected outcomes if the developer forgets to add the rule(s).

Proposal: Always define the grid specs in the JavaScript options object, rather than in CSS, and use an array of specs to define where one spec ends and another begins.

This is only useful when small, medium, or large screen grid specs differ, otherwise defining an array of a single settings object would be weird and unintuitive. The plugin should detect the type (object vs. array) and collect values appropriately.

Details:

• Mobile-first breakpoint definitions
• Presence of a min key defines a breakpoint config
• Base options cascade through other settings unless overridden

Example 1.
Small- and medium-screen grids' edge and gap specs differ from those of the large-screen grid.

[
	{
		// No `min` key
		// Settings inherited by other config objects
		columns: 12,
		gap: '0.625rem',
		edge: '1rem',
		siteMax: '90rem',
	},
	{
		// Only @ (min-width: 1024px) breakpoint
		min: '1024px',
		edge: '1.25rem',
		gap: '1rem',
	{
]

Example 2.
There is no difference between grid specs across screen sizes, or the developer intends to only use tidy-columns at one specific breakpoint.

// No different from current API
{
	columns: 12,
	gap: '1rem',
	edge: '1.25rem',
	siteMax: '90rem',
}

Pros:

• No more @tidy rules for global config
• No more scoped settings (?)
• Setup hopefully more intuitive

Cons:

• How do we ensure breakpoint values of different value-types (rem, em, px) are calculated and evaluated correctly?
  • e.g., In the Example 1 above, a tidy-span property inside a 48rem breakpoint should know which config to use
• MOAR CONFIG

Notes:

• @tidy rule scoping is the only way to make ad-hoc modifications to the global grid spec, so the option for CSS settings should persist in some capacity, or be replaced.

Only the first instance of a tidy function is replaced by the plugin.

Example:

.span-function--multi {
	padding: 0 tidy-offset(2) 0 tidy-offset-full(3);
	margin: 0 calc(tidy-offset-full(2) + 50px) 0 tidy-offset(1);
}

Expected:

.span-function--multi {
	padding: 0 calc((((100vw - 0.625rem * 2) / 12 - 1.1458rem) * 2) + 1.25rem * 2) 0 calc((((90rem - 0.625rem * 2) / 12 - 1.1458rem) * 3) + 1.25rem * 3);
	margin: 0 calc(((((90rem - 0.625rem * 2) / 12 - 1.1458rem) * 2) + 1.25rem * 2) + 50px) 0 calc(((100vw - 0.625rem * 2) / 12 - 1.1458rem) + 1.25rem);
}

Actual:

.span-function--multi {
	padding: 0 calc((((100vw - 0.625rem * 2) / 12 - 1.1458rem) * 2) + 1.25rem * 2) 0 tidy-offset-full(3);
	margin: 0 calc(((((90rem - 0.625rem * 2) / 12 - 1.1458rem) * 2) + 1.25rem * 2) + 50px) 0 tidy-offset(1);
}

Refs #32

tidy-var() should support the following:

• Using columns as an argument
• Use as a tidy-span() or tidy-offset() value

Failing tests added via 513132d

When more than one tidy-* function is used in the same declaration, PostCSS throws an error with option debug: true.

div {
  margin: 0 tidy-var(edge) 0 tidy-var(gap);
}

Expected:

div {
  /* margin: 0 tidy-var(edge) 0 tidy-var(gap) */
  margin: 0 1.875rem 0 1.25rem;
}

Actual:

TypeError: Cannot read property 'insertAfter' of undefined

When @tidy options are used in a block, their values persist and must be manually overridden to restore the global options.

Given the following:

@tidy columns 16;
@tidy gap 0.625rem / true;
@tidy edge 32px;
@tidy site-max 75rem;

div {
	@tidy columns 12;
	@tidy gap 1.25rem / false;
	tidy-span: 2;
}
@media (min-width: 60rem) {
	div {
		@tidy edge 1rem;
		tidy-span: 3;
		tidy-offset-left: 2;
	}
}

The block in the media query will inherit the columns and gap values from the previous block.

Acceptance criteria:
Locally-scoped options do not interfere with the global options, and do not cascade through to other rule blocks.

When a tidy-* property follows a tidy-* function nested within a calc() function, the calc is stripped from the tidy-* property's output.

.figcaption {
  @include auto-margins;
  tidy-span: tidy-var(columns);

  @media (min-width: 64rem)
    margin-left: calc(tidy-offset(10) + tidy-var(edge));
    tidy-span: 2;
  }
}

Output:

@media (min-width: 64rem)
	.figcaption {
		margin-left: calc(((((100vw - 1.875rem * 2) / 12 - 1.1458rem) * 10) + 1.25rem * 10) + 1.875rem);
		width: ((((100vw - 1.875rem * 2)/12 - 1.1458rem) * 2) + 1.25rem);
		max-width: ((((90rem - 1.875rem * 2)/12 - 1.1458rem) * 2) + 1.25rem);
	}
}

Expected:

@media (min-width: 64rem)
	.figcaption {
		margin-left: calc(((((100vw - 1.875rem * 2) / 12 - 1.1458rem) * 10) + 1.25rem * 10) + 1.875rem);
		width: calc((((100vw - 1.875rem * 2)/12 - 1.1458rem) * 2) + 1.25rem);
		max-width: calc((((90rem - 1.875rem * 2)/12 - 1.1458rem) * 2) + 1.25rem);
	}
}

Diff:

-		width: ((((100vw - 1.875rem * 2)/12 - 1.1458rem) * 2) + 1.25rem);
-		max-width: ((((90rem - 1.875rem * 2)/12 - 1.1458rem) * 2) + 1.25rem);
+		width: calc((((100vw - 1.875rem * 2)/12 - 1.1458rem) * 2) + 1.25rem);
+		max-width: calc((((90rem - 1.875rem * 2)/12 - 1.1458rem) * 2) + 1.25rem);