ashkheid-zz / prc---css-var-js-webpack

Reading and manipulating css custom variables with JS

Reading and manipulating css custom variables with JS

This is a practice project, The goal is:

reading some custom css-variables from a *.css file, adding it into a .html file , and make it interactively changeable

_for more information on `` read these two articles: MDN | CSS-Tricks

File 01

graph LR
A((root)) --> B(01)
A --> C[index.html]
A --> D[style.css]
B --> E[step01.html]
B --> F[step01.js]

Here I'm just working with style.css containing some css-variables. the result is produced in step01.html file.

• The step01.js doesn't do anything but logging a description about what's going on.
• The index.html provided just for navigating between steps.

File 02

graph LR
A((root)) --> B(02)
A --> C[index.html]
A --> D[style.css]
B --> E[step02.html]
B --> F[step02.js]

Here I'm actually creating a link element in step02.js file, attaching the style.css to it and adding it into the step02.html file.

File 03

graph LR
A((root)) --> B(dist)
A --> C(src)
A --> D[package-lock.json]
A --> E[package.json]
A --> F[webpack.config.js]
B --> G[step03.html]
B --> H[step03.js]
C --> I[index.js]
A --> J[index.html]
A --> K[style.css]

With the help of webpack, I import the style.css in the index.js file and bundle it to the dist/step03.html.

File 04

graph LR
A((root)) --> B(04)
A --> C[index.html]
A --> D[style.css]
B --> E[step04.css]
B --> F[step04.html]
B --> G[step04.js]

In this example, the style.css isn't use 'cause it's completely different markUp.

There're some css-variables defined in step04.css. There's a cssData object in step04.js which is an imaginary presentation of fetched css-variables from step04.css.

Once a colored circle is clicked, the cssData is updated and the theme has changed

File 05

graph LR
A((root)) --> B(05)
A --> C[index.html]
A --> D[style.css]
B --> E[step05.css]
B --> F[step05.html]
B --> G[step05.js]

The implementation of the former file was a little complicated. There's better solution for Implementing the reColor() function, which is using setProperty on the root element.

File 06

graph LR
A((root)) --> B(06)
A --> C[index.html]
A --> D[style.css]
B --> E[step06.css]
B --> F[step06.html]
B --> G[step06.js]

Solving the problem using CSS Object Model

File 07

graph LR
A((root)) --> B(07)
A --> C[index.html]
A --> D[style.css]
B --> E[step07.css]
B --> F[step07.html]
B --> G[step07.js]
B --> H[varCollector.js]

Solving the problem using array methods and CSSOM

File 08

graph LR
A((root)) --> B(08)
A --> C[index.html]
A --> D[style.css]
B --> E[step08.css]
B --> F[step08.html]
B --> G[step08.js]
B --> H[varCollector.js]

Improving the functionality