npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@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

Readme

PostCSS-CSSLock Build Status

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.