@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

Stats

StarsIssuesVersionUpdatedCreatedSize
@glitz/devtool-transformer
4224.0.02 months ago4 years agoMinified + gzip package size for @glitz/devtool-transformer in KB

Readme

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.