3.7.63 • Published 5 months ago

@zitterorg/illo-quia v3.7.63

Weekly downloads
-
License
MIT
Repository
github
Last release
5 months ago

@zitterorg/illo-quia

NPM

NPM version Bundlephobia minified + gzip build codecov NPM downloads

Parses CSS inline style to JavaScript object (camelCased):

StyleToJS(string)

Example

import parse from '@zitterorg/illo-quia';

parse('background-color: #BADA55;');

Output:

{ "backgroundColor": "#BADA55" }

Replit | JSFiddle | Examples

Install

NPM:

npm install @zitterorg/illo-quia --save

Yarn:

yarn add @zitterorg/illo-quia

CDN:

<script src="https://unpkg.com/@zitterorg/illo-quia@latest/umd/@zitterorg/illo-quia.min.js"></script>
<script>
  window.StyleToJS(/* string */);
</script>

Usage

Import

Import with ES Modules:

import parse from '@zitterorg/illo-quia';

Require with CommonJS:

const parse = require('@zitterorg/illo-quia');

Parse style

Parse single declaration:

parse('line-height: 42');

Output:

{ "lineHeight": "42" }

Notice that the CSS property is camelCased.

Parse multiple declarations:

parse(`
  border-color: #ACE;
  z-index: 1337;
`);

Output:

{
  "borderColor": "#ACE",
  "zIndex": "1337"
}

Vendor prefix

Parse vendor prefix:

parse(`
  -webkit-transition: all 4s ease;
  -moz-transition: all 4s ease;
  -ms-transition: all 4s ease;
  -o-transition: all 4s ease;
  -khtml-transition: all 4s ease;
`);

Output:

{
  "webkitTransition": "all 4s ease",
  "mozTransition": "all 4s ease",
  "msTransition": "all 4s ease",
  "oTransition": "all 4s ease",
  "khtmlTransition": "all 4s ease"
}

Custom property

Parse custom property:

parse('--custom-property: #f00');

Output:

{ "--custom-property": "#f00" }

Unknown declaration

This library does not validate declarations, so unknown declarations can be parsed:

parse('the-answer: 42;');

Output:

{ "theAnswer": "42" }

Invalid declaration

Declarations with missing value are removed:

parse(`
  margin-top: ;
  margin-right: 1em;
`);

Output:

{ "marginRight": "1em" }

Other invalid declarations or arguments:

parse(); // {}
parse(null); // {}
parse(1); // {}
parse(true); // {}
parse('top:'); // {}
parse(':12px'); // {}
parse(':'); // {}
parse(';'); // {}

The following values will throw an error:

parse('top'); // Uncaught Error: property missing ':'
parse('/*'); // Uncaught Error: End of comment missing

Options

reactCompat

When option reactCompat is true, the vendor prefix will be capitalized:

parse(
  `
    -webkit-transition: all 4s ease;
    -moz-transition: all 4s ease;
    -ms-transition: all 4s ease;
    -o-transition: all 4s ease;
    -khtml-transition: all 4s ease;
  `,
  { reactCompat: true },
);

Output:

{
  "WebkitTransition": "all 4s ease",
  "MozTransition": "all 4s ease",
  "msTransition": "all 4s ease",
  "OTransition": "all 4s ease",
  "KhtmlTransition": "all 4s ease"
}

This removes the React warning:

Warning: Unsupported vendor-prefixed style property %s. Did you mean %s?%s", "oTransition", "OTransition"

Testing

Run tests with coverage:

npm test

Run tests in watch mode:

npm run test:watch

Lint files:

npm run lint

Fix lint errors:

npm run lint:fix

Release

Release and publish are automated by Release Please.

Special Thanks

License

MIT

__proto__Uint32Arraycjkcheckpostcssmockingspringclassnameassertioncomputed-typesObject.entriesrecursivewafwidthjsonglobalsregular-expressioncolumnphonerm -frnodevaluesstyleguideisfastcopyswfincludesnativetoStringTagfind-uplocationgetopttypeofObjectkeysinputenvironmentfunctionjshintoutputgdprString.prototype.matchAllfastcloneruntimeJSON-SchemaRegExp#flagstypedarraysdeep-copyterminalarrayAsyncIteratoreveryfindLastIndexECMAScript 2015xhrUint16Arrayconsoleimportexportasteriskscall-boundserializerzodpackage managerguidreduxoncestarterawsbrowserlisttermtelephonecloudwatchtypescriptObject.ises2016toolkites-abstractarraybuffervalidenvbddclimapbabelRFC-6455streamspinnersPromisecopydefinePropertyreact-testing-libraryindicatorECMAScript 5dependenciescreateloggingavaxmljestReflect.getPrototypeOfcalleslintimmutableenumerablequeue.gitignoregetintrinsicjson cacheObject.keysfnmatchvaluedebugcloneES2021dynamodbMicrosoftcryptoassertArraybinhasOwnPropertypackagesiterate[[Prototype]]fastnodejsJSONES2017cloudformationfindsqsescapeURLvalidationpicomatch0typesafereadablestreamrestfuljspipequeryES8reworkvalidateES2016workspace:*mkdirsloggerstoragegatewaysharedarraybuffergetterrequestsetPrototypeOfarktypetakelibphonenumberObject.definePropertyslicecoloromitArray.prototype.flatMaputilityeslint-plugintoArraytsInt8Arrayform-validationebsES2018RegExp.prototype.flagssearchwritableupamazonfile systemeslintconfigtrimLeftfigletspeedregularfront-endhookform256immerinvariantrapidprotoroute53argumentglacier_.extendgetOwnPropertyDescriptorcommandES6sortflatcensorsource mapsymbolfunctionalserverfast-deep-clonepreprocessorshebanggetSymbolpatchschemecallbackforkbuffersinatraiamunicodeefficientsnschaidataViewfeeduser-streamsregexppopmotionstreamsasyncrandomuuidbinary-0processArray.prototype.findLastboundstylingpushspecstyles$.extendcloudfrontmomentsymbolsownbundlerfetchtypeerrorcurlES2023threejQueryidledatenopefindupback-endfantasy-landurlrfc4122setImmediategroupelasticacheoffsetIteratorprivatecurrieddeepArray.prototype.findLastIndexjsdomeventDispatcherES7toolstddstructuredClones3Array.prototype.flattenes2015writeArrayBuffer#slicereversecode pointsmatchtouchparsertexttransportchrometapegroupByprotobufponyfillposeInt16Arrayparenteffect-tsyupredactvarsvariablesUnderscoreES5Object.getPrototypeOfdroplook-upreadbrowserdescriptorcodes.envrangeerrorECMAScript 2017settingsdragharmonyECMAScript 2021stringifydeepclonedom-testing-libraryextendlookpoint-freetimeES2015globfunctionsprettyFloat32Arrayclassnamesatomfile cachereactreact-hooksStyleSheetredux-toolkitmakeextraxtermtransformfsresthttpsexpresses-shimsSetchannelfunction.lengthajaxyamlmatchAllclientES2022filefullwidthbabel-corestringwgetcharacterchinesees7bundlingstringifiertrimfpsendpointassigniebinariesgesturesObject.valuesschemaapiInt32ArrayES2020CSSStyleDeclarationwhichreusejavascriptjsxECMAScript 6nameisConcatSpreadableObject.fromEntrieszxwarningbeanstalkfull-widthlocalsideemojimonorepohigher-orderECMAScript 7debuggershellenvironmentshardlinkscharactersansifindLastmrutoobjectinstrumentationsimpledbhandlerdeep-clonersscolourjsdiffpruneanimationString.prototype.trimpropertiesdeepcopykeymoveECMAScript 2019parsesubprocessfromcollectioncontainshas-ownroutingsyntaxiteratorsameValueZeroArray.prototype.containsReactiveXutilsexecairbnbStreamminimalArray.prototype.filteroptimizerhelperpurequerystringprogressacornutilscheme-validationdotenvregexrdszeroprototypereact animationvarpositivemake dirBigUint64Arraysaferm -rfconfigurablepinoistanbulemitservicecoercibletslibpathkinesisTypedArraytestingapolloperformanttypecolumnssuperstructkarmacloudsearchmetadatautil.inspectconfigframernumberrobustlogfast-copynpmes2017RxJSmobileaccessorserializermdirchildregular expressionswaapiequalenderresolvetestcircular@@toStringTagECMAScript 3react posediffwaitweaksetexpressionletescompilerformsperformancebindflattenBigInt64Arraytranspilerlengthcolorses2018mkdirpttytoSortedfpFloat64Arrayargsrmecmascripta11yastrulesformbyteOffsetappECMAScript 2016shrinkwrapestreecloudtrailconcatinternal slothashbusyprivate dataflagsdayjscss-in-jsqueueMicrotaskartglobalforEachfilterinspecttypanionidmanagerhtmltapfixed-widthreact-hook-formexecutedeleteTypeBoxArray.prototype.flathookselbgitignoreWebSocketsWeakMapObservableloadbalancingStreamsclassesES3matchesreducerESlruWebSocketMapcollection.es6proxynegativedefineuninstallobjstablepropassertsRxidentifiersclass-validatorslotnegative zeropluginpostcss-plugincoveragesetterdatasimple cacheutilitiesaccessibilityshimreadablelinkes-shim APItypesdependency managerspawnsharedbannerfastifyintrinsicrgbstyletranspileinstallerECMAScript 2022pyyamldataviewpackage.jsonmocktrimEndmochaflatMapremoveES2019redirectinternalprotocol-buffersmanipulation
3.7.63

