Related
I have set up a project with snowpack for svelte in which I'm trying to use tailwind for styling, but using states like hover or focus results in vs code throwing the error
Semicolon or block is expected
If you expect this syntax to work, here are some suggestions:
If you use less/SCSS with `svelte-preprocess`, did you add `lang=\"scss\"`/`lang=\"less\"` to your `style` tag? If you use SCSS, it may be necessary to add the path to your NODE runtime to the setting `svelte.language-server.runtime`, or use `sass` instead of `node-sass`.
Did you setup a `svelte.config.js`?
See https://github.com/sveltejs/language-tools/tree/master/docs#using-with-preprocessors for more info.
One code example that is causing the problem is
<style lang="postcss">
button {
#apply py-2 px-6 rounded-lg shadow-md;
}
.hoverable {
#apply hover:opacity-90;
}
</style>
This is the package.json
{
"scripts": {
"start": "run-p routify snp",
"build": "routify -b && routify export && snowpack build",
"test": "web-test-runner \"src/**/*.test.ts\"",
"routify": "routify",
"snp": "snowpack dev"
},
"dependencies": {
"#snowpack/plugin-run-script": "^2.3.0",
"postcss-import": "^14.0.2",
"svelte": "^3.37.0"
},
"devDependencies": {
"#roxi/routify": "^2.18.3",
"#snowpack/plugin-dotenv": "^2.2.0",
"#snowpack/plugin-postcss": "^1.4.3",
"#snowpack/plugin-svelte": "^3.6.1",
"#snowpack/plugin-typescript": "^1.2.1",
"#snowpack/web-test-runner-plugin": "^0.2.2",
"#testing-library/svelte": "^3.0.3",
"#tsconfig/svelte": "^1.0.10",
"#types/chai": "^4.2.17",
"#types/mocha": "^8.2.2",
"#types/snowpack-env": "^2.3.3",
"#web/test-runner": "^0.13.3",
"autoprefixer": "^10.4.0",
"chai": "^4.3.4",
"concurrently": "^6.4.0",
"cross-env": "^7.0.3",
"npm-run-all": "^4.1.5",
"postcss": "^8.3.11",
"postcss-cli": "^9.0.2",
"postcss-load-config": "^3.1.0",
"snowpack": "^3.8.7",
"svelte-preprocess": "^4.7.2",
"tailwindcss": "^2.2.19",
"typescript": "^4.3.4"
},
"routify": {
"extensions": "svelte,html,svx,md",
"dynamicImports": false,
"routifyDir": "src/.routify"
}
}
As you can see, I have installed svelte-preprocess which should be responsible for processing the postcss, as well as the other needed packages. The configuration for the project is as follows:
svelte.config.js
const sveltePreprocess = require("svelte-preprocess");
module.exports = {
preprocess: sveltePreprocess({
defaults: {
script: "typescript",
style: "postcss",
},
postcss: true,
}),
};
snowpack.config.js
/** #type {import("snowpack").SnowpackUserConfig } */
module.exports = {
mount: {
public: { url: "/", static: true },
src: { url: "/dist" },
},
plugins: [
"#snowpack/plugin-svelte",
"#snowpack/plugin-dotenv",
"#snowpack/plugin-typescript",
"#snowpack/plugin-postcss",
],
routes: [
/* Enable an SPA Fallback in development: */
{ match: "routes", src: ".*", dest: "/index.html" },
],
optimize: {
/* Example: Bundle your final build: */
// "bundle": true,
},
packageOptions: {
knownEntrypoints: ["#roxi/routify/runtime/buildRoutes"],
},
devOptions: {
/* ... */
},
buildOptions: {
/* ... */
},
};
postcss.config.js
module.exports = {
plugins: [
require("postcss-import"),
require("tailwindcss"),
require("autoprefixer"),
],
};
tailind.config.js
const production = process.env.NODE_ENV === "production";
module.exports = {
mode: "jit",
future: {
purgeLayersByDefault: true,
removeDeprecatedGapUtilities: true,
},
purge: { content: ["./src/**/*.svelte"], enabled: production },
darkMode: false, // or 'media' or 'class'
theme: {
extend: {/*...*/},
},
variants: {
extend: {},
},
plugins: [],
};
Do you have any idea if it's a configuration problem or is something related to the editor?
I am trying to purge unused styles from my app. But when purging it still removes used classes and the site looks broken.
I am using the following packages:
"dependencies": {
"#fullhuman/postcss-purgecss": "^4.0.3",
"autoprefixer": "^10.3.4",
"bootstrap": "^5.1.1",
"next": "^11.1.0",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-preset-env": "^6.7.0",
"react": "17.0.2",
"react-bootstrap": "^1.6.3",
"react-dom": "17.0.2",
"sass": "^1.40.1"
}
In the ./styles folder I have a layout.scss where I import #import "../node_modules/bootstrap/scss/bootstrap"; as well. I am then importing import "../styles/layout.scss"; in _app.js
I have created a postcss.config.js with the following:
module.exports = {
plugins: [
"postcss-flexbugs-fixes",
[
"postcss-preset-env",
{
autoprefixer: {
flexbox: "no-2009",
},
stage: 3,
features: {
"custom-properties": false,
},
},
],
[
"#fullhuman/postcss-purgecss",
{
content: [
"./pages/**/*.{js,jsx,ts,tsx}",
"./components/**/*.{js,jsx,ts,tsx}",
"./node_modules/react-bootstrap/**/*.js",
],
defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
safelist: ["html", "body"],
},
],
],
};
I have included "./node_modules/react-bootstrap/**/*.js", as well as recommended on an earlier post. This does help a little bit but still removes used classes by react-bootstrap.
I tried adding css: ["./styles/**/*.scss, ./styles/**/*.css"] in postcss.config.js as well, which seems to do nothing either.
With all that it still looks broken:
While it should look like this:
This configured prop inside '#fullhuman/postcss-purgecss' plugin saved my modals in boostrap from purge, so I guess you need to add to the safelist the css prefix used in the exact boostrap component you need to maintain unpurged
safelist: {
standard: ['html', 'body', 'btn'],
deep: [/^col/, /^navbar/, /^nav/, , /^modal/]
},
i have a basic html file (index.html), my project structure is like below :
index.html
tailwind.config.js
postcss.js
tailwind.css
dist.css
and here contents for each files
module.exports = {
purge: {
enabled:true,
content:['./*.html', './**/*.html'],
layers: ['components']
},
theme: {
extend: {
fontSize:{
'small' : '.6rem',
// Or with a default line-height as well
'3xl': ['2.5rem', {
lineHeight: '50px',
}],
'6xl': ['3.70rem', {
lineHeight: '60px',
}],
},
colors:{
transparent: 'transparent',
current: 'currentColor',
orange:{
DEFAULT: '#F47521'
}
},
screens: {
'sm': '640px',
'md': '760px',
'custom' : '980px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
'3xl': '1600px',
'xxl' : '1700px'
}
}
},
variants: {
textColor: ['responsive', 'hover', 'focus', 'visited'],
},
plugins: [
({addUtilities}) => {
const utils = {
'.translate-x-half': {
transform: 'translateX(50%)',
},
};
addUtilities(utils, ['responsive'])
}
]
};
the postcss file
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
and my package.json
{
"name": "myproject",
"version": "1.0.0",
"description": "my theme",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "NODE_ENV=production npx tailwindcss-cli#latest build tailwind.css -o dist.css",
"build:css": "postcss tailwind.css -o dist.css"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.2.5",
"postcss": "^8.2.8",
"tailwindcss": "^2.0.4"
},
"dependencies": {
"cssnano": "^4.1.10",
"postcss-cli": "^8.3.1"
}
}
when building with : npm run build, tailwind build the project but the dist.css size remains 5,7MB
What i'm doing wrong here?
thank you
You have purge configured to apply to the 'components' layer.
Tailwind has three layers: 'base', 'components', and 'utilities'. Components is the smallest of the three so its impact on the resulting filesize will be fairly minimal. You're hitting 5.7MB because by far the largest layer, 'utilities', is being ignored.
Update your purge configuration to apply to utilities too. Unless there's a good reason to be selective with layers, you probably want to drop any specificity and allow it to apply to all layers.
Furthermore, if you leave out enabled, it will be handled automatically based on your NODE_ENV setting.
https://tailwindcss.com/docs/optimizing-for-production#purging-specific-layers
The Issue:
I'm trying to use chrome workspaces / source maps to update my sass partials as I edit CSS in chrome dev tools. Chrome is detecting my sass partials from source maps I setup in webpack, but giving me the error "Changes to this file were not saved to the file system." when I try to save the changes from the sources tab in chrome dev tools.
Moreover, in the styles tab of chrome dev tools, despite chrome knowing which properties are connected to which sass partials, changing the styles there doesn't update the partial files in the sources tab.
Chrome is not communicating changes in my browser to my local files, despite the sass partials showing up as source mapped in the chrome dev tools, and despite me setting up a workstation.
So far:
I set up a workspace in chrome and added the folder for the project
Disabled all my chrome extensions
Made sure 'enable css source maps' was true in chrome settings
I believe the problem might be my webpack config, since this is the first time I've made a custom webpack config, and I basically fiddled around with it until it worked. It could (probably not) be a problem with with a dependency, so I'll also add my package.json file.
Sass partial detected in chrome inspector
Sass partials showing up in sources tab:
Error Message
Webpack config file:
const path = require('path')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: ['#babel/polyfill', './src/index.js'],
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js',
publicPath: '/'
},
devServer: {
contentBase: 'dist',
historyApiFallback: true
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/public/index.html'
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
],
module: {
rules: [
{
test: /\.sass$/,
use: [
"style-loader",
{ loader: 'css-loader', options: { sourceMap: true} },
{ loader: 'sass-loader', options: { sourceMap: true } }
],
},
{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: [
"babel-loader"
]
}
]
}
}
Package.json:
{
"name": "css",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.6.4",
"#babel/plugin-proposal-class-properties": "^7.5.5",
"#babel/preset-env": "^7.6.3",
"#babel/preset-react": "^7.6.3",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"css-loader": "^3.2.0",
"eslint": "^6.5.1",
"eslint-plugin-react": "^7.16.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"webpack": "^4.41.1",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.2"
},
"dependencies": {
"#babel/polyfill": "^7.6.0",
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-router-dom": "^5.1.2"
},
"eslintConfig": {
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"env": {
"browser": true,
"node": true
}
},
"eslintIgnore": [
"webpack.config.js"
]
}
This is no longer supported in Chrome :( Relevant issue is marked as "won't fix".
https://bugs.chromium.org/p/chromium/issues/detail?id=996226
Currently I'm trying to setup a basic Vue project with webpack 4 enabled. The vue skeleton is based on the Microsoft SPA templates dotnet core. It seems to be that everything is running fine, except that external CSS files somehow are not loaded into the project and it is now bugging me for quite some time with the question why are those CSS files not loading.
What I basically did is 'dotnet new vue' (you need the Microsoft SPA templates installed) and after the creation of the project I started with updating the packages. Currently I have the following package.json file:
{
"name": "Dashboard",
"private": true,
"version": "0.0.1",
"scripts": {
"build:development": "webpack"
},
"devDependencies": {
"#types/webpack-env": "^1.13.6",
"ajv": "^6.5.2",
"aspnet-webpack": "^3.0.0",
"awesome-typescript-loader": "^5.2.0",
"bootstrap": "^4.1.1",
"coa": "^2.0.1",
"css-loader": "^1.0.0",
"event-source-polyfill": "^0.0.12",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11",
"isomorphic-fetch": "^2.2.1",
"jquery": "^3.3.1",
"mini-css-extract-plugin": "^0.4.1",
"popper.js": "^1.14.3",
"style-loader": "^0.21.0",
"typescript": "^2.9.2",
"url-loader": "^1.0.1",
"vue": "^2.5.16",
"vue-loader": "^15.2.4",
"vue-property-decorator": "^7.0.0",
"vue-router": "^3.0.1",
"vue-style-loader": "^4.1.0",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.16.0",
"webpack-cli": "^3.0.8",
"webpack-dev-middleware": "^3.1.3",
"webpack-hot-middleware": "^2.22.2",
"webpack-merge": "^4.1.3",
"webpack-node-externals": "^1.7.2"
},
"dependencies": {}
}
And this is my webpack.config.file:
const path = require('path');
const webpack = require('webpack');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const bundleOutputDir = './wwwroot/dist';
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
mode: 'development',
stats: {
modules: false
},
context: __dirname,
resolve: {
extensions: [ '.js', '.ts' ]
},
entry: {
'main': './ClientApp/boot.ts'
},
module: {
rules: [
{
test: /\.vue\.html$/,
include: /ClientApp/,
loader: 'vue-loader',
options: { loaders: { js: 'awesome-typescript-loader?silent=true' } }
},
{
test: /\.ts$/,
include: /ClientApp/,
use: 'awesome-typescript-loader?silent=true'
},
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader']
},
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
use: 'url-loader?limit=25000'
}
]
},
output: {
path: path.join(__dirname, bundleOutputDir),
filename: '[name].js',
publicPath: 'dist/'
},
plugins: [
new VueLoaderPlugin(),
new CheckerPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"'
}
}),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
}),
new webpack.SourceMapDevToolPlugin({
filename: '[file].map',
moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]')
})
]
};
And I have included the CSS file in the following ways:
In app.ts (I added them both just to test):
import '../navmenu/navmenu.css';
require('../navmenu/navmenu.css');
In boot.ts
import './components/navmenu/navmenu.css';
require('./components/navmenu/navmenu.css');
Or in the original file (navmenu.vue.html) (when a default SPA skeleton has been generated):
<style src="./navmenu.css" />
On all these locations the css file is not included/used in the frontend. I've also tried different approaches in the webpack.config file such as using the extract-text-webpack-plugin.
The basic idea behind is that the SPA template of Microsoft is using Webpack 2 (and other old versions of different packages) and I'm trying to update these to the latest versions.
Hopefully someone can help me out :-)
I've figured it out. Somehow webpack 4 is not picking up the CSS files by itself. You need to install the following plugin first:
MiniCssExtractPlugin
After that in the webpack config add the following configuration:
{
test: /\.(s*)[a|c]ss$/,
use: [
"vue-style-loader",
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
}
And add the mini css extract plugin also to the plugins section:
new MiniCssExtractPlugin({
filename: "[name].css"
})
And you should be good to go!
On your main.vue or any vue page inside style add #import "path"
<style>
#import "https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css";
#import "../assests/css/style.css"
</style>