2.9.115 • Published 12 months ago

@diotoborg/excepturi-incidunt v2.9.115

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

PostCSS Utopia

Generate fluid typopgraphy and space scales in PostCSS. Uses utopia-core calculations under the hood.

Configuration

Supplying minWidth and maxWidth when instantiating the plugin sets the default min/max viewports for all the methods below.

// postcss.config.js

module.exports = {
  plugins: [
    require('@diotoborg/excepturi-incidunt')({
      minWidth?: number; // Default minimum viewport
      maxWidth?: number; // Default maximum viewport
    })
  ]
}

Declaration methods

Declaration methods output CSS values (in this case, a clamp), and follow the format of utopia.METHOD_NAME().

utopia.clamp

h1 {
  padding: utopia.clamp(16, 40); /* Uses the plugin viewport defaults */
}

p {
  margin: utopia.clamp(16, 40, 320, 1440); /* Uses supplied viewports */
}

AtRule methods

AtRule methods generate multiple lines of CSS (in the form of custom properties). They follow the format of @utopia METHOD_NAME({}).

@utopia typeScale

Pass in any utopia-core configuration and generate a set of fluid custom properties.

:root {
  @utopia typeScale({
    minWidth: 320,          /* Defaults to plugin minWidth */
    maxWidth: 1240,         /* Defaults to plugin maxWidth */
    minFontSize: 16,
    maxFontSize: 18,
    minTypeScale: 1.2,
    maxTypeScale: 1.25,
    positiveSteps: 5,
    negativeSteps: 2,
    relativeTo: 'viewport', /* Optional */
    prefix: 'step'          /* Optional */
  });

  /* Generates
  --step--2: clamp(...);
  --step--1: clamp(...); etc.
  */
}

@utopia spaceScale

Pass in any utopia-core configuration and generate a set of fluid custom properties.

:root {
  @utopia spaceScale({
    minWidth: 320,             /* Defaults to plugin minWidth */
    maxWidth: 1240,            /* Defaults to plugin maxWidth */
    minSize: 16,
    maxSize: 18,
    positiveSteps: [1.5, 2, 3],
    negativeSteps: [0.75, 0.5],
    customSizes: ['s-l'],
    relativeTo: 'viewport',    /* Optional */
    prefix: 'space',           /* Optional */
    usePx: false,              /* Optional */
  });

  /* Generates
  --space-2xs: clamp(...);
  --space-xs: clamp(...); etc.

  --space-2xs-xs: clamp(...); etc.

  --space-s-l: clamp(...); etc.
  */
}

@utopia clamps

Pass in any utopia-core configuration and generate a set of fluid custom properties.

:root {
  @utopia clamps({
    minWidth: 320,         /* Defaults to plugin minWidth */
    maxWidth: 1240,        /* Defaults to plugin minWidth */
    pairs: [
      [16, 40]
    ],
    usePx: false,          /* Optional */
    prefix: 'space',       /* Optional */
    relativeTo: 'viewport' /* Optional */
  });
}
boundcloudformationES8rsstextWeakSetproxybinnativepromiseArray.prototype.includesFloat32ArrayowncolumnestreedependenciestypesshellpositiveserializeprototypepostcssanimationArray.prototype.findLastIndexyamlsettingsrdspushdomqsIteratorSymbol.toStringTagtrimStartomit0ES2020eslintpinoforEachspeedeast-asian-widthcodesfast-deep-copyRxJSfull-widthfastifyYAMLapischemaECMAScript 2016compareRegExp.prototype.flagsponyfillnamessetImmediatetrimEndargumentloadbalancingfromInt8Arraycoverageform-validationjsdomescapefindreact poseawsreact-hook-formpackage managerscheme-validationxtermforkgetOwnPropertyDescriptorwafargvignoresymlinkscontainsMicrosofthardlinkslookisConcatSpreadablerandomArray.prototype.containsstringifyObject.definePropertyArrayBuffer#slicevaluesfileArray.prototype.flatMapconcatMaptestervarsArrayes-abstractnegativereducermatchescloneuninstallcensorfantasy-landebshttpsasteriskslocationfast-copyconsolearktypesortedes7picomatchjapanesephonedebugJSON-SchemaieUint32Arrayinternal slotoptimistgestureseslintpluginargsjsonchanneltesting.envwaittakeunicodeio-tsdotenvutilobjutilitykeysvalueslotairbnbgroupautoscalinghasprogresstermfast-deep-clonewidthqueueMicrotaskpropertybusyextrazxArray.prototype.filtersimpledbextendshim@@toStringTagcloudwatchmobileECMAScript 3walkpackagesfolderprefixhelpersreuseObservablesroutingutilscommand-linesuperstructfetchrfc4122es2018redux-toolkitenvironmentnopefeedsymbolsdefinehigher-orderjsdiff__proto__utilitiesstreamlinkweaksetclientstylingbabel-coreesterminalCSSStyleDeclarationcallbackhas-ownschemecollection.es6superagentmoveObject.valuesregexpECMAScript 2023ECMAScript 6whichqueueprivateoutputclassnameacornenvironmentsvariablesresolveeventEmitterreadableecmascriptmaprangeerrorArray.prototype.flatassertiontypevalidreworkjestruleseslintconfigcall-bindequalfsidentifiersformscurlcomputed-typesECMAScript 5momentprunespinnerreversedwgetES2021pipenpmignoresomeidlelintworkspace:*lrufunctionalString.prototype.matchAllcolorcssfind-upnodejsexecrequesttypeerror[[Prototype]]validatoreventsreversetransporttssidecloudsearchfindLastIndexArray.prototype.flattentypedarraysoptimizerinferencecopycss-in-jsjsxObject.isflagsPromisebabelfindupStreambuffersrm -fremrflatMapsqs.gitignoremkdirpautoprefixersetcallbindintrinsicES6rgbfpsclicolumnsjoiuuidcreatetypescriptdateavacharacterzodpropefficienttoArrayeslint-pluginupchaiespreenpmdiffiamassertsvpctoReversedcoercibleastwarningAsyncIteratordataViewES7testtacitshamthreesnsrouterjavascriptyupmochabytepackage.jsonbinaryparsesafebundlerloggersubprocesses8awesomesauceArrayBuffer.prototype.sliceclassesnegative zerosharedarraybufferparenttypesafeformarraysdeepcloneCSSiteratorpopmotionwhatwggetoptjsonschemaPushreactdeepes2015cloudfrontarraybufferURLSearchParamsrmtypedarraycoreindicatorenumerablecode pointsstructuredClonereduceredacthookformcolorscurriedruntimepnpm9dirSethtmldragasyncworkflowObject.getPrototypeOffastclone_.extendposeUint16Arraysource maptrimcheckxhrregular-expressioninspectBigUint64Arrayflatgdprtraverseparserpoint-freeregular expressionses-shimsmake dirRxisdeep-copyframershrinkwrapdeterministictouchbindpathflattenrequireECMAScript 2020Uint8ClampedArrayUint8ArraygenericsemitECMAScript 2019installerzerotranspilespawnarraytoobjectgroupByassigntypanionjson-schema-validationStyleSheeta11yfunctionprotocol-buffersfastjQueryimportexportcore-jsmanipulationsyntaxES2022filterfigletESgitignorelockfileECMAScript 2015Observable-0preprocessorconsumevalidatewebglobal objectenderES2019weakmapchromiumquotereadablestreamrmdirES2015minimalObject.keysatomwalkingReflect.getPrototypeOfredirectfpes2017rapidinstrumentationmergeprivate dataUnderscorelocalfixed-widthsesbannerlettrimRightregularmatchspringbrowserregular expressiondayjsgeteffect-tssharedmrutypeofqueryvestES2023binariesdependency managerreduxbrowserslisttransformtrimLeftxmlequalityrestmakedescriptorscollectionObject.assignjson-schema-validatorreal-timelengthprotoconstramdastreamsECMAScript 2022l10ncharactersasciiInt16ArrayWebSocketgetPrototypeOfES2017$.extendsetPrototypeOfrestfulchineseimmerECMAScriptistanbulelectronperformantselfincludes6to5route53packageloggingbrowserlistECMAScript 2017ajaxWebSocketsexecfile256react animationreact-hookslibphonenumberuser-streamsclassnameslistenersrobustcallparentsdescriptorStreamshelpersameValueZerooffsetwriteReactiveExtensions
2.9.114

12 months ago

2.9.115

12 months ago

2.9.113

12 months ago

2.9.112

12 months ago

2.9.111

12 months ago

2.9.110

1 year ago

2.9.109

1 year ago

2.9.108

1 year ago

2.9.107

1 year ago

2.9.106

1 year ago

2.8.106

1 year ago

2.8.105

1 year ago

2.8.104

1 year ago

2.8.103

1 year ago

2.8.102

1 year ago

2.8.101

1 year ago

2.8.100

1 year ago

2.8.99

1 year ago

2.8.98

1 year ago

2.8.97

1 year ago

2.8.96

1 year ago

2.8.95

1 year ago

2.8.94

1 year ago

2.8.93

1 year ago

2.8.92

1 year ago

2.8.91

1 year ago

2.8.90

1 year ago

2.8.89

1 year ago

2.8.88

1 year ago

2.8.87

1 year ago

2.8.86

1 year ago

2.8.85

1 year ago

2.8.84

1 year ago

2.8.83

1 year ago

2.8.82

1 year ago

2.8.81

1 year ago

2.8.80

1 year ago

2.8.79

1 year ago

2.8.78

1 year ago

2.7.78

1 year ago

2.7.77

1 year ago

2.6.77

1 year ago

2.6.76

1 year ago

2.6.75

1 year ago

2.5.75

1 year ago

2.5.74

1 year ago

2.5.73

1 year ago

2.4.73

1 year ago

2.4.72

1 year ago

2.4.71

1 year ago

2.4.70

1 year ago

2.3.70

1 year ago

2.3.69

1 year ago

2.3.68

1 year ago

2.3.67

1 year ago

2.3.66

1 year ago

2.3.65

1 year ago

2.3.64

1 year ago

2.3.63

1 year ago

2.3.62

1 year ago

2.3.61

1 year ago

2.3.60

1 year ago

2.3.59

1 year ago

2.3.58

1 year ago

2.3.57

1 year ago

2.3.56

1 year ago

2.3.55

1 year ago

2.3.54

1 year ago

2.3.53

1 year ago

2.3.52

1 year ago

2.3.51

1 year ago

2.3.50

1 year ago

2.3.49

1 year ago

2.3.48

1 year ago

2.3.47

1 year ago

2.3.46

1 year ago

2.3.45

1 year ago

2.3.44

1 year ago

2.3.43

1 year ago

2.3.42

1 year ago

2.3.41

1 year ago

2.3.40

1 year ago

2.3.39

1 year ago

2.3.38

1 year ago

2.3.37

1 year ago

2.3.36

1 year ago

2.3.35

1 year ago

2.3.34

1 year ago

2.3.33

1 year ago

2.2.33

1 year ago

2.2.32

1 year ago

2.2.31

1 year ago

2.2.30

1 year ago

2.2.29

1 year ago

2.2.28

1 year ago

2.2.27

1 year ago

2.2.26

1 year ago

2.2.25

1 year ago

2.1.25

1 year ago

2.1.24

1 year ago

2.1.23

1 year ago

2.1.22

1 year ago

2.1.21

1 year ago

2.1.20

1 year ago

2.1.19

1 year ago

2.1.18

1 year ago

2.1.17

1 year ago

2.1.16

1 year ago

2.1.15

1 year ago

2.1.14

1 year ago

2.1.13

1 year ago

2.1.12

1 year ago

2.1.11

1 year ago

2.1.10

1 year ago

2.0.10

1 year ago

2.0.9

1 year ago

1.0.9

1 year ago

1.0.8

1 year ago

1.0.7

1 year ago

1.0.6

1 year ago

1.0.5

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago