You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
# @note bruh stupid pnpm removes optional deps from package.json, that are deps of another dep, so i had to hoist pug packages into root modules folder, so I could fucking import this shit
⚡ **Ultimate solution** for using **CSS modules** without any hassle. Automatic replacement for Vue templates and scripts. You don't have to use `$style` object, just write the code as usual.
@@ -44,28 +44,28 @@ If you used `<style scoped>` before, the plugin should work out of the box witho
44
44
45
45
## Options
46
46
47
-
The `staticCssModules()`plugin accepts an object `{}` with options:
47
+
The plugin accepts an object `{}` with options:
48
48
49
49
-`preservePrefix` - an arbitrary string to be used as a prefix for names so they would not be processed and instead would be preserved as-is without the prefix. Useful for styles unaffected by CSS modules or custom #id values **(default: `"--"`)**
50
50
-`scopeBehaviour` - corresponds to `CSSModulesOptions["scopeBehaviour"]`**(default: `"local"`)**
51
-
-`scriptTransform` - if it's `false` - the plugin **will** wrap variables inside of `<template>` in CSS module context variable like so `$style[var]`. If it's `true` then the plugin will transform macros in `<script>` and `<script setup>` blocks and **will not** wrap anything in `<template>` (see more below) **(default: `false`)**
51
+
-`scriptTransform` - if it's `false` - the plugin **will** wrap variables inside of `<template>` in CSS module context variable like so `$style[var]`. If it's `true` then the plugin will transform `$cssModule`macros in `<script>` and `<script setup>` blocks and **will not** wrap anything in `<template>` (see more below) **(default: `false`)**
52
52
-`pugLocals` - an object containing variables for Pug templates **(default: `{}`)**
53
-
-`nameGenerator` - a function of type `CSSModulesOptions["generateScopedName"]` accepting (name, filename, css) arguments. This function will be called for each name in each file and it should return a result which will be used for generating a stylesheet. It is possible that the function may be called multiple times with the same pair of name and filename, so it must maintain its own state to return the same name in such case.
53
+
-`nameGenerator` - a function of type `CSSModulesOptions["generateScopedName"]` accepting `(name, filename, css)` arguments. This function will be called for each name in each file and it should return a result which will be used for generating a stylesheet. It is possible that the function may be called multiple times with the same pair of name and filename, so it must maintain its own state to return the same name in such case.
54
54
55
-
The plugin provides two generators as **default** value. If `process.env.NODE_ENV === "production"` then the generator will minify resulting names, otherwise during development the generator returns `COMPONENT__CLASSNAME` type of string.
55
+
The plugin provides two generators as **default** value. If `process.env.NODE_ENV === "production"` then the generator will minify resulting names, otherwise during development the generator returns `Component_Path__classname` type of string.
56
56
57
57
## Script handling
58
58
59
-
You can optionally use `removeCssModulesChunk()` plugin after `vue()` to strip out CSS module object for each component due to its redundancy, in this case `$style` and other CSS module context variables won't be available in `<template>`, so if you reference names in variables and use them in `<template>`, you must use `$cssModule` macro in `<script>` (see below).
59
+
You can optionally use `removeCssModulesChunk()` plugin after `vue()` to strip out CSS module object for each component due to its redundancy, in this case `$style` and other CSS module context variables won't be available in `<template>`, so if you reference names in variables and then use them in `<template>`, you must use `$cssModule` macro in `<script>` (see below).
60
60
61
61
If you need to access CSS modules in Javascript, you have two options:
62
62
63
-
1._RECOMMENDED!_ Use `$cssModule` macro to access CSS modules (and set `scriptTransform` to `true`).
63
+
1.**_RECOMMENDED!_** Use `$cssModule` macro to access CSS modules (and set `scriptTransform` to `true`).
64
64
65
-
If you're using Typescript, place the following code in your `env.d.ts` (or any other file) to get types support
65
+
If you're using Typescript, place the following code in your `env.d.ts` (or any other file) to get basic types support
The macro will be statically replaced with a resulting name string, so you can reference the variable in `<template>` as usual. Since the replacement is static you're allowed to use only the following forms:
@@ -76,10 +76,93 @@ If you need to access CSS modules in Javascript, you have two options:
76
76
// OR
77
77
$cssModule['class2'];
78
78
// OR
79
+
// NOTICE! camel case will be transformed to hyphenated when using property notation
80
+
// so this will be processed as 'another-class'
79
81
$cssModule.anotherClass;
80
82
```
81
83
82
-
2.`useCssModule` Vue composition function. Depending on the usage of JS variables in `<template>` you may either enable or disable `scriptTransform`. If you use the result of `useCssModules()[...]` in your `<template>` then you should enable `scriptTransform`, so the plugin doesn't wrap these variables in `$style[...]`. Otherwise set it to `false`, so any other referenced variables in `<template>` will be wrapped.
84
+
2.`useCssModule` Vue composition function. Depending on the usage of JS variables in `<template>` you may either enable or disable `scriptTransform`. If you use the result of `useCssModules()[...]` in your `<template>` then you should enable `scriptTransform`, so the plugin doesn't wrap these variables in `$style[...]`. Otherwise set it to `false`, so any referenced variables in `<template>` will be wrapped.
85
+
86
+
## Cross component referencing
87
+
88
+
Default name generators maintain a record which maps particular class from a particular component file to CSS modules name. This allows us to reference class names from other components, achieving global accessability of any class name in any component. Look at the example:
89
+
90
+
```vue
91
+
<!-- src/App.vue -->
92
+
93
+
<template lang="pug">
94
+
.app
95
+
.class-name
96
+
</template>
97
+
98
+
<style module>
99
+
.app {
100
+
}
101
+
102
+
.class-name {
103
+
}
104
+
</style>
105
+
```
106
+
107
+
We can access class names from App.vue by using scope `App__`
108
+
109
+
```vue
110
+
<!-- src/components/Foo.vue -->
111
+
112
+
<template lang="pug">
113
+
.foo
114
+
.App__class-name
115
+
</template>
116
+
117
+
<style module>
118
+
.foo {
119
+
}
120
+
</style>
121
+
```
122
+
123
+
Any class name is available from any component by using a scope prefix. Scope prefix must be specified following the rules:
124
+
125
+
1. Scope prefix is separated from class name by double underscore `__`
126
+
`App__class-name`
127
+
1. Root directory is `/src/`. Subdirectories are denoted by single underscore `_`
128
+
`/src/path/sub/Bar.vue` will be `path_sub_Bar__class-name`
129
+
1. If the file is in `/src/components/` folder then prefix must be `C[ComponentFileName]`
130
+
`/src/components/Foo.vue` will be `CFoo__class-name`
131
+
Subdirectories work the same:
132
+
`/src/components/Foo/Bar.vue` will be `CFoo_Bar__class-name`
133
+
1. If the file is in `/src/views/` folder then prefix must be `V[ComponentFileName]`
134
+
`/src/views/About.vue` will be `VAbout__class-name`
135
+
136
+
## Edge cases
137
+
138
+
Sometimes it's needed to preserve id/class names. Here is where `preservePrefix` option is used (in the example below we assume it's the default `--` value). Individual class names in both regular attributes and as string literals in `:class` having the prefix will not be processed but the prefix being removed. You can also use `--class` or `:--class` attributes to skip processing of entire attribute value.
0 commit comments