Getting Started

Installation

NPM

npm install --save-dev aliascss

CDN

<script defer src="https://cdn.jsdelivr.net/npm/aliascss@latest/dist/aliascss.js"></script>

Recommended way of using AliasCSS

First install aliascss via npm,

npm install --save-dev aliascss

Then, create a aliascss.config.js file in your project root directory.

aliascss.config.js

The config file must have at least input and output property.

Basic structure of config file

 const config= {
    input:['app/**/*.(jsx|tsx)', 'components/**/*.(jsx|tsx)'],
    output:{
      location:'public/css/master.css',
      '--file':true,
    },
}
export default config;

Here, the aliascss.config.js file must export config object as default with at least input and output properties, input property accept glob pattern or array of glob pattern . --file(optional) set to true will generate [filename].css for each and every file in their same file location.

Now, you can use easily create and compile the aliascss.

 npx aliascss --config

Watch for changes

To watch and automatically compile , you can use --watch flag.

npx aliascss --config --watch

when --file is set to true

It will creates css file for each and every file having valid aliascss class names at the same location of current working/processing file with the same filename added with .css extension.

For example if you have the following structure:

• app
  • page.jsx
  • article.jsx
  • about
    • page.jsx

And aliascss.config.js

  const config={
      input:'app/**/*.jsx',
      output:{
        location:'public/css/app.css',
        '--file':true
    },
  }
  export default config;

Then, after running following command with --file set to true

    npx aliascss --config --watch

Folder structure becomes

• app
  • page.jsx
  • page.jsx.css
  • article.jsx
  • article.jsx.css
  • about
    • page.jsx
    • page.jsx.css

Now you can simply import the corresponding css file in your application which support components based css import like next.js / sveltekit

Example , in Next.js app we can simply import the compile file

@ app/page.jsx

import './page.jsx.css'
 
  export default function Home() {
      return (
           <h1 className="fs-12px color-gray500" >Hello, World</h1>
      )
  }
 

Using package.json

  ....
"scripts": {
  ...
  "aliascss-build": "aliascss --config",
  "aliascss-watch": "aliascss-build --watch",
}
...

Now you can run npm script,

build

npm run aliascss-build

build and watch

npm run aliascss-watch