Handle At-rules (@media, @keyframes, etc)

[TheJaredWilcurt]

MDN lists these as all the At-rules, though this list may be incomplete:

At-rule name	Type	Atomize?	Link
@document	Grouping	Yes ✔️	MDN
@-moz-document	Grouping	Yes ✔️	MDN
@layer	Double Group	Yes ✔️	MDN
@media	Double Group	Yes ✔️	MDN
@supports	Double Group	Yes ✔️	MDN
@charset	1 line	No	MDN
@import	1 line	No	MDN
@namespace	1 line	No	MDN
@font-feature-values	Double Group	No	MDN
@keyframes	Double Group	No	MDN
@page	Double Group	No	MDN
@color-profile	Grouping	No	MDN
@counter-style	Grouping	No	MDN
@font-face	Grouping	No	MDN
@property	Grouping	No	MDN
@viewport (deprecated)	Grouping	No	janky site

Some @ rules can contain CSS classes, they have been noted in the table with "Atomize? Yes".

For anything else, it should just pass through to the output CSS file untouched.

Example:

/* INPUT */
@media screen and (min-width: 900px) {
  .example {
    padding: 8px;
    margin: 12px;
  }
}

/* ATOMIZED */
@media screen and (min-width: 900px) {
  /* rp__@media screen and (min-width:900px){padding:8px} */
  .rp____--ATSIGNmedia_____-screen_____-and_____-__--OPENPARENmin-width__--COLON900px__--CLOSEPAREN__--OPENCURLYBRACEpadding__--COLON8px__--CLOSECURLYBRACE {
    padding: 8px;
  }
  /* rp__@media screen and (min-width:900px){margin:12px} */
  .rp____--ATSIGNmedia_____-screen_____-and_____-__--OPENPARENmin-width__--COLON900px__--CLOSEPAREN__--OPENCURLYBRACEmargin__--COLON12px__--CLOSECURLYBRACE {
    margin: 12px;
  }
}

/* ATOMIZED (uglified) */
@media screen and (min-width: 900px) {
  .rp__0 {
    padding: 8px;
  }
  .rp__1 {
    margin: 12px;
  }
}

We need a way to group and differentiated atomized classes that are in unique media query groups. My idea here is to prefix it with the full name/details of the query, then an open curly brace, then the declaration name and value, then a closing curly brace.

The @document and @-moz-document rules can wrap an entire CSS file, so would need extra opening/closing curly braces as well in their encoded name.

Example:

/* INPUT */
@document url("http://www.w3.org/"), media-document("video") {
  @media screen and (min-width: 900px) {
    .example {
      padding: 8px;
      margin: 12px;
    }
  }
}

/* ATOMIZED */
@document url("http://www.w3.org/"), media-document("video") {
  @media screen and (min-width: 900px) {
    /* rp__@document url("http://www.w3.org/"),media-document("video"){@media screen and (min-width:900px){padding:8px}} */
    .rp____--ATSIGNdocument_____-url__--OPENPAREN__--DOUBLEQUOTEhttp__--COLON__--FORWARDSLASH__--FORWARDSLASHwww__--DOTw3__--DOTorg__--FORWARDSLASH__--DOUBLEQUOTE__--CLOSEPAREN__--COMMAmedia-document__--OPENPAREN__--DOUBLEQUOTEvideo__--DOUBLEQUOTE__--CLOSEPAREN__--OPENCURLYBRACE__--ATSIGNmedia_____-screen_____-and_____-__--OPENPARENmin-width__--COLON900px__--CLOSEPAREN__--OPENCURLYBRACEpadding__--COLON8px__--CLOSECURLYBRACE__--CLOSECURLYBRACE {
      padding: 8px;
    }
    /* rp__@document url("http://www.w3.org/"),media-document("video"){@media screen and (min-width:900px){margin:12px}} */
    .rp____--ATSIGNdocument_____-url__--OPENPAREN__--DOUBLEQUOTEhttp__--COLON__--FORWARDSLASH__--FORWARDSLASHwww__--DOTw3__--DOTorg__--FORWARDSLASH__--DOUBLEQUOTE__--CLOSEPAREN__--COMMAmedia-document__--OPENPAREN__--DOUBLEQUOTEvideo__--DOUBLEQUOTE__--CLOSEPAREN__--OPENCURLYBRACE__--ATSIGNmedia_____-screen_____-and_____-__--OPENPARENmin-width__--COLON900px__--CLOSEPAREN__--OPENCURLYBRACEmargin__--COLON12px__--CLOSECURLYBRACE__--CLOSECURLYBRACE {
      margin: 12px;
    }
  }
}

/* ATOMIZED (uglified) */
@document url("http://www.w3.org/"), media-document("video") {
  @media screen and (min-width: 900px) {
    .rp__0 {
      padding: 8px;
    }
    .rp__1 {
      margin: 12px;
    }
  }
}

These encoded classnames can get pretty long, but browsers allow class names to be any length (no limit), and also users are just gonna use the uglified version anyway.