yibn2008 / css-url-relative-plugin Goto Github PK
View Code? Open in Web Editor NEWwebpack plugin to convert url(...) in css to relative path
css-url-relative-plugin's People
Contributors
Stargazers
Watchers
css-url-relative-plugin's Issues
Stripping the terminating semicolon from `@import ...;` results in invalid CSS output
Problem description:
I noticed that using this plugin can result in invalid CSS being output when using @import statements. Say there's a line @import url(blah); in the input. This will be output as @import url(blah). Notice that the terminating semicolon is no longer present. This results in syntactically invalid CSS as this statement and the next one are no longer separated by the ; terminator, causing web browsers to skip one (or both?) of them.
Cause:
I took a look at the source code:
Note that the first case matches only when a terminating semicolon is present, and that semicolon gets included. That match is later passed to parse-import:
That module has dedicated logic (second line below) to strip away any trailing semicolon:
return imports.map(function (imp) {
imp = imp.replace(/(?:;)$/g, '');
return {
path: path(imp),
condition: condition(imp),
rule: imp
};
});which is why it's stripped away in the final (now syntactically invalid) output.
Possible solution:
lib/css-replace.js could be augmented as follows:
const parsed = parseImport(statement)
if (!parsed.length) {
throw new Error(`parse rule ${statement} failed`)
}
+ if (!parsed[0].rule.endsWith(';')) {
+ parsed[0].rule += ';'
+ }
+
/**
* parsed[0]: {
* path: 'foobar.css',
* condition: 'print',
- * rule: '@import url("foobar.css") print'
+ * rule: '@import url("foobar.css") print;'
* }
*/Plugin breaks source maps
With my configuration at least, CssUrlRelativePlugin disables source mapping of SASS files.
When I remove it, it works.
My quite complex configuration:
{
context: '/Users/theredled/Sites/qualispace/deploy',
entry: {
'webpack-app': './assets/js/webpack-app.js',
'webpack-pdf': './assets/js/webpack-pdf.js',
'webpack-login': './assets/js/webpack-login.js',
'webpack-public': './assets/js/webpack-public.js',
'webpack-task': './assets/js/webpack-task.js'
},
mode: 'development',
output: {
path: '/Users/theredled/Sites/qualispace/deploy/web/build',
filename: '[name].js',
publicPath: '/build/',
pathinfo: true
},
module: { rules: [ [Object], [Object], [Object], [Object], [Object] ] },
plugins: [
MiniCssExtractPlugin { options: [Object] },
DeleteUnusedEntriesJSPlugin { entriesToDelete: [] },
ManifestPlugin { opts: [Object] },
ProvidePlugin { definitions: [Object] },
CleanWebpackPlugin {
dangerouslyAllowCleanPatternsOutsideProject: false,
dry: false,
verbose: false,
cleanStaleWebpackAssets: false,
protectWebpackAssets: true,
cleanAfterEveryBuildPatterns: [],
cleanOnceBeforeBuildPatterns: [Array],
currentAssets: [],
initialClean: false,
outputPath: '',
apply: [Function: bound apply],
handleInitial: [Function: bound handleInitial],
handleDone: [Function: bound handleDone],
removeFiles: [Function: bound removeFiles]
},
DefinePlugin { definitions: [Object] },
{
options: [Object],
lastBuildSucceeded: false,
isFirstBuild: true
},
FriendlyErrorsWebpackPlugin {
compilationSuccessInfo: [Object],
onErrors: undefined,
shouldClearConsole: false,
formatters: [Array],
transformers: [Array],
previousEndTimes: {}
},
AssetOutputDisplayPlugin {
outputPath: 'web/build',
friendlyErrorsPlugin: [FriendlyErrorsWebpackPlugin]
},
CssUrlRelativePlugin { options: [Object] },
AssetsWebpackPlugin {
options: [Object],
writer: [Function: queuedWriter]
}
],
optimization: {
namedModules: true,
chunkIds: 'named',
runtimeChunk: 'single',
splitChunks: { chunks: 'async', cacheGroups: {} }
},
watchOptions: { ignored: /node_modules/ },
devtool: 'source-map',
performance: { hints: false },
stats: {
hash: false,
version: false,
timings: false,
assets: false,
chunks: false,
maxModules: 0,
modules: false,
reasons: false,
children: false,
source: false,
errors: false,
errorDetails: false,
warnings: false,
publicPath: false,
builtAt: false
},
resolve: {
extensions: [ '.js' ],
alias: {
formvalidation: '/Users/theredled/Sites/qualispace/deploy/assets/js/vendor/formvalidation-dist-v1.6.0-modified/dist/es6',
'@fullcalendar': '/Users/theredled/Sites/qualispace/deploy/assets/js/vendor/fullcalendar-4.3.1/packages'
}
},
externals: []
}
What about the feature to filter urls?
Hi! Is there a way to filter urls just like css-loader does?
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.