support media query

src/__snapshots__/sheet.test.ts.snap

@@ -13,6 +13,15 @@ exports[`generateSheets > generates a combinator 1`] = `
 ]
 `;
 
+exports[`generateSheets > generates a media query 1`] = `
+[
+  {
+    "className": "j15vw",
+    "css": "@media screen and (width: 600px){ .j15vw { color: plum; } }",
+  },
+]
+`;
+
 exports[`generateSheets > generates a nested pseudo selector 1`] = `
 [
   {
@@ -56,6 +65,24 @@ exports[`generateSheets > generates an attribute selector 1`] = `
 ]
 `;
 
+exports[`generateSheets > generates an selector in a media query 1`] = `
+[
+  {
+    "className": "ji344",
+    "css": "@media screen and (width: 600px){ .ji344:hover { color: teal; } }",
+  },
+]
+`;
+
+exports[`generateSheets > generates an selector in a media query 2`] = `
+[
+  {
+    "className": "j1msw",
+    "css": "@media screen and (width: 600px){ .j1msw:hover { color: tomato; } }",
+  },
+]
+`;
+
 exports[`generateSheets > generates camelCase property as kebab-case key 1`] = `
 [
   {

src/sheet.test.ts

@@ -142,6 +142,42 @@ describe("generateSheets", () => {
 		expect(sheets).toHaveLength(2);
 		expect(sheets).toMatchSnapshot();
 	});
+
+	test("generates a media query", () => {
+		const sheets = generateSheets({
+			"@media screen and (width: 600px)": {
+				color: "plum",
+			},
+		});
+
+		expect(sheets).toHaveLength(1);
+		expect(sheets).toMatchSnapshot();
+	});
+
+	test("generates an selector in a media query", () => {
+		const sheets = generateSheets({
+			"@media screen and (width: 600px)": {
+				":hover": {
+					color: "teal",
+				},
+			},
+		});
+
+		expect(sheets).toHaveLength(1);
+		expect(sheets).toMatchSnapshot();
+	});
+	test("generates an selector in a media query", () => {
+		const sheets = generateSheets({
+			":hover": {
+				"@media screen and (width: 600px)": {
+					color: "tomato",
+				},
+			},
+		});
+
+		expect(sheets).toHaveLength(1);
+		expect(sheets).toMatchSnapshot();
+	});
 });
 
 describe("generateThemeSheets", () => {

src/sheet.ts

@@ -8,13 +8,15 @@ type Sheet = {
 	css: string;
 };
 
-export function generateSheets(props: StyleProps, selector = "") {
+export function generateSheets(props: StyleProps, selector = "", atRule = "") {
 	const sheets: Sheet[] = [];
 
 	for (const [rawKey, rawValue] of Object.entries(props)) {
 		if (rawValue != null && rawValue !== "") {
 			if (typeof rawValue === "object") {
-				const nestedSheets = generateSheets(rawValue, selector + rawKey);
+				const nestedSheets = rawKey.startsWith("@")
+					? generateSheets(rawValue, selector, rawKey) // At rules (media query)
+					: generateSheets(rawValue, selector + rawKey, atRule); // Selectors
 				sheets.push(...nestedSheets);
 				continue;
 			}
@@ -27,9 +29,10 @@ export function generateSheets(props: StyleProps, selector = "") {
 
 			const key = toKebabCase(rawKey);
 			const value = resolvePropertyValue(rawValue);
+			const rule = `.${className}${selector} { ${key}: ${value}; }`;
 			sheets.push({
 				className: className,
-				css: `.${className}${selector} { ${key}: ${value}; }`,
+				css: atRule ? `${atRule}{ ${rule} }` : rule,
 			});
 		}
 	}