CODEWITHSUNDEEP
cssangularautoprefixer
Pardeep Jain
Pardeep Jain

Reputation: 86790

Css Autoprefixer for multiple files in single function/go ?

My Angular2 project having 100+ Css files, those files does't have any prefixer like for :Mozila, :Chrome etc, i want some tool or any gulp task or anything which will convert my all css files into files having prefixers.

I have tried this

https://github.com/postcss/autoprefixer

but not working as per my use case,

so is it possible ? if yes how ?

Upvotes: 0

Views: 496

Answers (2)

user4676340
user4676340

Reputation:

Since you asked for an answer :

In your IDE (I take Visual Studio Code as an example):

  • Ctrl+Maj+F will launch the global search (or on the left toolbar, click on the magnifying glass)
  • Activate the "search by regex" option (represented by a .*)

  • Enter your regex. It goes like this

    ^\s*([a-z-]*)\s*:\s*([\d\w-()"\s\.:=!@]*);?\s*$

  • In the second field, use something like

    moz-$1: $2;\nsafari-$1: $2;

It will add "moz-" to every property found by the regex.

Of course I typed it fast, so you will have to make some adjustements, but the idea is here.

EDIT AFTER CHAT Here is the explanation :

  • It starts with a ^, meaning "the line starts here"
  • then \s* means "line starts with as much tabs or space you want"
  • ([a-z-]*) means "find properties that contain a to z letters, and - characters"
  • \s* just as above, some spaces
  • the : for the : in every css property
  • again, \s*
  • ([\d\w-()"\s.:=!@]*) means "find the property value that contains letters, numbers, spaces, and every special charachter listed (.:=!@)"
  • then we close the line with a ; (appearing zero or once)
  • then as much space as you want with \s*
  • and $ means the end of the line (contrary to ^ at the start)

To answer how it's possible : when you put parenthesis in a regex, it "captures" what it finds and register it in a variable starting with a $ sign. That's why you write $1, $2 in the replace string, because it captured the property name, and the property value. The \n allows a line return, and all you have to do is put as many prefixes as you want like that !

Upvotes: 1

Ondra Koupil
Ondra Koupil

Reputation: 1073

There is a node.js tool called Autoprefixer, which does exactly what you need. PostCSS autoprefixer is actually only a wrapper around it. You can use it directly.

If you don't use Gulp, Grunt or some other task runner, you can use Autoprefixer manually from command line.

First install it:

npm install -g autoprefixer

Then use it on some file:

autoprefixer file.css

Or on multiple files:

autoprefixer -d processed *.css

Upvotes: 1

Related Questions