@nerdcel/postcss-csslock
v0.0.2
Published
PostCSS plugin CSS-gateway is a special kind of calculation of CSS-value, in which: there is a minimum and maximum value, there are two breakpoints (usually depending on the width of the viewport), between these points the value varies linearly from the m
Downloads
113
Maintainers
Readme
PostCSS-CSSLock
PostCSS plugin CSS-gateway is a special kind of calculation of CSS-value, in which: there is a minimum and maximum value, there are two breakpoints (usually depending on the width of the viewport), between these points the value varies linearly from the minimum to the maximum..
The writing of this plugin was inspired by the article - The Mathematics of CSS Gateways
Install
npm install postcss-csslock -D
Example
Input
.foo {
lock: font-size 20 40 320 960;
}
.bar {
lock: line-height 23 28 320 960;
}
Output
.foo {
font-size: 20px;
}
@media (min-width: 320px) {
.foo {
font-size: calc(3.125vw + 10px);
}
}
@media (min-width: 960px) {
.foo {
font-size: 40px;
}
}
.bar {
line-height: 115%;
}
@media (min-width: 320px) {
.bar {
line-height: calc(115% + 0.7813vw - 2.5px );
}
}
@media (min-width: 960px) {
.bar {
line-height: calc(115% + 5px );
}
}
By default, the plugin works with pixel units, but you can use "rem" in the "font-size" property and "%" in "line-height" property.
To do this, just write the values with the units of measurement.
In this case, for the line height, the percentage value is returned, for the font size depending on the units transferred
Settings:
mobileFirst
type: boolean
default: false
Used to switch the modes of building media queries
baseFontSize
type: nember
default: 16
units: px
Used to set the base font size Warning, this setting must match the base font size of your project
roundSize
type: nember
default: 4
Used to specify the number of decimal places in the resulting decimal numbers as a result of the calculations
userFunc
type: object
Pass here an object whose properties are the names of the rules you want to process, and the value of the property are the functions that are executed to process the rule
Example:
userFunc: {
'margin-left'(opts) {
console.log(opts);
}
}
Results of output to the console:
{
prop: 'margin-left',
values: [ '30', '50', '320', '960' ],
unit: 'px',
decl: "Current decl object provided by post-css",
baseFontSize: 16,
roundSize: 5,
sizeMap: { '.html': { value: 20, unit: 'px' } // It stores information about the font size in the selectors to which it was applied "lock: font-size..."
}
It is important to know that when changing the default function for the font size, you need to manually place in the "sizeMap" information about the minimum value and units, this is necessary for calculating the height of the line, unless of course you do not replace this function.
Restrictions
Because the CSS gateways are tied to the units of the viewing area, the gateways have a number of important limitations. They can only take numeric values, use calc () and take values in pixels.
Why is that? Because the viewing area units (vw, vh, vmin and vmax) are always defined in pixels. For example, if the width of the viewport is 768 pixels, then 1vw is determined to be 7.68 pixels.
The current implementation of the plug-in allows you to take the following units of measure:
font-size - px, rem
line-height - px, %
However, if you use pixels, you do not need to specify them - these are the default ones.
Media requests are built only on pixel control points.
Using a gateway for line height, without a gateway for the font size, will result in an error. This is due to the fact that the plugin for calculating the line height needs the current font size, it gets it just when creating a gateway for the font size.
In other words, to apply a gateway to the height of a row, you need to have a record like this:
lock: font-size ....;
lock: line-height ....;
##Recommendation Use the post-css plugin to combine media queries, css-lok will create for each selector in which a separate media request is applied.
Usage
postcss([ require('postcss-csslock')(opts) ])
See PostCSS docs for examples for your environment.