Unclear How to Use

[lilsharu]

I wanted to use this plugin with NextJS and tailwind, but there seems to be no guide on how to use it at all. Is there any tutorial I can follow?

[nex3]

There's not (yet) a batteries-included solution for using this package. It provides the ability to rewrite your CSS selectors, but in order to refer to the rewritten selectors you'll also need to rewrite your HTML or JS class names which will require another plugin working in concert with this one. That's outside the scope of this plugin, although once something like that exists we can document how to use both at once.

[JSC0DER]

I was confused at first, but after looking at the source, I was able to make it so the outputmap is saved to a file. Using the saved map, I simply created another build script to replace the class names in my js files.

Maybe add another option like outputMapSavePath that will save the map to the provided absolute path.

Thanks

[RodrigoTomeES]

@JSC0DER hi, could you make a minimal reproduction of that? I am very interesting in doing the same thing. Thanks!

[JSC0DER]

Hi @RodrigoTomeES, I used the following steps to save the classMap:

1. open postcss-rename build file: node_modules/postcss-rename/build/index.js
2. add fs to save map: const fs = require('fs');
3. rename all outputMapCallback to outputMapSaveLocation
4. replace line 32 with const outputMap = {};
5. replace the OnceExit callback (line 96) with:

OnceExit() {
    if (outputMapSaveLocation) {
	void fs.writeFileSync(outputMapSaveLocation, JSON.stringify(outputMap));
    }
}

Now create a build script to replace classNames, for example:

import {readFile, writeFile} from 'fs/promises';

let classMap        = JSON.parse(await readFile(outputMapSaveLocation));
let mapKeys         = Object.keys(classMap);
let originalContent = await readFile(targetFile, 'utf8');
let newContent      = originalContent;

void Object.keys(classMap).forEach(key => {
    void console.log('Replacing:', key, 'with:', classMap[key]);
    void (newContent = newContent.replaceAll(key, classMap[key])));
});

await writeFile(targetFile, newContent);

I hope this helps!

[RodrigoTomeES]

@JSC0DER hi thanks so much! I will try it. By the way, how much did this save you in your HTML and CSS files?

[RodrigoTomeES]

@JSC0DER I was try it and now exists a way to save the map file without to change the code base look:

import { writeFile } from 'node:fs/promises';

export default {
  plugins: {
    'postcss-rename': {
      outputMapCallback: async (map) => {
        await writeFile('./class-map.json', JSON.stringify(map));
      },
    },
  },
};

[JSC0DER]

Wow, I should've read the docs first lol. I was mainly focused on mangling/uglifying my code, over savings. Thanks for the update!

[RodrigoTomeES]

@JSC0DER I create an integration with astro and postcss-rename if you are using astro you can use it without config, the package is astro-rename

[JSC0DER]

Edited index.js file:

"use strict";
/**
 * @license
 * Copyright 2020 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
const postcss_selector_parser_1 = __importDefault(require("postcss-selector-parser"));
const minimal_renamer_1 = require("./minimal-renamer");
const fs = require('fs');
// eslint-disable-next-line no-redeclare
const plugin = ({ strategy = 'none', by = 'whole', prefix = '', except = [], ids = false, outputMapSaveLocation, } = {}) => {
    const exceptSet = new Set(except);
    return {
        postcssPlugin: 'postcss-rename',
        prepare() {
            if (strategy === 'none' && !outputMapSaveLocation && !prefix)
                return {};
            const outputMap = {};
            let rename;
            if (strategy === 'none') {
                rename = name => name;
            }
            else if (strategy === 'debug') {
                rename = name => name + '_';
            }
            else if (strategy === 'minimal') {
                const renamer = new minimal_renamer_1.MinimalRenamer(skip);
                rename = name => renamer.rename(name);
            }
            else if (typeof strategy === 'string') {
                throw new Error(`Unknown strategy "${strategy}".`);
            }
            else {
                rename = strategy;
            }
            if (by !== 'whole' && by !== 'part') {
                throw new Error(`Unknown mode "${by}".`);
            }
            function renameNode(node) {
                if (skip(node.value))
                    return;
                if (by === 'part') {
                    node.value =
                        prefix +
                            node.value
                                .split('-')
                                .map(part => {
                                const newPart = skip(part) ? part : rename(part);
                                if (outputMap)
                                    outputMap[part] = newPart;
                                return newPart;
                            })
                                .join('-');
                }
                else {
                    const newName = prefix + rename(node.value);
                    if (outputMap)
                        outputMap[node.value] = newName;
                    node.value = newName;
                }
            }
            function skip(nodeValue) {
                if (exceptSet.has(nodeValue))
                    return true;
                for (const val of exceptSet)
                    if (val instanceof RegExp && val.test(nodeValue))
                        return true;
                return false;
            }
            const selectorProcessor = postcss_selector_parser_1.default(selectors => {
                selectors.walkClasses(renameNode);
                if (ids)
                    selectors.walkIds(renameNode);
            });
            return {
                Rule(ruleNode) {
                    if (ruleNode.parent.type !== 'atrule' ||
                        !ruleNode.parent.name.endsWith('keyframes')) {
                        selectorProcessor.process(ruleNode);
                    }
                },
                OnceExit() {
                    if (outputMapSaveLocation) {
                    	void fs.writeFileSync(outputMapSaveLocation, JSON.stringify(outputMap));
                    }
                },
            };
        },
    };
};
module.exports = plugin;
//# sourceMappingURL=index.js.map