feat(css): use postcss

[AugustinMauroy]

• Allow nested selector
• remove deprecation warn

[AugustinMauroy]

we could have something like this to represent the nested :

{
    "Foo": "Foo",
    "Bar": "Bar",
    "Qux": "Qux",
    "Zed": "Zed",
    "img": "img",
    "nested": {
        "something": "something"
    }
}

but it would change the spec

[JakobJingleheimer]

It's an additive change (nesting wasn't supported before), so that's fine. I think your proposal in the comment (something.nested) is better as it avoids a risk of collision 🙂

I think the README would need to be updated (and if so, before cutting a release). I can do subsequently if you don't want to handle in this PR, but I can't til I'm back from Helsinki next week (same for cutting the release).

[AugustinMauroy]

I'm going to experiment with the loader with react typescript and tailwind to find out which is the best behaviour to have.

[AugustinMauroy]

Here example of dum component:

import { useState } from 'react';
import styles from './basic.module.css';
import type { FC } from 'react';

const Basic: FC = () => {
    const [show, setShow] = useState(false);

    return (
        <div className={styles.container}>
            <button
                className={styles.button}
                onClick={() => setShow(!show)}
            >Toggle</button>
            {show && <p>Content</p>}
        </div>
    );
};

export default Basic;

here the test suite:

import { describe, it } from "node:test";
import assert from "node:assert/strict";
import { render, screen, act } from "@testing-library/react";
import Basic from "./basic.tsx";

describe("Basic", () => {
    it("should render", () => {
        const { container } = render(<Basic />);
        assert.ok(container);
        container.remove();
    });

    it("should toggle content", () => {
        const { unmount } = render(<Basic />);
        const button = screen.getByRole("button");
        const content = screen.queryByText("Content");

        assert.ok(button);
        assert.strictEqual(content, null);

        act(() => {
            button.click();
        });

        assert.ok(screen.queryByText("Content"));
        unmount();
    });

    it("should have correct class names", () => {
        render(<Basic />);
        const container = screen.getByRole("button").parentElement;

        if (!container) {
            throw new Error("Container not found");
        }

        assert.strictEqual(container.className, "container");
        
        const button = container.querySelector("button");

        if (!button) {
            throw new Error("Button not found");
        }

        assert.strictEqual(button.className, "button");
    });
});

This is currently failing. That's why I think having nested keys in a js object seems more appropriate.

I'm well aware that nobody in their right mind would do such a test.

[AugustinMauroy]

With lasted commit this test pass

[JakobJingleheimer]

It's an additive change (nesting wasn't supported before), so that's fine. I think your proposal in the comment (something.nested) is better as it avoids a risk of collision 🙂

I think the README would need to be updated (and if so, before cutting a release). I can do subsequently if you don't want to handle in this PR, but I can't til I'm back from Helsinki next week (same for cutting the release).

[JakobJingleheimer]

w00t! thank you!