Welcome folks today in this folks we will be making online app of converting css to scss online tool using styleflux library. All the source code of the application is given below.

Live Demo

You can check out the live demo of this tool here

Screenshot

Get Started

In order to get started we need to install the styleflux library globally inside our system.

We will execute the following commands

npm init -y

This will create a package.json file inside your root directory

And now we need to install styleflux inside node.js project

Now inside this library we will be using method processCSSFile method like this

cssConverter.processCSSFile(<filename>);

1	cssConverter.processCSSFile(<filename>);

npm i -g styleflux

Converting CSS to SCSS

Now using this library we will be converting css to scss library.

Source Code

Now just install the following dependencies

npm i express

npm i nodemon

npm i ejs

npm i multer

After installing all these dependencies make a index.js file and copy paste the following code

const express = require('express')

const fs = require('fs')

const { exec } = require('child_process')

const path = require('path')

const multer = require('multer')

const bodyparser = require('body-parser')

const PORT= 4000

const app = express()

app.use(bodyparser.urlencoded({extended:false}))

app.use(bodyparser.json())

app.set("view engine","ejs")

var dir = 'public';
var subDirectory = 'public/uploads'

if (!fs.existsSync(dir)){
    fs.mkdirSync(dir);

    fs.mkdirSync(subDirectory)

}

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, 'public/uploads')
    },
    filename: function (req, file, cb) {
      cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))
    }
})


const cssFileFilter = function (req, file, callback) {
  var ext = path.extname(file.originalname);
  if (
    ext !== ".css"
  ) {
    return callback("This Extension is not supported");
  }
  callback(null, true);
};

var csstoscssupload = multer({
  storage: storage,
  fileFilter: cssFileFilter,
}).single("file");

app.post('/uploadcsstoscss',(req,res) => {
  csstoscssupload(req, res, function (err) {
    if (err) {
      return res.end("Error uploading file.");
    }
    res.json({
      path: req.file.path,
    });
  });
})

var cssConverter = require('styleflux')


app.post('/csstoscss',(req,res) => {

  console.log(req.body.path);

  outputFilePath = path.basename(req.body.path,".css")

  cssConverter.processCSSFile(req.body.path)

  res.json({
    path:"public/uploads/"+outputFilePath+"_clean.scss"
  })
})

app.get('/csstoscss',(req,res) => {
  res.render('csstoscss',{title:'FREE CSS to SCSS (SASS) Online Converter Tool - Best CSS to SCSS Converter - FreeMediaTools.com'})
})

app.get("/download", (req, res) => {
  var pathoutput = req.query.path;
  console.log(pathoutput);
  var fullpath = path.join(__dirname, pathoutput);
  res.download(fullpath, (err) => {
    if (err) {
      fs.unlinkSync(fullpath);
      res.send(err);
    }
    fs.unlinkSync(fullpath);
  });
});

app.listen(PORT, () => {
  console.log(`App is listening on Port ${PORT}`);
});

100

101

102

103

104

const express = require('express')

const fs = require('fs')

const { exec } = require('child_process')

const path = require('path')

const multer = require('multer')

const bodyparser = require('body-parser')

const PORT= 4000

const app = express()

app.use(bodyparser.urlencoded({extended:false}))

app.use(bodyparser.json())

app.set("view engine","ejs")

var dir = 'public';

var subDirectory = 'public/uploads'

if (!fs.existsSync(dir)){

fs.mkdirSync(dir);

fs.mkdirSync(subDirectory)

}

var storage = multer.diskStorage({

destination: function (req, file, cb) {

cb(null, 'public/uploads')

filename: function (req, file, cb) {

cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))

}

})

const cssFileFilter = function (req, file, callback) {

var ext = path.extname(file.originalname);

if (

ext !== ".css"

) {

return callback("This Extension is not supported");

}

callback(null, true);

};

var csstoscssupload = multer({

storage: storage,

fileFilter: cssFileFilter,

}).single("file");

