@twstyled/babel-preset/dist/stylis-transform-css.js

Babel plugin for twstyled -- the full-featured Tailwind CSS + CSS in JS Compiler

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const path_1 = __importDefault(require("path"));
const normalize_path_1 = __importDefault(require("normalize-path"));
const stylis_1 = require("stylis");
const TWSTYLED_MODULE_EXTENSION = '.twstyled.module.css';
const TWSTYLED_MODULE_CACHE = './.twstyled-cache';
function getStylisTransformUrl({ types: t }, options) {
    return {
        enter: (state, templateState) => {
            const { outputFilename, resourceFileName } = getOutputNames(state, options);
            templateState.outputFilename = outputFilename;
            templateState.resourceFileName = resourceFileName;
        },
        stylis: (state, templateState, element) => {
            if (element.type === stylis_1.DECLARATION && templateState.outputFilename) {
                // When writing to a file, we need to adjust the relative paths inside url(..) expressions
                // It'll allow css-loader to resolve an imported asset properly
                element.return = element.value.replace(/\b(url\((["']?))(\.[^)]+?)(\2\))/g, (match, p1, p2, p3, p4) => p1 +
                    transformUrl(p3, templateState.outputFilename, templateState.resourceFileName) +
                    p4);
            }
        },
        exit: (state, templateState) => {
            if (templateState.cssText) {
                state.outputFilename = templateState.outputFilename;
                state.resourceFileName = templateState.resourceFileName;
                state.file.metadata.cssFilename = path_1.default.relative(path_1.default.dirname(state.file.opts.filename), templateState.outputFilename);
            }
            if (templateState.item.start) {
                state.mappings.push({
                    generated: {
                        line: templateState.index + 1,
                        column: 0
                    },
                    original: templateState.item.start,
                    name: templateState.item.selector,
                    source: `./${state.resourceFileName}`
                });
            }
        }
    };
}
exports.default = getStylisTransformUrl;
const posixSep = path_1.default.posix.sep;
function transformUrl(url, outputFilename, sourceFilename, platformPath = path_1.default) {
    // Replace asset path with new path relative to the output CSS
    const relative = platformPath.relative(platformPath.dirname(outputFilename), 
    // Get the absolute path to the asset from the path relative to the JS file
    platformPath.resolve(platformPath.dirname(sourceFilename), url));
    if (platformPath.sep === posixSep) {
        return relative;
    }
    return relative.split(platformPath.sep).join(posixSep);
}
function getOutputNames(state, options) {
    const { cacheDirectory = TWSTYLED_MODULE_CACHE, extension = TWSTYLED_MODULE_EXTENSION } = options || {};
    const root = process.cwd();
    const resourcePath = state.file.opts.filename;
    const baseOutputFileName = resourcePath.replace(/\.[^.]+$/, extension);
    const outputFilename = normalize_path_1.default(path_1.default.join(path_1.default.isAbsolute(cacheDirectory)
        ? cacheDirectory
        : path_1.default.join(process.cwd(), cacheDirectory), resourcePath.includes(root)
        ? path_1.default.relative(root, baseOutputFileName)
        : baseOutputFileName));
    return {
        outputFilename,
        resourceFileName: path_1.default.relative(process.cwd(), resourcePath)
    };
}