A Solid-js component utility to generate CSS class names that confirm to SUIT CSS naming conventions.
npm install solid-suitcsscreateClassName, it returns function getClassName, which is used to generate component classNames.
withSuitCss, which can automatically determine component name.
JavaScript
const getClassName = createClassName(
componentName: string,
namespace?: string,
)
`
`JavaScript
getClassName({
descendantName?: string,
modifiers?: string | Array,
states?: string | Array,
utilities?: string | Array,
className?: string,
namespace?: string,
componentName?: string,
})
`
Installation
`
npm install solid-suitcss
or
yarn add solid-suitcss
`
Usage
$3
`JavaScript
import { render } from "solid-js/web";
import { createClassName } from "solid-suitcss";
const App = () => {
const getClassName = createClassName("App");
return (
Header
class={getClassName({
descendantName: "content",
utilities: ["fullSize", "mb-10"],
})}
>
Content
$3
With the help of context provider you can define namespace for all child components.
`JavaScript
import { render } from "solid-js/web";
import { createClassName, SuitCssProvider } from "solid-suitcss";
const App = () => {
const getClassName = createClassName("App");
return (
Header
);
};
render(
() => (
),
document.getElementById("app")
);
`
$3
HOC will pass getClassName prop inside your component
Automatically determine component name using Component.name attribute.
You can pass namespace as the second argument of the HOC
`JavaScript
import { render } from "solid-js/web";
import { withSuitCss, SuitCssProps } from "solid-suitcss";
interface AppProps extends SuitCssProps {}
const App: Component = (p) => {
return (
Header
);
};
const AppWithSuitCss = withSuitCss(App)
render(
() => (
),
document.getElementById("app")
);
`
Examples
#### We have this
`JavaScript
const getClassName = createClassName("MyComponent");
`
#### What we expect
`JavaScript
getClassName() ===> 'MyComponent'
getClassName({ namespace: 'mine' }) ===> 'mine-MyComponent'
getClassName({ componentName: 'Test' }) ===> 'Test'
getClassName({ descendantName: 'header' }) ===> 'MyComponent MyComponent-header'
getClassName({ modifiers: ['primary', 'outline'] }) ===> 'MyComponent MyComponent--primary MyComponent--outline'
getClassName({ utilities: 'mb-10 fill' }) ===> 'MyComponent u-mb-10 u-fill'
getClassName({ states: 'active' }) ===> 'MyComponent is-active'
getClassName({ className: 'something' }) ===> 'MyComponent something'
`
Build
`
npm run build
`
Release History
* 1.0.0 - Changed HOC name to withSuitCss`. Improved typing. Fixed README and code optimization