joelsutherland / less-prefixer Goto Github PK

Check out the .order mixin on line 442. @num should be switched to @order or vice-versa.

adding this two mixins would be appreciated :)

Hi, the linear-gradient definitions are completely broken on Chrome 64. The browser complains about invalid property value whenever any of the .linear-gradient-*() mixins is used. This is due to incorrect syntax and lack of prefixes. The syntax has been as follows for a long time now:

linear-gradient( 
  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
  \---------------------------------/ \----------------------------/
    Definition of the gradient line        List of color stops  

where <side-or-corner> = [left | right] || [top | bottom]
  and <color-stop>     = <color> [ <percentage> | <length> ]?

via https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Notice the to <side-or-corner>. And since the mixin does not add any vendor prefixes at all, they just do not work. It would had it added a -webkit- prefix.

So, am I missing something? If not, I'd like to know what the state of this library is, and whether the gradient issue is just an oversight or has been completely neglected. Thanks

Please add support for 2 parameters in box-shadow(@Arg1,@ARG2)

RuntimeError: No matching definition was found for .box-shadow(6px 6px 8px -2px #d4d4d4, -6px 6px 8px -2px #d4d4d4) in \Styles\index.less web Styles\index.less 24

// sourse code
.box-shadow( 6px 6px 8px -2px #d4d4d4, -6px 6px 8px -2px #d4d4d4);

Hey, this is cool!

The repo does include a license. Do you have a particular one in mind?

I want to do a transform: scale(1.2,1.2)

When I use prefixer.less, I use it like this:

.scale(1.2, 1.2);

and it make error:

 No matching definition was found for `.scale(1.2, 1.2)`

Is anything wrong of my syntax

It would be great to be able to generate what browsers you would like to support. For example, if I didn't want to support anything less than IE 10 the file will leave out all "filters" or If I only wanted to support iOS it would generate the w3c spec and webkit properties only...etc. You can also integrate CSS Pie into it - if someone so choose to go down that route.

No prefix, didn't seem to work until I added it manually

https://developer.mozilla.org/en/docs/Web/CSS/animation-duration

Since last update was 2013, do you think it is ok the readme of LESS-prefixer to point to https://github.com/postcss/postcss ?

PostCSS seems to have a solid community and pretty much overlapss this package.

webkit-box-ordinal-group may need to be increment by 1 in the order mixin.

thats what postcss autoprefixer does. see this discussion
mastastealth/sass-flex-mixin#1

Hey, maintainer(s) of JoelSutherland/LESS-Prefixer!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library JoelSutherland/LESS-Prefixer is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "JoelSutherland/LESS-Prefixer",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Hi @JoelSutherland, can you publish the latest code to NPM; the version there is from 2015!

Less important; what browserslist query do you support?

Hello,

this recently added rule for gradients does not compile:

https://github.com/JoelSutherland/LESS-Prefixer/blame/master/prefixer.less#L208

Error:

>> ParseError: Unrecognised input in public\lib\less-prefixer\prefixer.less on line 207, column 17:
>> 206 // Linear Gradient
>> 207 .linear-gradient(@args) {
>> 208  linear-gradient(@args);

I guess it lacks background-image:?

// Linear Gradient
.linear-gradient(@args) {
  background-image: linear-gradient(@args);
}

Hi, great project - wondering if you were leaving the ie-specific gradient filters out of the base gradient mixin for a reason?

I've been using this just above the w3c version in my own mixins:

filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr=@{start}, endColorstr=@{stop},GradientType=0 )"; /* IE6-9 */

Hi, can we please add prefixes for CSS filters? Currently only -webkit- is available for Chrome / Safari / Opera. Firefox implementation is coming:
https://bugzilla.mozilla.org/show_bug.cgi?id=869828

Reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Not sure if can be combined with #5.

It would be useful if you allowed support for passing multiple properties to the mixins.

e.g

.foo {
    .transition( opacity .2s ease-out, background-color .5s ease-in );  
}

You can also enable this using the less merge feature. Which will allows multiple mixin declarations to create a single comma separated rule.

e.g.

.foo {
    .transition( opacity .2s ease-out );
    .transition( background-color .5s ease-in );
}

Would output: (prefixed properties ignored for brevity)

.foo {
    transition: opacity .2s ease-out, background-color .5s ease-in; 
}

The advantage of the merge approach is that it's then possible for other mixins and hard coded style rules to interact with those of prefixer.

e.g

.foo {
    .transition( opacity .2s ease-out );
    transition+: -webkit-transform 1s ease-in;
    .coolEasingMixin( left .3s elastic );
}

Would output:

.foo {
    transition : opacity .2s ease-out, -webkit-transform 1s ease-in, left .3s cubic-bezier(1.000, -0.600, 0.115, 1.460);
}

Personally I would enable support for both methods.

Please, add a package.json file so we can download this via npm

In documentation, it is written that box-shadow should get prefixes:

So you type this:

div {
	.box-shadow(0px 0px 10px rgba(255,0,0,.5));
}

and you get this through the beauty of LESS:

div {
	-webkit-box-shadow: 0px 0px 10px rgba(255,0,0,.5);
	-moz-box-shadow: 0px 0px 10px rgba(255,0,0,.5);
	box-shadow: 0px 0px 10px rgba(255,0,0,.5);
}

However, in reality, nothing is added – it results in a simple

div {
        box-shadow: 0px 0px 10px rgba(255,0,0,.5);
}

In the code, I see that box-shadow is really not getting any prefixes. Why is that? And the documentation/readme should be updated as well.

Hi,

First I'd like to say thank you for the great work.
This has saved me a lot of time.

I stumbled on a bug today where the opacity prefixer caused a compile error, and found out that I need to change line 260 from filter: alpha(opacity=@iefactor); to filter: ~"alpha(opacity=(@{iefactor}))";

Thank you again for your work.

possible?

Good evening, good job with the prefixer.less.
It is possible to integrate "animation-fill-mode" in next release ?

These days everyone's doing it.

Also add semver tags to the repo, please

Like below, two webkit prefix are used.Is it a special usage？
-webkit-flex: @Args;
-moz-flex: @Args;
-ms-flex: @Args;
-webkit-flex: @Args;
flex: @Args;