remix-component-css-loader
v1.0.9
Published
[npm-badge]: https://img.shields.io/npm/v/remix-component-css-loader.svg?style=flat-square [npm]: https://www.npmjs.com/package/remix-component-css-loader
Maintainers
kaoruisaacReadme
Remix component css loader 
Automatically import your Component's Regular CSS files into your Remix route's links
Getting Started
- Install as a dev dependency
npm install --save-dev remix-component-css-loader- Add the loader to your vite.config file
import { defineConfig } from 'vite'
import { RemixComponentCssLoader } from 'remix-component-css-loader'
export default defineConfig({
plugins: [
RemixComponentCssLoader(), // ensure this loader is always on top
...
],
})- Create a new component with its CSS file. Make sure the CSS file name matches the TSX file name
/app
/components
/YourComponent
+ index.ts
+ YourComponent.tsx
+ YourComponent.css- Import and use the
<Styled />
// YourComponent.tsx
import { Styled } from 'remix-component-css-loader';
const YourComponent = (props) => {
return (
<Styled>
<span>Hello World!</span>
</Styled>
)
}
export default YourComponent;- Write your CSS styles
/* YourComponent.css */
.YourComponent {
/* your css styles */
}
.YourComponent > span {
/* your css styles */
}- Use your component as usual
// app/routes/example
import YourComponent from '~/component/YourComponent';
const Page = () => {
return (
<div>
<YourComponent />
</div>
)
}
export default Page;- When using this component, the className will be automatically added and your YourComponent.css will be imported
<!-- HTML document -->
<head>
...
<link rel="stylesheet" href="/app/components/YourComponent/YourComponent.css">
...
</head>
...
<div className="YourComponent">
<span>Hello World!</span>
</div>
...Advanced Usage
<Styled /> can be replaced with any HTMLElement. For example, to use it as an h1:
// YourComponent.tsx
import { Styled } from 'remix-component-css-loader';
const YourComponent = (props) => {
return (
<Styled.h1>
<span>Hello World!</span>
</Styled.h1>
)
}This will automatically be transformed into:
<!-- HTML document -->
...
<h1 className="YourComponent">
<span>Hello World!</span>
</h1>
...