a{nest}hetic
Nest CSS rules inside custom properties
About
Anesthetic is a small tool that does one thing - allows CSS authors to nest CSS rules inside other CSS rules in a way that meets the following criteria:
- 100% valid CSS syntax
- Works in browsers today
- No conflict with native CSS nesting syntax
- Future-proof
How does it work?
The technique is to put the declaration list for the rule you would like to nest as the value of a custom property, and to name the custom property in a special way. Here's how we'll think about the naming of these properties
"--" <custom-name> <selector> ":" <block> [ ";" ]
- every custom property starts with a double dash
--
<custom-name>
is part of a valid CSS property name you choose to namespace your nested rules and keep them easily identifiable amongst all your custom propertiesselector
is a CSS selector list, with any special characters escaped by a backslash\
<block>
is a{
-block containing the declaration list of the nested rule.;
semicolon is the delimiter that is required to separate multiple properties in a declaration list
Here's an example using -
as the custom name:
/* nested */;} /* expanded */
Here in this example, the first part of the custom property ---\ b
made up of the first two dashes plus our custom name (-
) is replaced by the selector of the original rule, so ---\ b
becomes a b
.
If you work with a different custom name, like nest-
, you can process the same rules written like this:
;}
Usage
This package is available on npm and is delivered in two formats:
- index.cjs.js is a CommonJS module for use with Node and CommonJS bundlers
- index.js is an ES module for use with Deno, browsers, and ES module bundlers
Below are some of the ways you can consume and use this package.
Using anesthetic via npx without installing anything
$ npx anesthetic 'a { color: red; ---\ b: { color: blue; }; }'
$ npx anesthetic path/to/stylesheet.css
Using as an ES module with Deno or a browser
console
Using as a CommonJS module with Node
const anesthetic = console
Command-line usage with Node or Deno
Expanding a string
To expand a string, supply a string to the CLI script as the first argument
$ node cli/node.js 'a { color: red; ---\ b: { color: blue; }; }'
$ deno cli/deno.js 'a { color: red; ---\ b: { color: blue; }; }'
Expanding a file
To expand a stylesheet, supply a pathname to the CLI script as the first argument:
$ node cli/node.js path/to/stylesheet.css
$ deno --allow-read cli/deno.js path/to/stylesheet.css
You can run
npm link
if you want to usecli/node.js
on your system as the commandanesthetic
Options
string
is a string containing a CSS stylesheet to expandpropertyName
is a part of a custom property name to namespace your nested rules. The default value if omitted is-
.
Examples
Nesting rules
/* nested */; };} /* expanded */
Using selector lists
/* nested */;} /* expanded */
To see more demos, check out the tests in examples/