acssx

Extended version of ACSS, a css post processor

1.0.5
latest
Source
npm

Version published: 6 years ago

Maintainers: 1

Created: 7 years ago

Source

Acssx

AliasCss extended version intregrated with sass and cli features

Installation

npm install acssx

acssx inputfile.acss outputfile.css

const acssx = require('acssx');

TO get Minified accs compiler for browser

acssx.dist("path/to/file/acss.js")

//Example
acssx.dist("./app/public/js/acss.js");

Next: use that file in your html page


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   
    <title>AliasCSS Template</title>

    <!-- AliasCSS -->
    <link href="css/alias.min.css" rel="stylesheet">

  </head>
  <body>
    <h1 class="fw6 br5px bgc_hccc c_ngreen p10px dib">Hello, world!</h1>
  </body>
  <script src="js/accs.js"></script>
</html>

Acss-Compiler

Where accs.dist("path\to\file.js"); provides in browser compiler, 'accs.run(inputfolder\orfile ,distination)' , compiles classnames and bundles in single css file from the given input. Input can be foler, files or array of files or folder or both

Example

const accs = require('acssx');
//input as a folder
acssx.run("./public", ".public/css/acss.css");

//input as a file
acssx.run("./public/index.html", ".public/css/acss.css");

//input as a array of files and folder, 
acssx.run(["./public/index.html", "./public/about.html", "/view"], ".public/css/acss.css");

Each time you run 'accs.run()' if the destination file is same it will overwrite the content, if you want to append content to the destination file, you need to pass 'true', as third arguments.

Example

acssx.run("./public", ".public/css/acss.css", true);

Watch

node acssx\bin\accsx inputFileOrFolder outputFile.css --watch;

const accs = require('acssx');
//input as a folder
acssx.run("./public", ".public/css/acss.css");

//input as a file
acssx.run("./public/index.html", ".public/css/acss.css");

//input as a array of files and folder, 
acssx.run(["./public/index.html", "./public/about.html", "/view"], ".public/css/acss.css");

//Watch you file/Folder i.e input note no 'watch' available for array.
acssx.watch();

@package.json

......
"scripts": {
    ....
    "watch": "accsx  pathToInputFolderOrFilename/ demo.css --watch",
    ....

  },
  ....

Keywords

FAQs

What is acssx?

Is acssx well maintained?

Package last updated on 23 Mar 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install