@inspiraller/create-css-vars

Installation

1. installing via npm

npm i @inspiraller/create-css-vars --save

2. Create a folder of css files locally

css /
  myCssFile.css

myCssFile.css

.link,
.btn {
  border: 1px solid red;
}

.link {
  background: red;
}
.link:hover {
  color: blue;
}
link[x] {
  color: pink;
  border: var(--primary-border);
  background-image: url('./file.svg');
}
@media () {
  .link {
    width: 100px;
  }
}

3. Create script to run create-css-vars

package.json

  "scripts": {
    "start": "create-css-vars"
  },

(Optional - specify from and destination)

package.json

  "scripts": {
    "start": "create-css-vars --from=./css to=./destination/folder"
  },

4. run script

npm start

done !

Fie is created:

destination/css-vars.ts

const vars = {
  '.link': (getTheme, getAsset) => `

    /* combined - .link, .btn*/
    border: 1px solid red;
    /* */

    background: red;
    &:hover {
      color: blue;
    }
    [x] {
      color: pink;
      border: ${getTheme('--primary-border')};
      background-image: url('${getAsset('file.svg')');
    }
    @media () {
      width: 100px;
    }
  `
}

---

theme.ts or theme.js creation

You can define root variables anywhere in your css and it will automatically generate these into a theme

mycss.css

:root {
  --primary-dark: #020018;
  --primary-green: #17B890;
  --primary-white: #FFF;
}

will generate

theme.ts

const theme = {
  '--primary-dark': '#020018';
  '--primary-green': '#17B890';
  '--primary-white': '#FFF';
}
export default theme;

---

Now use in your styled components?

5. Import this into your styled component

• Supply a function which replaces the css variable format with your own theme and assets.

import cssVars from './css-vars';
import styled from 'styled-components';
import mytheme from './theme';

const getTheme = var => mytheme[var];
const getAsset = url => `/assets/${url}`;

const Link = styled.span`
  ${cssVars['.link'](getTheme, getAsset)}
`;

---

What is supported?

• All single selectors - class, id, tag
• combined selectors - .class, something else, .x {}
• pseudo and attribute selectors = .link:hover .link[x="something"]
• all children = .link somechild {}
• all media queries

Using :root will create variables - see above

this will be put into a theme.ts or theme.js

---

Options

• from
• to
• js or ts
• assets_from
• assets_to
• global_styles

--from

• If not supplied will look for css at root level

npm run create-css-vars --from=./mycsslocation/target

--to

• If not supplied will put css-vars in the root.

npm run create-css-vars --to=./mycssdestination/target

--js

• will create css-vars .js

npm run create-css-vars --js=true

--ts

• will create css-vars .ts

npm run create-css-vars --ts=true

--assets_from

• Will copy a directory of assets from this folder to destination specified in options 'assets_to' or 'to' or root level in order of preference.

npm run create-css-vars --assets_from=./assets/source

--assets_to

• Will copy a directory of assets, but only if assets_from is supplied.

npm run create-css-vars --assets_from=./assets/source --assets_to=./destination/some/assets/folder

---

--global_styles

To ensure these do not get missed you need to put them into a separate folder and specify them to go into your globalStyle.ts or globalStyle.js

css/global.css

* {
  margin: 0;
  padding: 0;
}

@font-face ...

html {
  font-size: 0.625%;
}
body {
  font-family: myfont;
}

Specify css file that you want to generate globalStyle.js

npm run create-css-vars --global_styles=./css/global.css

or specify folder

npm run create-css-vars --global_styles=./css/global/myfiles.css

Will generate css/globalStyles.ts