Socket
Socket
Sign inDemoInstall

@glitz/devtool-transformer

Package Overview
Dependencies
1
Maintainers
1
Versions
31
Alerts
File Explorer

Advanced tools

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


Version published
Maintainers
1
Install size
180 kB
Created

Readme

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

Last updated on 02 Aug 2022

Did you know?

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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc