fix: @import (#63)

Author: typicode

README.md

@@ -4,7 +4,7 @@
 
 MistCSS lets you create reusable visual components without JavaScript or TypeScript (_think about it for a second... no JS/TS needed_).
 
-Leverage native HTML and CSS, get type safety and auto completion. Just clean and efficient styling.
+Leverage native HTML and CSS, get type safety and autocomplete. Just clean and efficient styling.
 
 <img width="1116" alt="Screenshot 2024-11-01 at 03 47 44" src="https://github.com/user-attachments/assets/74aea071-be00-4d03-b43a-e46d6282e4b5">
 
@@ -109,6 +109,9 @@ import './mist.css'
 
 Absolutely, MistCSS is pure HTML and CSS, generating only `mist.d.ts`, so there are no limitations. You can integrate any CSS framework seamlessly. Here are a few examples to get you started:
 
+> [!IMPORTANT]
+> For the best experience, set up Tailwind IntelliSense in your editor. Refer to [Tailwind's editor setup guide](https://tailwindcss.com/docs/editor-setup).
+
 #### Tailwind v3 ([@apply](https://tailwindcss.com/docs/functions-and-directives#apply))
 
 ```css
@@ -155,6 +158,21 @@ button {
 
 CSS is more powerful than ever, before reaching for JS, explore if native CSS features can accomplish what you need.
 
+### Can I write `<name>` instead of `data-<name>`?
+
+No, using `<name>` would result in invalid HTML. However, this constraint is actually advantageous.
+
+Firstly, it eliminates the risk of conflicts with native attributes:
+
+```jsx
+<>
+  <Button type="primary">Save</Button {/* Conflict with button's type="submit" */}
+  <button data-type="primary">Save</button> {/* Safe */}
+</>
+```
+
+Additionally, just by typing `data-` in your editor, autocomplete helps you clearly distinguish your custom attributes from standard tag attributes.
+
 ### How to write enum, boolean, string props and conditions?
 
 ```css
@@ -191,14 +209,14 @@ div[data-component='section']
 />
 ```
 
-### How to re-use the same tag
+### How to re-use the same tag?
 
 If you want both basic links and button-styled links, here’s how you can do:
 
 ```css
 a { /* ... */ }
 
-a[data-component='button'] { /* ... */
+a[data-component='button'] { /* ... */ }
   &[data-variant='primary'] { /* ... */ }
 }
 ```
@@ -215,6 +233,13 @@ a[data-component='button'] { /* ... */
 > [!NOTE]
 > `data-component` is just a naming convention. Feel free to use any attribute, like `data-style='button'` or `data-button`. It’s simply a way to differentiate between components using the same tag.
 
+### How to split my code?
+
+You can use CSS [@import](https://developer.mozilla.org/en-US/docs/Web/CSS/@import). For example, in your `mist.css` file:
+
+```css
+@import './button.css'
+```
 
 ### How to build complex components?
 
@@ -242,7 +267,7 @@ export function Card({ title, children }) {
 > [!TIP]
 > To indicate that these styles aren't meant to be used outside of `Card`, you can name them `data-p-component` (`p` for `private`) or use another naming convention.
 
-### How to define CSS variables
+### How to define CSS variables?
 
 ```css
 :root {

package-lock.json

@@ -24,17 +24,18 @@
   "devDependencies": {
     "@tsconfig/node18": "^18.2.4",
     "@types/node": "^20.11.19",
+    "@types/postcss-import": "^14.0.3",
     "eslint": "^8.56.0",
     "husky": "^9.0.11",
     "postcss": "^8.4.47",
     "postcss-cli": "^11.0.0",
-    "postcss-import": "^16.1.0",
     "prettier": "^3.2.5",
     "tsx": "^4.19.2",
     "typescript": "^5.3.3",
     "vitest": "^1.5.0"
   },
   "dependencies": {
+    "postcss-import": "^16.1.0",
     "postcss-selector-parser": "^6.1.2"
   }
 }

package.json

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: [
-    require('postcss-import'),
     require('./lib/index.js')({})
   ]
 }

postcss.config.js

@@ -1,6 +1,7 @@
 import fs = require('node:fs')
 import { type PluginCreator } from 'postcss'
 import selectorParser = require('postcss-selector-parser');
+import atImport = require("postcss-import")
 import path = require('node:path');
 const html = require('./html')
 
@@ -104,10 +105,10 @@ function initialParsedValue(): Parsed[keyof Parsed] {
   }
 }
 
-export const mistcss: PluginCreator<{}> = (_opts = {}) => {
+const _mistcss: PluginCreator<{}> = (_opts = {}) => {
   return {
-    postcssPlugin: 'mistcss',
-    Once(root, helper) {
+    postcssPlugin: '_mistcss',
+    async Once(root, helper) {
       // Only parse mist.css file
       const from = helper.result.opts.from
       if (from === undefined || path.basename(from) !== 'mist.css') return
@@ -147,6 +148,15 @@ export const mistcss: PluginCreator<{}> = (_opts = {}) => {
   }
 }
 
+_mistcss.postcss = true
+
+export const mistcss: PluginCreator<{}> = (_opts = {}) => {
+  return {
+    postcssPlugin: 'mistcss',
+    plugins: [atImport(), _mistcss()]
+  }
+}
+
 mistcss.postcss = true
 
 // Needed to make PostCSS happy

src/index.ts

@@ -6,4 +6,4 @@ declare namespace JSX {
   interface IntrinsicElements {
     button: Mist_button
   }
-}
+}