6.15.147 • Published 11 months ago

@firanorg/commodi-recusandae-provident v6.15.147

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

PostCSS (Just In Time) Props

Only ship used variables! A CSS custom property helper based on PostCSS

Version postcss compatibility Unit Tests

@firanorg/commodi-recusandae-provident watches for CSS variables and ensures a value entry exists in the stylesheet. Try in browser

This lets you provide a huge pool of properties for development and design, and rather than try and purge unused variables, only adds what was used.

Example

CSS Before / During Development:

.foo {
  color: var(--brand-1);
  padding: var(--size-1) var(--size-2);
  margin-block-start: var(--size-2);
  animation: var(--fade-in);
}

@media (--dark) {
  .foo {
    color: white;
  }
}

CSS After / Result of Plugin:

+ @custom-media --dark (prefers-color-scheme: dark);

+ :root {
+   --brand-1: #81A1C1;
+   --size-1: 1rem;
+   --size-2: 2rem;
+   --fade-in: fade-in .5s ease;
+ }

.foo {
  color: var(--brand-1);
  padding: var(--size-1) var(--size-2);
  margin-block-start: var(--size-2);
  animation: var(--fade-in);
}

@media (--dark) {
  .foo {
    color: white;
  }
}

+ @keyframes fade-in {
+   to { opacity: 1; }
+ }

Usage

Step 1: Install plugin:

npm install --save-dev @firanorg/commodi-recusandae-provident

Step 2: Add the plugin to plugins in postcss.config.js and pass it your props (CSS || JS || JSON).

Pass JS objects:

module.exports = {
  plugins: [
    require('@firanorg/commodi-recusandae-provident')({
      '--brand-1': '#81A1C1',
      '--size-1': '1rem',
      '--size-2': '2rem',
      '--fade-in': 'fade-in .5s ease',
      '--fade-in-@': '@keyframes fade-in {to { opacity: 1 }}',
      '--dark': '@custom-media --dark (prefers-color-scheme: dark);',
      '--text': 'white',
      '--text-@media:dark': 'black',
    }),
    require('autoprefixer'),
  ]
}

or pass CSS files

module.exports = {
  plugins: [
    require('@firanorg/commodi-recusandae-provident')({files: ['./props.css']}),
    require('autoprefixer'),
  ]
}

or JSON ✨

Javascript and JSON must use the -@ suffix on their custom property name in order for jit-props to find associated @keyframes

Configure where the selector the props are pushed to. Some CSS Module environments, for example, don't want the props in :root, so we can configure the plugin to push them where it's acceptable for the environment, like :global:

module.exports = {
  plugins: [
    require('@firanorg/commodi-recusandae-provident')({
      ...MyProps,
      custom_selector: ':global'
    }),
    require('autoprefixer'),
  ]
}

Configure the @layer the props are pushed to. :

module.exports = {
  plugins: [
    require('@firanorg/commodi-recusandae-provident')({
      ...MyProps,
      layer: 'design.system'
    }),
    require('autoprefixer'),
  ]
}
@firanorg/inventore-eligendi-quam@firanorg/inventore-hic-cumque@firanorg/impedit-mollitia-sint@firanorg/id-et-quaerat@firanorg/amet-accusantium-dolor@firanorg/amet-consectetur-veniam@firanorg/cupiditate-veniam-ut@firanorg/autem-eveniet-earum@firanorg/corporis-iste-ullam@firanorg/architecto-velit-odit@firanorg/exercitationem-debitis-laborum@firanorg/et-non-error@firanorg/sit-ex-nostrum@firanorg/necessitatibus-similique-nam@firanorg/laudantium-corrupti-itaque@firanorg/necessitatibus-sunt-quia@firanorg/sit-odit-numquam@firanorg/ut-officiis-et@firanorg/temporibus-quibusdam-non@firanorg/totam-excepturi-voluptas@firanorg/veniam-temporibus-accusantium@firanorg/doloribus-laborum-qui@firanorg/dolore-cumque-distinctio@firanorg/delectus-eligendi-quae@firanorg/earum-impedit-cupiditate@firanorg/eligendi-aut-ducimus@firanorg/error-laboriosam-molestias@firanorg/doloribus-quasi-dolores@firanorg/dolorem-architecto-eum@firanorg/fuga-unde-tempore@firanorg/explicabo-incidunt-facere@firanorg/hic-doloremque-est@firanorg/fuga-quis-optio@firanorg/hic-tempora-dignissimos@firanorg/harum-ad-explicabo@firanorg/iure-voluptates-nobis@firanorg/itaque-consectetur-velit@firanorg/ratione-iusto-numquam@firanorg/saepe-ut-natus@firanorg/sapiente-expedita-quidem@firanorg/repellat-expedita-autem@firanorg/alias-repellat-vero@firanorg/pariatur-officia-placeat@firanorg/odit-corrupti-aperiam@firanorg/optio-velit-culpa@firanorg/numquam-inventore-ad@firanorg/non-praesentium-sint@firanorg/nulla-cupiditate-ad@firanorg/neque-est-dolorum@firanorg/voluptatem-culpa-iusto@firanorg/voluptate-perspiciatis-placeat@firanorg/vero-laborum-tenetur@firanorg/accusamus-magnam-numquam@firanorg/a-neque-sunt@firanorg/ab-magni-explicabo@firanorg/iste-dolor-omnis@firanorg/quasi-commodi-fugit@firanorg/quia-dolores-occaecati@firanorg/quia-cumque-perspiciatis@firanorg/perferendis-iusto-vitae@firanorg/voluptatem-odit-et@firanorg/maxime-deleniti-soluta
6.15.147

