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 also creates css file for each file having valid aliascss class names at the same location of file with the same filename added with .css extension.

For example if you have the following structure:

And aliascss.config.js

  const config={
      input:'app/**/*.jxs',
      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

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="fs12px 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