csscomb / csscomb.js

CSS coding style formatter
http://csscomb.com/
MIT License
3.29k stars 457 forks source link

processString() returns identical string #642

Open braebo opened 3 years ago

braebo commented 3 years ago

Hey guys!

I'm trying to explore a custom solution for combing the style tags in .svelte files. It seems to work so far, but the processString() function returns an identical string.

My implementation reads as follows:

import { readFile } from 'fs/promises';
import Comb from 'csscomb/lib/core';
import path from 'path';

const testFile = '../src/routes/news/index.svelte';
const defaultFile = path.join(__dirname, testFile);

const combcss = async (file = defaultFile) => {

    const data = await readFile(file);
    const source = data.toString('utf8');

    const doc = new DOMParser().parseFromString(source, "text/html");

    const CSS = [...doc.querySelectorAll('style')]
        .map(style => style.textContent).toString();
    console.log(CSS);
         // 👆 outputs: h1 { color: white; text-align: center; padding-top: 50vh; width: 100%; position: relative; font-size: 4rem; }

    const comb = new Comb()
    comb.configure(require('./csscomb.json'))

    const filename = path.basename(file)

    const combedCSS = await comb.processString(CSS, {context: 'stylesheet', filename, syntax: 'css'});
    console.log(combedCSS);
         // 👆also outputs: h1 { color: white; text-align: center; padding-top: 50vh; width: 100%; position: relative; font-size: 4rem; }
};

try { combcss() } catch (e) { console.error(e) }

When I console.log(comb), I can see that it is indeed recieving the config. Everything also works if I simply make a .css file and run npx csscomb scripts/comb.css --config scripts/csscomb.json

I'm wondering if there's something obvious I'm missing in order to get back the processed string? I'm hoping once I have that, I can just write it back to the .svelte file.

Anyways- thanks for such an awesome tool!! I'm excited to be able to use it in .svelte files.