Autoprefixer 3.0 brings two API changes:

1. Now there is special autoprefixer-core package for plugin development. It has no file system and CLI code and has no fs-extra dependency.
2. Browsers now is a part of options object: autoprefixer({ browsers: browsers }).

Hello,

Myth propose le fallback calcsuivant :

Input :

pre {
  margin: calc(var(--large) * 2);
}

Output :

pre {
  margin: 20px;
}

Je pense que Myth est un peu trop bourrin et que sa façon de faire est risquée. Mais on pourrait bénéficier du fallback quand-même (qui permettrait d'utiliser calc sur IE8 et surtout sur Android <4.4)

Suggestion d'output avec fallback :

pre {
  margin: 20px;
  margin: calc(var(--large) * 2);
}

Inconvénient : lourdeur du code produit :/

It semes that when running css through the prefixing tool, it doesn't recognise that

animation: and @Keyframes properties need prefixing.

Andy Jones

Hi,

Every time my css is saved with an error inside, "pleeease watch" throws an error and exists.
The terminal window being hidden I often don't know this happened and don't understand why my css is not in sync anymore and I have to go back to the right terminal window and restart "pleeease watch"

Is there a way to show/log an error but not exit the watcher on parse error ?

Thanks a lot for the excellent tool !

• use async API
• better errors output (CssSyntaxError, warnings)

source

It's nice to have this file all the time. It can especially be cool for offline.
And github releases depend on github. If for some reason one day you change stop using it, you will loose part of your changelog.

Add a fallback for vmin unit for IE9 that supports vm.

.e {
   width: 50vmin;
}

will be converted to:

.e {
   width: 50vm;
   width: 50vmin;
}

We need to update informations to clarify the aim of Pleeease. This is not a preprocessor replacement.

Currently if you paste your code with valid CSS comments it does not work

Same as #41.

• in pleeease-cli, in and out should work as they do for now
• in pleeease, in and out should not be defined by default. Thus, if defined in opts, they can be used for sourcemaps generation.

Is there a way to solve this problem?

J'utilise sass et grunt, plseeease est pas mal mais comment ne pas planter la compilation du pre-processeur quand le .scss contient :

:root{
   --im_red: red; 
}

.demo{
  filter: blur(4px);
  color: var(--im_red);
}

pour y etre traité par pleeease ?

Bonjour,
J'ai une erreur de variable undefined, lorsque j'appelle des feuilles de style via @import en spécifiant le média.
Si j'enlève le média, ça marche bien !

.pleeeasesrcc

{
    "in": "main.master.css",
    "out": "main.css",
    "autoprefixer": true,
    "filters": true,
    "rem": true,
    "opacity": true,
    "pseudoElements": true,
    "import": true,
    "mqpacker": true,
    "minifier": true,
    "sourcemaps": true,
    "next": {
        "customProperties": true
    }
}

main.master.css

@charset "UTF-8";
@import "_variable.css";
@import "_font.css" screen;
@import "_structure.css" screen;

J'ai ouvert un ticket sur la page du package node-css-mqpacker, mais apparemment leur script ne touche pas à la règle @import.

En employant l'import de pleeease, mes styles sont dupliqués.

config.css :

:root {
    --basefont: helvetica;
    font-size: 62.5%;
}

styles.css :

@import url("config.css");

body {
    font-size: 2rem;
    font-family: var(--basefont);
    display: flex;
    order: 2;
}

.pleeeaserc :

{
    "output": "styles.min.css",
    "fallbacks": {
        "autoprefixer": true,
        "variables": true,
        "rem": ["62.5%", {"replace": false}],
        "pseudoElements": true
    },
    "optimizers": {
        "import": true,
        "minifier": false,
        "mqpacker": true
    }
}

J'ai exécuté pleeease watch

Résultat :

styles.min.css :

:root {
    --basefont: helvetica;
    font-size: 62.5%;
}
:root {
    --basefont: helvetica;
    font-size: 62.5%;
}

body {
    font-size: 20px;
    font-size: 2rem;
    font-family: helvetica;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
}

Since pleeease is using PostCSS anyway, it should be possible to get the body font-size and use it for calculations.

What do you think?

Add a postprocessor for initial keyword. For example,

.e {
    font-size: initial;
}

will be converted to:

.e {
    font-size: medium;
}

initial isn't supported in IE, even in IE11.

Troublesome:

• when initial values depend on UAs (color for example, even if black is a standard de facto)
• when initial values are contextual (text-align is left or right based on direction, etc.)

Suite à notre discussion sur twitter j'ouvre cette issue pour discussion ( vu l'heure tardive j'ai choisi le français ;) ).

L'intérêt de @import pour moi est d'avoir une bibliothèque de petits bouts de css qui évolue au cours du temps.
Pour un projet je choisis d'inclure ou pas ces petits bouts en fonction des besoins.
Il est plus simple pour moi d'utiliser @import dans un fichier spécifique au projet plutôt que d'éditer un fichier de config ou allonger ma saisie dans la console...

Je ne considère pas que ce soit le bon (si ça existe...) workflow mais cette option est par défaut avec grunt (grunt-contrib-cssmin) qui utilise https://github.com/GoalSmashers/clean-css et j'ai été surpris de voir le @import en sortie, d'autres pourraient avoir la même surprise (?)

clean-css permet de désactiver cette option si nécessaire, mais vouloir conserver un @import en sortie... je vois pas bien l'intérêt, c'est plutôt à éviter pour les perfs non ? ;)