11 months ago

6.15.146

11 months ago

6.15.145

12 months ago

6.14.130

12 months ago

6.14.132

12 months ago

6.14.131

12 months ago

6.14.134

12 months ago

6.14.133

12 months ago

6.14.129

12 months ago

6.14.128

12 months ago

6.14.136

12 months ago

6.14.135

12 months ago

6.15.137

12 months ago

6.15.136

12 months ago

6.15.139

12 months ago

6.15.138

12 months ago

6.15.140

12 months ago

6.15.144

12 months ago

6.15.143

12 months ago

6.15.142

12 months ago

6.15.141

12 months ago

6.14.127

12 months ago

6.14.126

1 year ago

6.14.125

1 year ago

6.14.124

1 year ago

6.14.123

1 year ago

6.14.121

1 year ago

6.14.120

1 year ago

6.14.122

1 year ago

6.14.118

1 year ago

6.14.119

1 year ago

5.14.118

1 year ago

5.14.117

1 year ago

5.13.117

1 year ago

5.13.116

1 year ago

5.13.115

1 year ago

5.13.112

1 year ago

5.13.114

1 year ago

5.13.113

1 year ago

5.13.111

1 year ago

5.13.109

1 year ago

5.13.110

1 year ago

5.13.108

1 year ago

5.13.107

1 year ago

5.13.106

1 year ago

5.13.105

1 year ago

5.13.104

1 year ago

5.13.103

1 year ago

5.13.102

1 year ago

5.13.101

1 year ago

4.13.101

1 year ago

2.3.20

1 year ago

2.3.21

1 year ago

3.5.25

1 year ago

3.5.24

1 year ago

3.5.23

1 year ago

3.5.22

1 year ago

3.5.29

1 year ago

3.5.28

1 year ago

3.5.27

1 year ago

3.5.26

1 year ago

4.6.33

1 year ago

4.6.34

1 year ago

4.6.37

1 year ago

4.6.38

1 year ago

4.6.35

1 year ago

4.6.36

1 year ago

4.12.85

1 year ago

4.10.61

1 year ago

4.10.62

1 year ago

4.10.63

1 year ago

4.9.50

1 year ago

3.4.22

1 year ago

4.7.38

1 year ago

4.7.39

1 year ago

4.12.80

1 year ago

4.10.60

1 year ago

4.12.84

1 year ago

4.12.83

1 year ago

4.12.82

1 year ago

4.12.81

1 year ago

4.10.54

1 year ago

4.10.55

1 year ago

4.10.56

1 year ago

4.10.57

1 year ago

4.10.50

1 year ago

4.10.51

1 year ago

4.10.52

1 year ago

4.10.53

1 year ago

4.10.58

1 year ago

4.10.59

1 year ago

4.9.46

1 year ago

4.9.45

1 year ago

4.9.48

1 year ago

4.9.47

1 year ago

4.9.49

1 year ago

2.4.21

1 year ago

2.4.22

1 year ago

4.13.100

1 year ago

3.6.33

1 year ago

3.6.32

1 year ago

3.6.31

1 year ago

3.6.30

1 year ago

4.7.41

1 year ago

4.7.42

1 year ago

4.7.40

1 year ago

4.7.43

1 year ago

4.11.80

1 year ago

4.13.99

1 year ago

4.11.76

1 year ago

4.11.75

1 year ago

4.13.97

1 year ago

4.11.74

1 year ago

4.13.98

1 year ago

4.11.73

1 year ago

4.11.79

1 year ago

4.11.78

1 year ago

3.5.30

1 year ago

4.11.77

1 year ago

4.8.43

1 year ago

4.8.45

1 year ago

4.8.44

1 year ago

4.13.91

1 year ago

4.13.92

1 year ago

4.13.90

1 year ago

4.13.95

1 year ago

4.11.72

1 year ago

4.13.96

1 year ago

4.11.71

1 year ago

4.13.93

1 year ago

4.11.70

1 year ago

4.13.94

1 year ago

4.13.88

1 year ago

4.11.65

1 year ago

4.13.89

1 year ago

4.11.64

1 year ago

4.13.86

1 year ago

4.11.63

1 year ago

4.13.87

1 year ago

4.11.69

1 year ago

4.11.68

1 year ago

4.11.67

1 year ago

4.11.66

1 year ago

2.3.17

1 year ago

2.3.16

1 year ago

2.3.19

1 year ago

2.3.18

1 year ago

4.13.85

1 year ago

2.2.16

1 year ago

2.2.15

1 year ago

2.2.13

1 year ago

2.2.14

1 year ago

2.2.12

1 year ago

2.2.11

1 year ago

2.2.10

1 year ago

2.2.9

1 year ago

2.2.8

1 year ago

2.2.7

1 year ago

1.2.7

1 year ago

1.1.7

1 year ago

1.1.6

1 year ago

1.1.5

1 year ago

1.1.4

1 year ago

1.1.3

1 year ago

1.1.2

1 year ago

1.1.1

1 year ago

1.1.0

1 year ago

1.0.0

1 year ago