Installation

The easiest way to install Morfeo is by letting the CLI do it, just run:

npx morfeo init

After running it, you'll be asked to answer some questions:

 
  _ _ _
 ' ) ) )        /)
  / / / __ __  // _  __
 / ' (_(_)/ (_//_</_(_)
             />
            </
 
 
? Where is your code? ./src/**/*.{ts,tsx,js,jsx}
? Where do you want to place the extracted CSS? ./src/styles/morfeo.css
? Where do you want to create the morfeo instance? ./src/morfeo.ts

based on your answers, the CLI will automatically create all the needed configurations:

CLI Changes

After running the command a couple of files will be added/changed:

- morfeo.css
morfeo.ts

package.json

Inside the package.json will be added the following dependencies/scripts:

package.json

{
  "scripts": {
+    "dev:morfeo": "morfeo extract --watch",
+    "build:morfeo": "morfeo extract"
  },
  "dependencies": {
+    "@morfeo/web": "<latest-version>"
  },
  "devDependencies": {
+    "@morfeo/compiler": "<latest-version>"
  }
}

In case react is detected, the CLI will automatically install @morfeo/react instead of @morfeo/web

morfeo.ts

This file will initially look like this:

morfeo.ts

import { createMorfeo } from '@morfeo/web'; // or `@morfeo/react`
 
export const morfeo = createMorfeo({
  output: './styles/morfeo.css', // based on what your answers
  entryPoints: ['./**/*.{ts,tsx,js,jsx}'], // based on what your answers
});

This file exposes the morfeo instance you'll use all around your application to style your components. Based on the options passed to createMorfeo you can customize Morfeo's behavior, for example, you can give a custom theme or a custom prefix for your class names:

morfeo.ts

import { createMorfeo } from '@morfeo/web'; // or `@morfeo/react`
import { myCustomTheme } from './myCustomTheme';
 
export const morfeo = createMorfeo({
  theme: myCustomTheme,
  prefix: 'my-prefix-',
  output: './styles/morfeo.css',
  entryPoints: ['./**/*.{ts,tsx,js,jsx}'],
});

.gitignore

And, finally, the .gitignore will be updated in the following way:

.gitignore

+ # morfeo
+ /src/morfeo.css

Manual Changes

Now, it's your turn: As you can see the CLI added the file morfeo.css, please import this file in the main entry point of your application:

src/index.tsx

import './styles/morfeo.css';
 
export function App() {
  // Your app
  return <></>;
}

That's it, you're now ready to use morfeo.

How it works Getting Started