Comments (14)
@lol-russo Auto-quoting now got removed in v5.0.0
Sorry for the delay, I totally forgot about this issue!
from sass-vars-loader.
@patrickbense I think that maybe it wasn't such a good idea to automatically quote vars after all. It makes the behavior of the lib less predictable and causes other issues.
As the author of this PR says, maybe the best solution really is to explicitly add quotes if you want quotes in the CSS.
from sass-vars-loader.
Thaaaaat is a very good point you have there! :D
Will add it over the weekend 👍 :)
from sass-vars-loader.
Just released the change in v4.2.0
👍
from sass-vars-loader.
Thanks @epegzz :)
from sass-vars-loader.
Actually @epegzz, would it be possible to not add quotes if the string sent in already has them? I realize this will cause an issue for us and possibly others that created the work around. Unless you already did that :)
from sass-vars-loader.
@patrickbense Yeah you're right, double-quoting should be avoided. Just fixed it in v4.3.0
:)
from sass-vars-loader.
@patrickbense I think I have to undo the change because of #29 😬
Because if I want to add colors as vars such as #000
it won't work as CSS property once it's quoted:
background-color: #000
<- will work
background-color: "#000"
<- will not work
Or do you see a good way to solve this? 🤔
from sass-vars-loader.
Hm, we could maybe only add quotes if the string starts with a space or a zero
from sass-vars-loader.
Done in v4.3.1
:)
from sass-vars-loader.
Hi @epegzz, I really love sass-vars-loader! Thanks for all your work on this. Just wanted to report a use case that may not have been considered — setting a value to something like "0px"
I am working on a whitelabeled application that can be themed via design tokens so that multiple client builds can use the same code. I am using very low level variables to style the application, eg:
buttonBorderRadius: "8px"
For one theme I wanted to create a very angular style, so didn't want to use border-radii:
buttonBorderRadius: "0px"
I believe that because of this change, this didn't work as I expected. I get an "Invalid property value" because of the quote marks. It's frustrating because I can set any other value except for 0px, so it will work for other themes. I don't think this should be the default behaviour if it breaks CSS interoperability.
from sass-vars-loader.
Happy to open a new issue if you would prefer, just thought that I would keep the conversation in context here.
from sass-vars-loader.
@lol-russo True, this should be changed, will do 👍
I'll change it so that the following will not be quoted:
- any
0
followed by a valid CSS unit - any standalone
0
from sass-vars-loader.
No worries, thanks for your time @epegzz!
from sass-vars-loader.
Related Issues (20)
- Respect file order HOT 1
- Variable not getting to scss with web pack 3.11 in angular 5 HOT 5
- Typescript support HOT 1
- Missing dependencies in 4.1.0 HOT 1
- Broken as of version 4.3.0 HOT 6
- Can I use this for stylus or less ? HOT 2
- Module build failed with Vue-CLI HOT 14
- Improve documentation
- HRM doesn't work for variable files in symlinks or packages HOT 3
- Missing additional loader? Any help? HOT 1
- Variables undefined when use sass-loader.options.data attribute HOT 19
- Assertion error on precommit hook HOT 3
- SyntaxError: Unexpected token ']', web pack HOT 3
- Color names in JSON keys are interpreted as color objects by SASS HOT 4
- Unable to pass version string to add inside css comment HOT 2
- Is it possible to load the JSON file using inline loaders? HOT 1
- Passing transformer function as option HOT 3
- SassError: Invalid CSS after "..., -apple-system": expected ":", was ", BlinkMacSystemFon" HOT 1
- Webpack 5 implimentation HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sass-vars-loader.