Comments (10)
Both examples are incomplete. (Even assuming .set-value
only misses closing }
, it's still impossible to tests/reproduce anything w/o knowing what parameters this mixin is invoked with).
from less-plugin-clean-css.
the error looks like it is occurring in cleancss - if you create an example of the output from less and try it in cleancss, i expect it will error.. so this probably needs raising with cleancss..
from less-plugin-clean-css.
My bad, it's something wrong in mixin... But first variant works as well.
I'm updated code - now it must be reproduced as well..
from less-plugin-clean-css.
seven-phases-max: code is based on yours from Stackoverflow :) I wrote to you email about this but has no answer. Can you help to add support for full 'font' properties?
from less-plugin-clean-css.
code is based on yours from Stackoverflow
(probably, though I assume it was not that bloated originally... For a use-case like above I feel I would suggest something like http://stackoverflow.com/questions/27192493)
from less-plugin-clean-css.
No, here is your original mixin: http://stackoverflow.com/questions/25083818/
from less-plugin-clean-css.
Here my final version of mixin. It contains all that I want, but it very terrible to look. Is it possible to optimize something here?
@isresponsive: true;
@font-size-base: 16px;
// Universal value setter
.set-value_(@property; @value; @responsive: @isresponsive) {
// String, percentage and relative unit values
.setter(@p; @v) when not (isnumber(@v)), (ispercentage(@v)), (isem(@v)), (isunit(@v, rem)),
(isunit(@v, ex)), (isunit(@v, ch)), (isunit(@v, vw)), (isunit(@v, vh)),
(isunit(@v, vmin)), (isunit(@v, vmax)) {
@{p}+_: @v;
}
// Non-unit and pixel values
.setter(@p; @v) when (default()) {
& when (@responsive) {
@{p}+_: unit((@v / @font-size-base), rem);
}
& when not (@responsive) {
@{p}+_: unit(@v, px);
}
}
.setter(@property; @value);
// Font support
& when (@property = font) {
@check: ~`function(){var v="@{value}";return !!v.match(/\//)}()`;
@v1-value: ~`function(){var v="@{value}";return parseFloat(v=v.replace(/^(\d+).*\/(\d+).*$/, '$1'))}()`;
@v1-unit: ~`function(){var v="@{value}";return v=v.replace(/^\d+(.*)\/\d+(.*)$/, '$1')}()`;
@v2-value: ~`function(){var v="@{value}";return parseFloat(v=v.replace(/^(\d+).*\/(\d+).*$/, '$2'))}()`;
@v2-unit: ~`function(){var v="@{value}";return v=v.replace(/^\d+(.*)\/\d+(.*)$/, '$2')}()`;
& when (@check) {
.set-value(font-size; unit(@v1-value, @v1-unit); line-height; unit(@v2-value, @v2-unit); @responsive);
}
}
}
.set-value(@args...) when (length(@args) > 1) {
.r(@a) when (extract(@a, length(@a)) = true), (extract(@a, length(@a)) = false) {
@l: (length(@a) - 1);
@responsive: extract(@a, length(@a));
}
.r(@a) when (default()) {
@l: length(@a);
@responsive: @isresponsive;
}
.r(@args);
.i; .i(@i: @l) when (@i > 1) {
.i((@i - 2));
@property: extract(@args, (@i - 1));
@values: extract(@args, @i);
.j(@property; @values; @responsive);
}
.j(@p; @v; @r; @j: length(@v)) when (@j > 0) {
.j(@p; @v; @r; (@j - 1));
.set-value_(@p; extract(@v, @j); @r);
}
}
Example:
.set-value(font; 14px/230% 'Arial'; margin: 0 16 0 0);
Output:
font: 14px/230% Arial, Helvetica, sans-serif;
font-size: 0.875rem;
line-height: 230%;
margin: 0 1rem 0 0;
from less-plugin-clean-css.
Sorry for that the discussion went beyond of project "less-plugin-clean-css".
from less-plugin-clean-css.
(Well, my answer in that SO topic only shows how to simplify already about to exist mixin for the particular px/rem
thing. Sure If I would know you're about to develop your own DSL I would try to dissuade... Unfortunately all wrong things of such approach are just too tedious and too broad to disimantle in brief (and of course it would be too offtopic here)).
from less-plugin-clean-css.
Thanks for answer.
from less-plugin-clean-css.
Related Issues (20)
- Option --skip-restructuring not recognized HOT 5
- Breaks on CSS Function HOT 2
- Allow proper rebasing HOT 3
- Support clean-css v4 HOT 4
- font-weight HOT 2
- Source map reference fails in Edge/IE 11 HOT 4
- clean-css not found if lessc is executed from a sub directory HOT 3
- PhpStorm: Unable to load plugin clean-css HOT 6
- Less Plugin Clean CSS is broken HOT 3
- npm audit reports RegEx vulnerability in dependency (clean-css) HOT 3
- Add test cases
- NPM release to resolve security vulnerability HOT 4
- Request: please consider tagging versions
- Border css variable properties are incorrectly removed
- Some colors are incorrectly converted
- Abandoned? HOT 5
- Release HOT 7
- Sourcemaps broken in latest v1.6.0
- --keep-line-breaks/-b stops working in 1.6.0
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from less-plugin-clean-css.