You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

@glitz/devtool-transformer

Package Overview
Dependencies
Maintainers
1
Versions
31
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@glitz/devtool-transformer

Development tool to validate style declarations using `CSSStyleDeclaration` in the browser. It keeps track on how the browser reacts to it and notifies you via `console` if there's any ignored declarations. Then it returns the same style object without to

4.0.1
latest
Source
npmnpm
Version published
Weekly downloads
63
-38.24%
Maintainers
1
Weekly downloads
 
Created
Source

Glitz

Development tool to validate style declarations using CSSStyleDeclaration in the browser. It keeps track on how the browser reacts to it and notifies you via console if there's any ignored declarations. Then it returns the same style object without touching it.

It will only work in the browser and in development mode (process.env.NODE_ENV !== 'production'). In production, it will compile to: function (style) { return style }

import { GlitzClient } from '@glitz/core';
import devTool from '@glitz/devtool-transformer';
const glitz = new GlitzClient({ transformer: devTool });

const className = glitz.injectStyle({
  colour: 'red',
  // Warning: An invalid CSS declaration { colour: 'red' } was ignored by the browser
});

The order of this transformer is quite important if you're using multiple transformers. It should be before the prefixer-transformer for not bloating your console with warnings about other vendors specific declarations and it should be after the length-transformer for not receive warnings when lengths doesn't have units.

import { GlitzClient, compose } from '@glitz/core';
import numberToLength from '@glitz/length-transformer';
import devTool from '@glitz/devtool-transformer';
import prefixer from '@glitz/prefixer-transformer';
const glitz = new GlitzClient({
  transformer: compose(prefixer, devTool, numberToLength),
});

const className = glitz.injectStyle({
  display: 'flex',
  width: 100,
  colour: 'red',
  // Warning: An invalid CSS declaration { colour: 'red' } was ignored by the browser
});

Getting started

$ npm install @glitz/devtool-transformer

FAQs

Package last updated on 02 Aug 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts