I have this code in my postcss file
.btn.color1>button{background:$graph_1;}
.btn.color2>button{background:$graph_2;}
.btn.color3>button{background:$graph_3;}
.btn.color4>button{background:$graph_4;}
.btn.color5>button{background:$graph_5;}
well, i thought this could be shorten by using for loops
#for $i from 1 to 5 {
.btn.color$i>button{background:$graph_$i;}
}
but there was a problem. $graph_$i couldn't be resolved like $graph_1,
it just remained as $graph_$i.
is there any good solutions for this situation?
ANSWER 1
I had to run postcss-advanced-variables twice. So, i remove precss from dependencies, and add it's inner dependencies directly on my project.
This is what I wrote in my webpack config file.
postcss: function(webpack) {
return [
...
require("postcss-advanced-variables"),
require("postcss-advanced-variables"),
...
]
}
and in my PostCSS file,
#for $i from 1 to 5 {
.btn.color$i > button{
background: $(graph_$(i));
}
}
ANSWER 2
I submit an issue at postcss-simple-vars, and Andrey Sitnik accepted it. Nested interpolation can used like this. But, it can't used with #for loop of postcss-advanced-variables
Related
I have an app with React with LESS.
I have a "mixins" LESS file like this:
#STATICS: "https://should-be-set-on-env";
#STATICS_KEY: "key-should-be-set-on-env";
.completePath(#property, #path) when (#property = 'background-image'){
background-image: url("#{STATICS}/#{path}#{STATICS_KEY}") !important;
}
Currently I'm overwriting the #STATIC and #STATIC_KEY with some method that has customize-cra but now I can't use them (for X reason).
I need a way to read directly from the process.env values in order to have something like this:
#STATICS: readFromProcesEn(REACT_APP_STATICS);
#STATICS_KEY: readFromProcesEn(REACT_APP_STATICS_KEY);
How can I co it? is there a way with Less to read from an external file or some sort of JavaScript function, to get those values from process.env ?
This works for me:
#STATICS: `(function(){return process.env.REACT_APP_STATICS;})()`;
#STATICS_KEY: `(function(){return process.env.REACT_APP_STATICS_KEY;})()`;
Didn't know that Less could use javascript inside batticks.
I'm using this babel plugin https://github.com/gilbsgilbs/babel-plugin-i18next-extract. Haven't configured it much beyond the basics.
it generates an extractedTranslations folder but I just end up with keys and no values. Is that the correct behavior? I would figure that it would reconcile the values from the translations files that i already have.. I'm kind of confused on how this is useful?
Creator of the plugin here. By default, babel-plugin-i18next-extract indeed extracts the keys to extractedTranslations/{{locale}}/{{ns}}.json. If you want to change this, you must set the outputPath configuration option to something else. For instance:
{
"plugins": [
[
"i18next-extract",
{
"outputPath": "locales/{{locale}}/{{ns}}.json"
}
]
]
}
If the outputPath you set already exists for a given locale and namespace, the plugin should only add new keys and leave the values of existing keys untouched.
You may want to look at the other configuration options to make the plugin match to your workflow.
I had some es6 codes in my react project like this:
``` javascript
for (const v of [0, 1, 2,]) { /* doSth*/ }
```
and it works well after transport to es5 every where.
however, if I change them like those:
``` javascript
const arr = [0, 1, 2,];
for (const v of arr) { /* doSth*/ }
```
then it throw an error that ReferenceError: Can't find variable: Symbol in iPhone 5c.
I tried both foreach for-in and the pure for circulation, they all works well in that old device.
But, I need do something like async () => { for (...) { await doSthAysnc; } }, and it cannot use foreach.
What's more, for-of was very dangerous, and pure for is very ugly. so if possibly, I prefer to use for-of.
thanks.
#Bergi Well, that's the codes it transpiles to:
javascript
("================================================================"),m=["a","b","c"],e.prev=38,v=c.a.mark(function e(n){return c.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,new Promise(function(e){return setTimeout(function(){return e(n)},1e3)});case 2:case"end":return e.stop()}},e,t)}),y=!0,b=!1,w=void 0,e.prev=43,_=m[Symbol.iterator]();case 45:if(y=(x=_.next()).done){e.next=51;break}return E=x.value,e.delegateYield(v(E),"t2",48);case 48:y=!0,e.next=45;break;case 51:e.next=57;break;case 53:e.prev=53,e.t3=e.catch(43),b=!0,w=e.t3;case 57:e.prev=57,e.prev=58,!y&&_.return&&_.return();case 60:if(e.prev=60,!b){e.next=63;break}throw w;case 63:return e.finish(60);case 64:return e.finish(57);case 65:e.next=69;break;case 67:e.prev=67,e.t4=e.catch(38);case 69:console.log("================================================================"),
Using an array literal directly inside for … of enables an extra transpiler optimisation that causes it not to use iterables. In the default cause, it will try to find the m[Symbol.iterable] method which fails in legacy environments.
In can see three solutions:
Import the babel-polyfill to enable symbols and iterators
Use loose mode which hopefully always uses the array path
Use the transform-for-of-as-array babel plugin instead which always transpiles to array loops
I have the following values in my hiera yaml file:
test::config_php::php_modules :
-'soap'
-'mcrypt'
-'pdo'
-'mbstring'
-'php-process'
-'pecl-memcache'
-'devel'
-'php-gd'
-'pear'
-'mysql'
-'xml'
and following is my test class:
class test::config_php (
$php_version,
$php_modules = hiera_hash('php_modules', {}),
$module_name,
){
class { 'php':
version => $php_version,
}
$php_modules.each |String $php_module| {
php::module { $php_module: }
}
}
While running my puppet manifests I get the following error:
Error: Evaluation Error: Error while evaluating a Function Call, create_resources(): second argument must be a hash at /tmp/vagrant-puppet/modules-f38a037289f9864906c44863800dbacf/ssh/manifests/init.pp:46:3 on node testdays-1a.vagrant.loc.vag
I am quite confused on what exactly am I doing wrong. My puppet version is 3.6.2 and I also have parser = future
I would really appreciate any help here.
Looks like your YAML was slightly off.
You don't really need quotes in YAML.
Your indentation was two instead of one.
Your first colon on the first time was spaced. This will throw a syntax error.
it should look more like this:
test::config_php::php_modules:
- soap
- mcrypt
- pdo
- mbstring
- php-process
- pecl-memcache
- devel
- php-gd
- pear
- mysql
- xml
In the future try and look up YAML parsers like this: link
The problem was with my puppet version, somehow version 3.6 acts weird while creating resources, for instance it was failing on the following line,:
create_resources('::ssh::client::config::user', $fin_users_client_options)
The code snippet above is part of ssh module from puppet labs, which I assume is throughly tested and shouldn't be a reason for the an exception.
A further analysis led to the fact that the exception was thrown when the parameter parser = future was set in the config file
I cannot iterate using each without setting future as the parser, therefore I decided to change my source as follow:
I created a new class:
define test::install_modules {
php::module { $name: }
}
and then I changed the config config_php to:
class test::config_php (
$php_version,
$php_modules = [],
){
class { 'php':
version => $php_version,
}
install_modules { $php_modules: }
}
Everything seems to be much better now.
I'm using Stylus CSS preprocessor, console compiler not javascript middleware. I'm looking for some kind of path prefix configuration.
So when I write (in foo.styl):
#lolipop
background: url(images/lolipop.png)
and set prefix static/, I want it to compile into:
#lolipop {
background: url("static/images/lolipop.png");
}
Is this possible with stylus's console compiler only?
Edit: Since you use the stylus executable, here is your solution. It seems totally undocumented, but you can actually --use url and pass along the options as a string, like this:
stylus --use url --with "{ paths: [ './static' ] }"
This feature works similar to url from the stylus url() documentation and takes the same options:
For example if our images live in ./public/images and we wish to use url(images/tobi.png), we can pass paths with our public directory, which will become part of the lookup process. Like-wise if we wanted url(tobi.png) instead, we would pass paths: [__dirname + '/public/images'].
stylus(str)
.set('filename', __dirname + '/css/test.styl')
.define('url', stylus.url({ paths: [__dirname + '/public'] }))
.render(function(err, css){
});
prefix = 'static/'
#lolipop
background: url(prefix + images/lolipop.png)
Maybe there is a better solution, but this works.