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

11 months ago

6.14.130

11 months ago

6.14.132

11 months ago

6.14.131

11 months ago

6.14.134

11 months ago

6.14.133

11 months ago

6.14.129

11 months ago

6.14.128

11 months ago

6.14.136

11 months ago

6.14.135

11 months ago

6.15.137

11 months ago

6.15.136

11 months ago

6.15.139

11 months ago

6.15.138

11 months ago

6.15.140

11 months ago

6.15.144

11 months ago

6.15.143

11 months ago

6.15.142

11 months ago

6.15.141

11 months ago

6.14.127

11 months ago

6.14.126

12 months ago

6.14.125

12 months ago

6.14.124

12 months ago

6.14.123

12 months ago

6.14.121

12 months ago

6.14.120

12 months ago

6.14.122

12 months ago

6.14.118

12 months ago

6.14.119

12 months ago

5.14.118

12 months ago

5.14.117

12 months ago

5.13.117

12 months ago

5.13.116

12 months ago

5.13.115

12 months ago

5.13.112

12 months ago

5.13.114

12 months ago

5.13.113

12 months ago

5.13.111

12 months ago

5.13.109

12 months ago

5.13.110

12 months 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