Je continue les tests ;)

Hello,

First of all thank you for your project. Pleeease is a great tool and we are more teams to use it in our work.

We recently installed the 3.2.0 version of Pleeease and we have a problem when we use it. Other people had installed this version before and there was no problem with the same configuration. Sounds like a problem with dependencies of Pleeease.

We all have the following error:

C:\project>pleeease compile
module.js:338
    throw err;
          ^
Error: Cannot find module 'deep-extend'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (D:\Users\adm\AppData\Roaming\npm\node_modules\pleeease-cli\lib\cli.js:9:20)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)

We use NodeJs in the 12.0 x64 version. We tried to install the 3.2.1 and 3.2.3 versions of Pleeease but the problem is still there.

Do you have an idea of the problem?

When i try to compile my file
/css/app.css
to
/css/app.min.css
Every path in my file containing url(../XYZ) is rewriten as url(XYZ)
Ex. for :
background:url(../img/test.png)
output is :
background:url(img/test.png)
The same goes for font-face src etc ...

I tried using a .pleeeaserc file and direct commands like this :
pleeease compile css/app.css -t css/app.min.css
But i got the same result.

Thanks a lot.

Puisque MoOx me l'a fait découvrir, il paraît que les nestings sont en cours de draft, au cas où :)

http://tabatkins.github.io/specs/css-nesting/#the-nested-block

I get this error when setting options for Minifier:

c:\Users\Sébastien\AppData\Roaming\npm\node_modules\pleeease\node_modules\postc
ss\lib\parse.js:387
throw new CssSyntaxError(message, this.source, pos, this.opts.from);
Error: css/.pleeeaserc:6:13: Unexpected {

My .pleeeaserc file is:

{
  "in": ["bootstrap.css", "flat-ui.css", "font-awesome.css", "chosen-flat-ui.css", "datepicker-flat-ui.css", "global.css"],
  "out": "app.min.css",

  "minifier": {"preserveHacks": true, "removeAllComments": true},

  "next": true
}

Thanks for the help!

Bonjour,

J'ai l'erreur suivante lors de la compilation :

Voici mon fichier de config :
https://gist.github.com/oilvier/89a35ced9e6eb135a576

Une idée d'où ça pourrait venir ?

Merci d'avance

Salut ! (sympa de voir un français sur GitHub)

Je viens de signaler à l'auteur de css-mqpacker que ce package peut changer l'ordre des règles, et par conséquent casser le rendu de pages, le rendant inutilisable en production. (voir hail2u/node-css-mqpacker#16)

En attendant que ce bug soit résolu, pleeease n'est donc par conséquent pas utilisable en production. Peut-être qu'il serait plus judicieux de supprimer cette fonctionnalité en attendant que cela soit résolu ?

.test {
    content: 'sample'; /* ok */
    content: 'sample'; /* removes semi-colon */
}

removes semi-colon when it's the last declaration in the rule set and there's a comment after it. becoming:

.test {
    content: 'sample'; /* ok */
    content: 'sample' /* removes semi-colon */
}

I seem to have found a bug related to using the @import directive in CSS with external URL. This is the import that is used.

CSS import code: @import url(http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic);

Console log

I cannot run neither pleeease compile nor pleeease watch. I get errors like :

module.js:340
    throw err;
          ^
Error: Cannot find module '/usr/bin/pleeease-compile'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:906:3

Node version : v0.10.28
Npm version : 1.4.9
OS : Archlinux

I'm not a nodejs specialist but I just installed pleeease using npm install -g pleeease

I don't see any mention on the site about source-maps, though I know that some of these post-processors can support them (e.g. autoprefixer, mq-packer). Is there a way to pass this option so that they are preserved?

Hello,

Suggestion d'amélioration : permettre de reconnaître la spec concernant color(), comme le propose déjà http://www.myth.io/

When using urls as for example with background-images Pleeease currently changes the url to reflect some any compile-step.

Sometimes this does not make sense to me which is why I think there should be an option to prevent this url update.

In certain cases you might want to maintain to url you set in your CSS file and not change it. This might the case if you copy images into certain directories or you optimize images automatically and move them through your build step.

Let's say you've a component icon which is located in folder /components/icon/.
Your CSS looks like this:

.icon {
  background-image: url(sprite.svg);
}

• There are four icons in the same directory but no sprite.svg.
• Your build step combines all icons into one sprite and moves it to your /dist/ folder.
• Pleeease compiles CSS to dist/ too.

Your compiled CSS now has an url like components/icon/sprite.svg which is not the correct path.
I don't want this to happen and want to turn off this feature.

Please let me know if I get something wrong or you need more information.

As for now, if you want sourcemaps not inlined in CSS, you need to use:

{
   "sourcemaps": {
        "map": {
            "inline": false
        }
    }
}

as the PostCSS specify it.
I want to add an alias as string, but can't find a simple and unambiguous word. For example like:

"external"
"separate"
"outside"
"out"

We'll use it as:

{
   "sourcemaps": "..."
}

or even:

{
   "sourcemaps": {
        "map": "..."
    }
}

Any opinion someone ?

I use bower for standard libs like font awesome. Bower place files in /static/vendor/ folder, then I just add line

@import url('../vendor/font-awesome/css/font-awesome.css');

in my style.css. And I have a problem: in font-awesome.css fonts including by relative path:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Well, pleeease concat this with my styles and put result in /static/css/style.css. Then browsers try to load fonts from /static/fonts except /static/vendor/font-awesome/fonts/.

If exist any more right way to do this with no errors I glad to try it. By the other side I would ask you to improve import method to overwrite relative path in including code, like a ../vendor/font-awesome/css/../fonts/....

Pretty simple to implement, I would suggest you to use Clean-css which is, according to benchmarks, the most efficient css compressor.

Is there any reason why you use csswring?

I installed Pleeease on a client's PC today. It seems that in the latest Pleeease-cli version, the in option inside a configuration file is always ignored. I did a test with the following CSS files :

• file1.css
• file2.css
• file3.css

And the following .pleeeaserc configuration file :

{
  "in": ["file1.css"],
  "out": "output.css"
}

Running please compile in the command line then shows that ["file1.css", "file2.css", "file3.css"] have been compiled. No matter what I tried, it seems that the in option in the configuration file is always ignored.

The compilation works as intended to the output.css file if I use the command pleeease compile "file1.css". I tried to invert the in and out declaration in the configuration file, with no success.

Client's on a Windows 7 Pro SP1 (64 bits), using npm 2.7.4 with pleeease-cli 3.2.4 and pleeease 3.2.6. A colleague also confirmed tonight to have the same problem on his PC with the latest pleeease version.

Hello, thanks a lot for this tool.

Are you interested by a pleeease grunt (and /or gulp) plugin ? I can help if so.

Bonjour, merci beaucoup pour cet outil.
êtes-vous interessé par un plugin pleeease pour grunt ou gulp ? Je peux aider si besoin.

Would it be worth it to include direct support for Bless or is that too rare of a use case nowadays ?

Great plugin to add rgba fallbacks: https://github.com/TrySound/postcss-color-hex

Hi,
I use node-sass/libsass with source maps enabled. The source map is correctly generated by libsass and the sourceMappingURL is appended to the file content.

Unfortunately pleeease removes the sourceMappingURL from the file though the minifier option is set to false.

I guess thats a bug and not intended?

This is my config file:

{
  "filters": true,
  "rem": true,
  "pseudoElements": true,
  "opacity": false,

  "import": true,
  "minifier": false,
  "mqpacker": false,

  "sourcemaps": false,

  "next": false
}

Documentation is wrong about Minifier default values. Based on /lib/options.js, there is only one option that is preserveHacks set to true.

Documentation indicates that there are two options by default : {preserveHacks: true, removeAllComments: true}.

Is it possible to correct either documentation or default values?

Thanks in advance!

En plus de combiner les MQ et minifier CSS en général, il pourrait être très intéressant de regrouper les règles identiques.

Par exemple :

/* layout.css */
.truc {
  width: 100%;
}
/* colors.css */
.truc {
  color: #184894;
}

Deviendrait :

/* build.css */
.truc {
  width: 100%;
  color: #184894;
}

Comme ce n'est pas anodin, il faudrait que ce soit une option non appliquée par défaut.

Now that there are 2 separate modules, the .pleeeaserc file should not be read in pleeease. This should be read only when using pleeease-cli.

Add a browsers option, similar to Autoprefixer's one. Better handling imo.

{
    "browsers": ["last 4 versions", "IE8"]
}

// .pleeeaserc
{
  "next": {
    "customProperties": true
  },
  "sourcemaps": true
}

/* a.css */
@import './b.css';
body { color: var(--color); }

/* b.css */
:root { --color: red; }

Given the files, when I compile a.css, in the source maps b.css is not there. It does appear when {preserve: true} is set for customProperties.

Bonjour,

Je ne sais pas si c'est un bug ou bien si je m'y prend mal à un moment donné, mais la commande pleeease watch ajoute automatiquement une ligne de code /*# sourceMappingURL=data:application/json;base64[...]= */ à la fin du CSS "post-processé".

Pourtant, j'ai bien désactivé "sourcemaps" dans mon fichier de config ainsi que la minification.
De plus, cet ajout semble apparaitre avec pleeease watch mais pas pleeease compile.

Une idée ?

As per @iamvdo's comment, in Pleeease v3 you don't need to add options like opacity: true because they are enabled with the autoprefixer key. This is actually slightly misleading as the autoprefixer key should really be for Autoprefixer alone. The fact that you can specify the browsers array in two places now does not help either. I find that Pleeease tries to be a bit too clever here.

In my case, filter: alpha(opacity=*) breaks a lot of my Bootstrap theme in places that I have not even touched so it is very likely they will break default Bootstrap theme too.

I thought specifying opacity: false will prevent Pleeease from injecting all those nasty filters in there but that's not the case.

I've never really liked it. It always seems weird to me to base a complete syntax on a non-final spec.
With JS, most of ES6 features are syntactic sugar, but in CSS, most of features are not. Advanced CSS can't be polyfilled or transpiled.

If you really want to use this syntax anyway, you shoud look at cssnext.

I consider removing pleeease.NEXT from next release.

But, I need your opinion on this ?

So we have a unique situation where we have over 100 clients on 2 older versions of our app, and unfortunately, the 2 older versions are loading 2 different stylesheets. I know this isn't good practice, but our newest version of our app has it down to loading only 1. It would be great if we could somehow use the IN: array, for the OUT: path, and make it an array as well, and maybe have an option of multiple_files. When set to true, it would reiterate through the IN array, and output using the OUT array, so it's not combining all the INs to a single out.

Ref should be updated :)

Off topic: why don't you put pleeease.io source on github ?

Add a fallback opacity for IE.

This

.e {
    opacity: .5;
}

has to be converted like so:

.e {
    opacity: .5;
    filter: alpha(opacity=50);
}

https://developer.mozilla.org/fr/docs/Web/CSS/opacity

Hello,
suite à la mie à jour d'hier soir ;) ... csswring ne semble plus faire son job.

J'avais désactivé la minification lors de mes tests.

Un peu plus tard j'ai souhaité la réactiver -> error :

csswring.js:29
decl.between = decl.between.replace(/\s/g, '');
TypeError: Cannot call method 'replace' of undefined

J'ai testé : paramètres par défaut / true / absent (activé par défaut) pour "minifier" -> rien
J'ai supprimé tous les imports (pour voir si un fichier importé était à l'origine) nope

minifier à false et csswring sur app.min.css (csswring via CLI) -> OK