fix: cli error and style bug

README.md

@@ -32,17 +32,17 @@ Assuming your React components are in `src/components`, let's create a basic But
     font-size: 1rem;
     /* ... */
 
-    [data-size='lg'] {
+    &[data-size='lg'] {
       font-size: 1.5rem;
       /* ... */
     }
 
-    [data-size='sm'] {
+    &[data-size='sm'] {
       font-size: 0.75rem;
       /* ... */
     }
 
-    [data-danger] {
+    &[data-danger] {
       color: red;
       /* ... */
     }
@@ -62,7 +62,7 @@ mistcss src/components/Button.mist.css
 Now, you can import your React component.
 
 ```tsx
-import { Button } from '.components/Button.mist.css'
+import { Button } from '.components/Button.mist.css.tsx'
 
 export default function App() {
   return (
@@ -144,7 +144,7 @@ MistCSS creates pure CSS atomic components 🌬️
 
 ## Roadmap
 
-MistCSS is a new project, so expect breaking changes until `v1.0`.
+MistCSS is a new project, so expect **breaking changes** until `v1.0`.
 
 If you like this idea and want to help, please consider having your company [sponsor](https://github.com/typicode/mistcss) it 🙇. This project is not backed by a large company.
 

fixtures/Button.mist.css

@@ -2,15 +2,15 @@
   button:scope {
     font-size: 1rem;
 
-    [data-size='lg'] {
+    &[data-size='lg'] {
       font-size: 1.5rem;
     }
 
-    [data-size='sm'] {
+    &[data-size='sm'] {
       font-size: 0.75rem;
     }
 
-    [data-danger] {
+    &[data-danger] {
       color: red;
     }
   }

fixtures/Button.mist.css.tsx

@@ -9,7 +9,7 @@ type Props = {
 
 export function Button({ children, size, danger, ...props }: Props) {
   return (
-    <button {...props} data-size={size} data-danger={danger}>
+    <button {...props} className="button" data-size={size} data-danger={danger}>
       {children}
     </button>
   )

src/bin.ts

@@ -6,7 +6,7 @@ import { parseArgs } from 'node:util'
 import chokidar from 'chokidar'
 import { globby } from 'globby'
 
-import { genFile } from './index.js'
+import { createFile } from './index.js'
 
 const { values, positionals } = parseArgs({
   options: {
@@ -31,16 +31,25 @@ if (!fs.existsSync(fileOrDir)) {
 }
 
 if (fs.statSync(fileOrDir).isFile()) {
-  genFile(fileOrDir)
+  createFile(fileOrDir)
 } else {
   const cwd = fileOrDir || process.cwd()
   const filenames = await globby('**/*.mist.css', { cwd })
 
+  function handleFile(filename: string) {
+    try {
+      createFile(path.join(cwd, filename))
+    } catch (e) {
+      console.error(`Error generating ${filename}`)
+      console.error(e)
+    }
+  }
+
   // Watch files
   if (values.watch) {
-    chokidar.watch('**/*.mist.css', { cwd }).on('change', genFile)
+    chokidar.watch('**/*.mist.css', { cwd }).on('change', handleFile)
   }
 
   // Re-generate all files
-  filenames.forEach((f) => genFile(path.join(cwd, f)))
+  filenames.forEach(handleFile)
 }

src/index.test.ts

@@ -12,6 +12,7 @@ void test('parseInput', () => {
   const input: string = mistCss
   const actual: ParsedInput = parseInput(input)
   const expected: ParsedInput = {
+    className: 'button',
     tag: 'button',
     data: {
       size: ['lg', 'sm'],
@@ -21,6 +22,8 @@ void test('parseInput', () => {
   assert.deepStrictEqual(actual, expected)
 })
 
+void test.todo('parseInput with empty input', () => {})
+
 void test('render', () => {
   const name = 'Button'
   const parsedInput: ParsedInput = parseInput(mistCss)

src/index.ts

@@ -2,24 +2,32 @@ import fs from 'node:fs'
 import path from 'node:path'
 
 export interface ParsedInput {
+  className: string
   tag: string
   data: Record<string, string[] | boolean>
 }
 
+const classNameRegex = /@scope\s*\(\s*\.(?<className>\w+)\s*\)/
 const tagRegex = /(?<tag>\w+):scope/
 const enumDataAttributeRegex =
   /\[\s*data-(?<attribute>.*?)\s*=\s*["']?(?<value>.*?)["']?\s*\]/g
 const booleanDataAttributeRegex = /\[\s*data-(?<attribute>.\w*)\s*\]/g
 
 export function parseInput(input: string): ParsedInput {
-  const result: ParsedInput = { tag: '', data: {} }
+  const result: ParsedInput = { className: '', tag: '', data: {} }
+
+  // Parse class name
+  const className = classNameRegex.exec(input)?.groups?.['className']
+  if (className === undefined) {
+    throw new Error('Could not parse class name')
+  }
+  result.className = className
 
   // Parse tag
   const tag = tagRegex.exec(input)?.groups?.['tag']
   if (tag === undefined) {
     throw new Error('Could not parse tag')
   }
-
   result.tag = tag
 
   // Parse enum data attributes
@@ -80,7 +88,9 @@ export function ${name}({ children, ${Object.keys(parsedInput.data).join(
     ', ',
   )}, ...props }: Props) {
   return (
-    <${parsedInput.tag} {...props} ${Object.keys(parsedInput.data)
+    <${parsedInput.tag} {...props} className="${parsedInput.className}" ${Object.keys(
+      parsedInput.data,
+    )
       .map((key) => `data-${key}={${key}}`)
       .join(' ')}>
       {children}
@@ -90,7 +100,7 @@ export function ${name}({ children, ${Object.keys(parsedInput.data).join(
 `
 }
 
-export function genFile(filename: string) {
+export function createFile(filename: string) {
   let data = fs.readFileSync(filename, 'utf8')
   const parsedInput = parseInput(data)
   const name = path.basename(filename, '.mist.css')