PostCSS atomic plugin

This plugin should take a CSS declaration and outut it as atomic declarations.

Input

display: block;
color: blue;

Output

.{group}{value} {
  display: block;
}
.{group}{value} {
  color: blue;
}

Look at the spike implementation here: https://github.com/atlassian-labs/compiled/pull/274/files#diff-3d0e3948c146d9c40c8c173d78fda7e0

Each declaration should be made up of two hashes, a group, and a value, each 4 characters long.

.{grouphash}{valuehash}

We’re going to use the group as a unique identifier to make overrides work correctly.

A group is defined as:

{atrules}{selectors}{propertyname}

A value is defined as:

{value}

At rules

Ensure they’re combined.

display: block;

@media (min-width: 500px) {
  display: flex;
  color: red;
}

.{group}{value} { display: block }
@media (min-width: 500px) {
  .{group}{value} { display: flex }
  .{group}{value} { color: red }
}

Autoprefixing

Properties that need autoprefixing shouldn’t create duplicate atomic entries.

display: grid;

.{group}{value} {
  display:-ms-grid;
  display:grid
}

Duplicate declarations

We should remove any fallback values and lean on autoprefixer from above to do the work if its needed.

display: block;
display: flex;

.{group}{value} {
  display:flex
}

Testing notes

We need to make sure all kinds of combinations of selectors work.

• top level property
• properties in nested selectors
• top level property inside an at rule
• properties in nested selectors in an at rule
• should callback with all created class names to be used later on
• ensure if any property that needs prefixing has it in the atomic declaration

Follow up tasks

We need to keep this ticket in a reasonable size.

Shorthands

Shorthand properties need to be blown up. For a list see: https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties. This should be its own PostCSS plugin.

-background: black;
+background-color: black;

Q: This means that when values are omitted should we generate their initial values as per spec? Probably. But we could also not.

Nested at rules

We also need to support nested at rules, see: https://css-tricks.com/can-you-nest-media-and-support-queries/. We’ll implement it later.

[TxHawks]

Sure thing, here’s a working example: https://codepen.io/veganarchist/pen/wvGEdVb

The universal selector (*) has a specificity of 0, so .a > * + *'s specificity is 0.1.0, just like any other single class selector.

[itsdouges]

Thanks! We’ll keep it in mind.