How to use the default function from postcss

Find comprehensive JavaScript postcss.default code examples handpicked from public code repositorys.

postcss.default is a tool that transforms CSS stylesheets with JavaScript plugins.

index.js

GitHub: ictrobot/esbuild-scss-modules-plugin

48
49
50
51
52
53
54
55
56
57
    }, (err, result) => err ? reject(err) : resolve(result)));
}
async function buildScssModulesJS(scssFullPath, options) {
    const css = (await buildScss(scssFullPath, options.scssOptions)).css;
    let cssModulesJSON = {};
    const result = await postcss_1.default([
        postcssModules.default({
            localsConvention: options.localsConvention,
            generateScopedName: options.generateScopedName,
            getJSON(cssSourceFile, json) {

corePlugins.js

GitHub: thenegneg/oriflame-final

471
472
473
474
475
476
477
478
479
480
    "var(--tw-backdrop-saturate)",
    "var(--tw-backdrop-sepia)"
].join(" ");
let corePlugins = {
    preflight: ({ addBase  })=>{
        let preflightStyles = _postcss.default.parse(_fs.default.readFileSync(_path.join(__dirname, "./css/preflight.css"), "utf8"));
        addBase([
            _postcss.default.comment({
                text: `! tailwindcss v${_packageJson.version} | MIT License | https://tailwindcss.com`
            }),

How does postcss.default work?

PostCSS is a JavaScript tool for transforming CSS styles using plugins. It reads CSS code as input, applies transformations through plugins, and outputs the transformed CSS. The transformations can include things like adding vendor prefixes, resolving imports, and minifying the code. PostCSS is highly customizable and can be used with a wide variety of plugins to fit specific needs.

setupContextUtils.js

GitHub: thenegneg/oriflame-final

948
949
950
951
952
953
954
955
956
957
isArbitrary: options.type === Symbol.for("MATCH_VARIANT"),
values: Object.keys((_values = options.values) !== null && _values !== void 0 ? _values : {}),
hasDash: name !== "@",
selectors ({ modifier , value  } = {}) {
    let candidate = "__TAILWIND_PLACEHOLDER__";
    let rule = _postcss.default.rule({
        selector: `.${candidate}`
    });
    let container = _postcss.default.root({
        nodes: [

+ 2 other calls in file

responsive.js

GitHub: mmpyw01/software-studio

11
12
13
14
15
16
17
18
19
20
    return obj && obj.__esModule ? obj : {
        default: obj
    };
}
function responsive(rules) {
    return _postcss.default.atRule({
        name: "responsive"
    }).append((0, _cloneNodes.default)(Array.isArray(rules) ? rules : [
        rules
    ]));

Ai Example

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

const css = "a { color: black; }";
const plugins = [
  // list of PostCSS plugins to use
];

postcss(plugins)
  .process(css)
  .then((result) => {
    console.log(result.css);
  });

This example defines a css variable with a basic CSS code, creates an empty array of plugins, and passes them to the postcss() function. It then calls the process() method on the resulting PostCSS object, passing in the css code as a parameter. The then() method is called on the returned Promise to log the transformed CSS code to the console. Note that the plugins array can contain a list of PostCSS plugins to be used, such as autoprefixer to add vendor prefixes to CSS properties or cssnano to minify CSS code.

resolveDefaultsAtRules.js

GitHub: Vipapanna/vipapanna

117
118
119
120
121
122
123
124
125
126
if (selectorGroups.size === 0) {
    universal.remove();
    continue;
}
for (let [, selectors1] of selectorGroups){
    let universalRule = _postcss.default.rule({
        source: universal.source
    });
    universalRule.selectors = [
        ...selectors1

+ 5 other calls in file

generateRules.js

GitHub: Vipapanna/vipapanna

461
462
463
464
465
466
467
468
469
470
// So we short-circuit here by checking if the custom property looks like a url
if (looksLikeUri(`${property}:${value}`)) {
    return false;
}
try {
    _postcss.default.parse(`a{${property}:${value}}`).toResult();
    return true;
} catch (err) {
    return false;
}

+ 11 other calls in file