I have two sass build systems installed in my sublime text: sass and sass compressed. The problem is that sass compressed delete all my comments what is pretty bad for the native wordpress style because the first comment block is needed there.
Is it possible to create a build system for compressed css that preserves comments?
The current sass compressed build system looks like this:
{
"cmd": ["sass", "--update", "$file:${file_path}/${file_base_name}.css", "--stop-on-error", "--no-cache", "--style", "compressed"],
"selector": "source.sass, source.scss",
"line_regex": "Line ([0-9]+):",
"osx":
{
"path": "/usr/local/bin:$PATH"
},
"windows":
{
"shell": "true"
}
}
Ok i got a pretty easy workaround. Newer versions of sass supporting the /*! Important comment */ syntax and leaving out this part in the compilation.
So simply add that ! to your comment block of the wordpress style.
Related
What I'm trying to achieve
Set up automated autoprefixer on npm run build of an Astro project on all global stylesheets and component scoped styling to support other browsers and older browsers (up to about 2016).
My build
Astro v1.9.1
CSS compiled via SCSS
A few Astro integrations (imagetools, prefetch, compress, NetlifyCMS are the only ones I think could have any relevance to this issue)
Steps I've taken
Built out an Astro project that uses both global styles in the /src/styles folder as well as scoped styling in Astro components
Ran npm install autoprefixer
Created a .postcss.config.cjs with the following code based on the docs:
module.exports = {
plugins: [
require('autoprefixer'),
],
};
Ran npm run build
What I expected
For my CSS to be compiled with different vendor prefixes for browser support
My main test of adding text-size-adjust: 100%; in src/styles/global.css to cause a -webkit-text-size-adjust: 100%; to be added to my compiled CSS in dist/assets (the build folder)
What else I have tried
Creating a .postcssrc.json which contains
{
"map": true,
"plugins": {
"autoprefixer": {}
}
}
Adding extra Vite configuration to my astro.config.mjs:
import autoprefixer from "autoprefixer";
export default defineConfig({
vite: {
postcss: {
plugins: [
autoprefixer({}), // add options if needed
],
},
},
})
Adding some browserslist conditions to my package.json to set conditions for the autoprefixing
{
"browserslist": [
"last 2 versions",
"not dead",
"> 0.2%"
]
}
Result & Conclusion
However I am still not getting autoprefixing to occur in my project
I'm also struggling to find answers online or in the Astro Discord server - which is making me wonder: Are people not really using autoprefixer anymore? How are people supporting other vendors and older browsers?
Thanks so much for the help, and I'm loving Astro!
googling i've pass through this post, and then i found this in Astro's doc.
have you seen this? https://docs.astro.build/en/guides/styling/#postcss
I'm using node-sass and gulp-sass to compile my assets.
Now when I'm running gulp with sass outputStyle: 'nested' (default), the fontawesome characters are changed from:
$fa-var-home: "\f015";
to
.fa-home:before {
content: "";
}
Using this in the browser seems to be working fine.
When running sass with outputStyle: 'compressed', I'm getting different characters:
.fa-home:before{content:""}
Now the strange part: sometimes, but I don't have any steps to reproduce this, the characters are also shown just like that, so  instead of a home icon.
I can't put my fingers on it and in 99.99% of the cases it is just fine. But in some situations it goes wrong and I don't understand why!
recently I had the same situation.
whenever you compile compiling using compressed outputStyle it's also removing charset: utf-8. For that reason you are getting that different characters.
So I'm using postcss-normalize-charset which basically add necessary charset keeping outputStyle compressed
I am using VS code for a project using CSS Grid and CSS Modules. However when I try something like this
.loginRegisterDiv {
composes: loginDiv;
margin: 0px;
width: 100%;
}
I get an error saying composes "unknown property" for composes. Plus I am using css grid and there does not seem to be any intellisense for this in VS code. Do I need to install an extension?
I am using rallycoding rulesets.
You can add to the VSC CSS linter an exception to the rule css.lint.unknownProperties (or set this to ignore). Open the VSC settings, search for css.lint.validProperties and add 'composes' to the list. The error/warning will go away.
This works to me, in your settings.json file add "css.lint.validProperties": ["composes"],
I use extensions to help with this particular problem. The extension system is excellent in VS Code, and there are a lot of really high quality extensions built by the community that greatly improve the quality and feature set of the editor.
Here are a few extensions that I use for writing SASS in VS Code. One or a couple of these should fix the problems you are having (and maybe even a few you didn't know you were having).
SCSS Grammar Extended by Danny McGee
Features:
Fixes content and cursor property names being tokenized as tag selectors
Fixes background being tokenized as an invalid/deprecated keyword in certain contexts
Fixes color being tokenized as a property value keyword instead of a property name in certain contexts
null and boolean values tokenized as language constants
BEM-style __element and --modifier fragments tokenized as class names
Added recognition for Angular-specific pseudo-selectors :host-context and ::ng-deep
Sass by Syler
Features:
Upgraded syntax highlighting
AutoCompletions / Intellisense
Formatter
CSS Modules Syntax Highlighter by Andrew Leedham
Features:
#value variable decleration: regular and namespaced.
composes: attribute: local and imports.
:global and :local pseudo classes.
SCSS IntelliSense by mrmlnc
Features:
Code Completion Proposals (variables, mixins, functions)
Hover (variables, mixins, functions)
Code navigation
Install one or several of those in VS Code, restart the editor, and then let me know if that doesn't fix your issue.
To make the VS Code recognise these custom CSS directive/properties, you can provide custom data for VS Code's CSS Language Service as mentioned here - https://github.com/Microsoft/vscode-css-languageservice/blob/master/docs/customData.md.
Create a CSS custom data set file with the following info. Place it at location .vscode/custom.css-data.json relative to the project root.
{
"version": 1.1,
"properties": [
{
"name": "composes",
"description": "css modules compose"
}
],
"atDirectives": [
{
"name": "#value",
"description": "css modules value import"
}
],
"pseudoClasses": [],
"pseudoElements": []
}
Now, if you don't have already, create a .vscode\settings.json file relative to project root. Add a field with key "css.customData" and value as the path to custom data set. For example,
{
"css.customData": ["./.vscode/custom.css-data.json"]
}
Now, you will no longer get "Unknown property" warning. When you hover over "composes", you will see the description you set for it in custom.css-data.json
A similar issue has been raised to the vs code team and has not been addressed yet:
https://github.com/Microsoft/vscode/issues/13003
I am using the command line sass --watch style.scss --style compressed to output a compressed CSS version of my SCSS style sheet.
Is there a way to output one expanded and one compressed CSS file, calling them respectively style.css and style.min.css?
I read the documentation without finding any information on this.
Your best bet would be to go with a task manager like Gulp or Grunt. Then you can specify two separate task for SASS and run grunt compile (using the Grunt example below). One for compressed and one for expanded. Otherwise I would just run another command on the terminal if you don't wan to mess with the config.
sass: {
expanded: {
options: {
style: 'expanded'
},
files: {
'css-expanded/*.css': 'sass/*.scss'
}
}
compressed: {
options: {
style: 'compressed'
}
files: {
'css-compressed/*.min.css': 'sass/*.scss'
}
}
grunt.registerTask('compile': ['sass:expanded', 'sass:compressed']);
You could run two terminal windows, each with one watcher in it. In one you would run
sass --watch style.scss:style.css --style nested
and in the other you would run
sass --watch style.scss:style.min.css --style compressed
I am unaware of a method to do this in one line.
I want to add images as base64 in sass. I have been locking at Compass but it feels way to bulky and really not what I'm looking for. Is there a good way to include images or other files inline in css without using compass?
If you use grunt, you can just use the grunt-data-uri task in order to achieve the conversation of regular url() string to base64.
dataUri: {
dist: {
src: ['dist/styles/*.css'],
dest: 'dist/styles/',
options: {
target: [
'img/low-res/embeded/*.*'
],
fixDirLevel: true
}
}
},
Essentially, the task will look for every images contained inside the embeded folder in your .css. From there, it will convert the url() into base64.
Compass is Open Source, just get the part of the code that suit you.
Here is the ruby source on Github