5 months ago

3.6.63

5 months ago

3.6.62

5 months ago

3.6.61

5 months ago

2.6.61

5 months ago

2.6.59

5 months ago

2.6.58

5 months ago

2.6.60

5 months ago

2.6.55

5 months ago

2.6.56

5 months ago

2.6.57

5 months ago

2.6.51

5 months ago

2.6.52

5 months ago

2.6.53

5 months ago

2.6.54

5 months ago

2.6.50

5 months ago

1.5.30

6 months ago

2.6.37

6 months ago

2.6.38

6 months ago

2.6.39

6 months ago

2.6.33

6 months ago

1.5.14

6 months ago

2.6.34

6 months ago

2.6.35

6 months ago

1.5.16

6 months ago

2.6.36

6 months ago

1.5.15

6 months ago

1.5.18

6 months ago

2.6.30

6 months ago

1.5.17

6 months ago

2.6.31

6 months ago

2.6.32

6 months ago

1.5.19

6 months ago

2.6.48

5 months ago

1.5.21

6 months ago

2.6.49

5 months ago

1.5.20

6 months ago

1.5.23

6 months ago

1.5.22

6 months ago

2.6.44

5 months ago

1.5.25

6 months ago

2.6.45

5 months ago

1.5.24

6 months ago

2.6.46

5 months ago

1.5.27

6 months ago

2.6.47

5 months ago

1.5.26

6 months ago

2.6.40

6 months ago

1.5.29

6 months ago

2.6.41

5 months ago

1.5.28

6 months ago

2.6.42

5 months ago

2.5.30

6 months ago

2.6.43

5 months ago

1.5.13

6 months ago

1.4.11

7 months ago

1.4.13

7 months ago

1.4.12

7 months ago

1.3.11

7 months ago

1.3.10

7 months ago

1.3.9

7 months ago

1.2.9

7 months ago

1.1.9

7 months ago

1.1.8

7 months ago

1.1.7

7 months ago

1.1.6

7 months ago

1.1.5

7 months ago

1.1.4

7 months ago

1.1.3

7 months ago

1.0.3

7 months ago

1.0.2

7 months ago

1.0.1

7 months ago

1.0.0

7 months ago