app.post('/uploadcsstoscss',(req,res) => {

csstoscssupload(req, res, function (err) {

if (err) {

return res.end("Error uploading file.");

}

res.json({

path: req.file.path,

});

})

var cssConverter = require('styleflux')

app.post('/csstoscss',(req,res) => {

console.log(req.body.path);

outputFilePath = path.basename(req.body.path,".css")

cssConverter.processCSSFile(req.body.path)

res.json({

path:"public/uploads/"+outputFilePath+"_clean.scss"

})

app.get('/csstoscss',(req,res) => {

res.render('csstoscss',{title:'FREE CSS to SCSS (SASS) Online Converter Tool - Best CSS to SCSS Converter - FreeMediaTools.com'})

})

app.get("/download", (req, res) => {

var pathoutput = req.query.path;

console.log(pathoutput);

var fullpath = path.join(__dirname, pathoutput);

res.download(fullpath, (err) => {

if (err) {

fs.unlinkSync(fullpath);

res.send(err);

}

fs.unlinkSync(fullpath);

});

app.listen(PORT, () => {

console.log(`App is listening on Port ${PORT}`);

});

Now make a views folder inside the root directory and inside it create a csstoscss.ejs file and copy paste the following code

views/csstoscss.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%=title%></title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
  </head>
  <body>
      <div class="container">
          <h1 class="text-center">
              CSS to SASS(SCSS) Converter
          </h1>
          <br><br>
          <form id="form">
              <div class="form-group">
                  <label for="pdf">Upload CSS File:</label>
                  <input class="form-control" type="file" name="" id="upload-input" required accept=".scss">
              </div>
              <div id="progress" class="progress">
                <div id="progress-bar" class="progress-bar" role="progressbar"></div>
              </div>
              <div class="form-group">
                  <button class="btn btn-block btn-danger">
                      Download SCSS File
                  </button>
              </div>
          </form>
          <br></br>
      </div>
</body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
    var files
      $('#form').on('submit', function (e){
        e.preventDefault()
    //$('#upload-input').click();
    $("#button").text("Uploading File")
    $("#button").prop("disabled","true")
    $('.progress-bar').text('0%');
    $('.progress-bar').width('0%');
    convertFile()
});
$('#upload-input').on('change', function(){
  files = $(this).get(0).files;
  var fileExtension = ['css'];
        if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
           $(this).val("") 
    
swal ( "Oops" ,"Please Upload a CSS File",  "error" )

        }
})

function convertFile(){
  if (files.length > 0){
    // create a FormData object which will be sent as the data payload in the
    // AJAX request
    var formData = new FormData();
    // loop through all the selected files and add them to the formData object
    for (var i = 0; i < files.length; i++) {
      var file = files[i];
      // add the files to formData object for the data payload
      formData.append('file', file, file.name);
    }
    console.log(formData)
    var formdata2 = new FormData()
    $.ajax({
      url: '/uploadcsstoscss',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(data){
          var data2 = {path:data.path}
          console.log('upload successful!\n' + data.path);
          $("#button").text("File Uploaded Now Processing")
          $("#button").prop("disabled",true);
          formdata2.append('path',data.path)
          $.ajax({
              url:'/csstoscss',
              type:'POST',
              data:JSON.stringify(data2),
              contentType: "application/json",
              dataType:"json",
      success:function(data){

        console.log(data)

          window.open('/download?path='+data.path)
          $("#button").text("Upload File")
          $("#button").prop("disabled",false);
          location.reload();
      }
          })
      },
      xhr: function() {
        // create an XMLHttpRequest
        var xhr = new XMLHttpRequest();
        // listen to the 'progress' event
        xhr.upload.addEventListener('progress', function(evt) {
          if (evt.lengthComputable) {
            // calculate the percentage of upload completed
            var percentComplete = evt.loaded / evt.total;
            percentComplete = parseInt(percentComplete * 100);
            // update the Bootstrap progress bar with the new percentage
            $('.progress-bar').text(percentComplete + '%');
            $('.progress-bar').width(percentComplete + '%');
            // once the upload reaches 100%, set the progress bar text to done
            if (percentComplete === 100) {
              $('.progress-bar').html('Done');
            }
          }
        }, false);
        return xhr;
      }
    });
  }
}
  </script>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

<!DOCTYPE html>

<html>

<head>

<link

rel="stylesheet"

href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"

</head>

<body>

CSS to SASS(SCSS) Converter

</h1>

<label for="pdf">Upload CSS File:</label>

</div>

</div>

Download SCSS File

</button>

</div>

</form>

</div>

</body>

var files

$('#form').on('submit', function (e){

e.preventDefault()

//$('#upload-input').click();

$("#button").text("Uploading File")

$("#button").prop("disabled","true")

$('.progress-bar').text('0%');

$('.progress-bar').width('0%');

convertFile()

});

$('#upload-input').on('change', function(){

files = $(this).get(0).files;

var fileExtension = ['css'];

if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {

$(this).val("")

swal ( "Oops" ,"Please Upload a CSS File", "error" )

}

})

function convertFile(){

if (files.length > 0){

// create a FormData object which will be sent as the data payload in the

// AJAX request

var formData = new FormData();

// loop through all the selected files and add them to the formData object

for (var i = 0; i < files.length; i++) {

var file = files[i];

// add the files to formData object for the data payload

formData.append('file', file, file.name);

}

console.log(formData)

var formdata2 = new FormData()

$.ajax({

url: '/uploadcsstoscss',

type: 'POST',

data: formData,

processData: false,

contentType: false,

success: function(data){

var data2 = {path:data.path}

console.log('upload successful!\n' + data.path);

$("#button").text("File Uploaded Now Processing")

$("#button").prop("disabled",true);

formdata2.append('path',data.path)

$.ajax({

url:'/csstoscss',

type:'POST',

data:JSON.stringify(data2),

contentType: "application/json",

dataType:"json",

success:function(data){

console.log(data)

window.open('/download?path='+data.path)

$("#button").text("Upload File")

$("#button").prop("disabled",false);

location.reload();

}

})

xhr: function() {

// create an XMLHttpRequest

var xhr = new XMLHttpRequest();

// listen to the 'progress' event

xhr.upload.addEventListener('progress', function(evt) {

if (evt.lengthComputable) {

// calculate the percentage of upload completed

var percentComplete = evt.loaded / evt.total;

percentComplete = parseInt(percentComplete * 100);

// update the Bootstrap progress bar with the new percentage

$('.progress-bar').text(percentComplete + '%');

$('.progress-bar').width(percentComplete + '%');

// once the upload reaches 100%, set the progress bar text to done

if (percentComplete === 100) {

$('.progress-bar').html('Done');

}

}, false);

return xhr;

}

});

}

</script>

</html>

Node.js Express Script to Convert CSS to Sass (SCSS) Online App Using StyleFlux Library Full Project For Beginners

Live Demo

Screenshot

Get Started

Converting CSS to SCSS

Source Code

Leave a Reply Cancel reply

Live Demo

Screenshot

Get Started

Converting CSS to SCSS

Source Code

Related posts:

You Might Also Like

Node.js Express Word Document DOCX or DOC to PDF Converter Full App Using LibreOffice Library 2020

Javascript Fabric.js Example to Download Image From URL by Exporting Canvas Background Image in Browser

Lazy Line Printer Modern SVG Path Hand-Written Animation Library in Vanilla Javascript Tutorial With Basic Example

Leave a Reply Cancel reply