How to use the atRule function from postcss

postcss.atRule is a class in the PostCSS library that represents an at-rule in CSS, such as @media, @import, or @font-face.

How does postcss.atRule work?

postcss.atRule is a class in the PostCSS library that represents an at-rule in CSS. An at-rule in CSS is a special type of rule that begins with an at-sign (@) followed by an identifier and some optional parameters. Examples of at-rules in CSS include @media, @import, and @font-face. At-rules allow you to apply styles and behaviors to different parts of your CSS document based on various conditions. To work with at-rules in PostCSS, you can use the postcss.atRule class to represent an individual at-rule in your CSS. You can create a new instance of postcss.atRule by calling its constructor with the at-rule's identifier and parameters as arguments. Once you have an instance of postcss.atRule, you can manipulate its properties and child nodes as needed using the methods provided by the postcss.Node class. This allows you to modify the at-rule's parameters, add or remove child nodes, and perform other transformations on the at-rule as needed. For example, you might use postcss.atRule to transform a @media at-rule by adding a new child rule to it. Here's an example of how you might use postcss.atRule to accomplish this: javascript Copy code {{{{{{{ const postcss = require('postcss'); const css = ` @media (min-width: 768px) { .my-class { color: red; } } `; const root = postcss.parse(css); root.walkAtRules('media', (rule) => { const newRule = postcss.rule({ selector: '.my-new-class' }); newRule.append(postcss.decl({ prop: 'color', value: 'blue' })); rule.append(newRule); }); console.log(root.toString()); In this example, we define a CSS string that contains a @media at-rule with a child rule that applies the color: red property to elements with the class .my-class. We parse this CSS string using postcss.parse to create a PostCSS root node that represents the entire CSS document. We then use the root.walkAtRules method to iterate over all @media at-rules in the CSS document. For each @media at-rule, we create a new postcss.rule instance that represents a new child rule with the selector .my-new-class. We append a new postcss.decl instance that sets the color property to blue to this new child rule. Finally, we append the new child rule to the original @media at-rule using its append method. We then log the resulting CSS string to the console using root.toString(), which shows the modified CSS: css Copy code {{{{{{{ class="!whitespace-pre hljs language-css">@media (min-width: 768px) {.my-class { color: red; }.my-new-class { color: blue; } } This example demonstrates how you can use postcss.atRule to transform an existing @media at-rule in your CSS document by adding a new child rule to it.

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const postcss = require("postcss");

const css = `
@media (min-width: 768px) {
.my-class {
color: red;
}
}
`;

const root = postcss.parse(css);

root.walkAtRules("media", (rule) => {
  rule.params = "(max-width: 768px)";
});

console.log(root.toString());

In this example, we define a CSS string that contains a @media at-rule with a child rule that applies the color: red property to elements with the class .my-class. We parse this CSS string using postcss.parse to create a PostCSS root node that represents the entire CSS document. We then use the root.walkAtRules method to iterate over all @media at-rules in the CSS document. For each @media at-rule, we modify its params property to change the media query from (min-width: 768px) to (max-width: 768px). Finally, we log the resulting CSS string to the console using root.toString(), which shows the modified CSS: css Copy code