本文整理汇总了TypeScript中postcss-url.default函数的典型用法代码示例。如果您正苦于以下问题:TypeScript default函数的具体用法?TypeScript default怎么用?TypeScript default使用的例子?那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了default函数的7个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。
示例1: processStyleWithPostCSS
async function processStyleWithPostCSS (styleObj: IStyleObj): Promise<string> {
const { appPath, projectConfig, npmConfig, isProduction, buildAdapter } = getBuildData()
const weappConf = Object.assign({}, projectConfig.weapp)
const useModuleConf = weappConf.module || {}
const customPostcssConf = useModuleConf.postcss || {}
const customCssModulesConf = Object.assign({
enable: false,
config: {
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}, customPostcssConf.cssModules || {})
const customPxtransformConf = Object.assign({
enable: true,
config: {}
}, customPostcssConf.pxtransform || {})
const customUrlConf = Object.assign({
enable: true,
config: {
limit: 10240
}
}, customPostcssConf.url || {})
const customAutoprefixerConf = Object.assign({
enable: true,
config: {
browsers: browserList
}
}, customPostcssConf.autoprefixer || {})
const postcssPxtransformOption = {
designWidth: projectConfig.designWidth || 750,
platform: 'weapp'
}
if (projectConfig.hasOwnProperty(DEVICE_RATIO_NAME)) {
postcssPxtransformOption[DEVICE_RATIO_NAME] = projectConfig.deviceRatio
}
const cssUrlConf = Object.assign({ limit: 10240 }, customUrlConf)
const maxSize = Math.round((customUrlConf.config.limit || cssUrlConf.limit) / 1024)
const postcssPxtransformConf = Object.assign({}, postcssPxtransformOption, customPxtransformConf, customPxtransformConf.config)
const processors: any[] = []
if (customAutoprefixerConf.enable) {
processors.push(autoprefixer(customAutoprefixerConf.config))
}
if (customPxtransformConf.enable && buildAdapter !== BUILD_TYPES.QUICKAPP) {
processors.push(pxtransform(postcssPxtransformConf))
}
if (cssUrlConf.enable) {
const cssUrlParseConf = {
url: 'inline',
maxSize,
encodeType: 'base64'
}
processors.push(cssUrlParse(cssUrlConf.config.basePath ? Object.assign(cssUrlParseConf, {
basePath: cssUrlConf.config.basePath
}) : cssUrlParseConf))
}
const defaultPostCSSPluginNames = ['autoprefixer', 'pxtransform', 'url', 'cssModules']
Object.keys(customPostcssConf).forEach(pluginName => {
if (defaultPostCSSPluginNames.indexOf(pluginName) < 0) {
const pluginConf = customPostcssConf[pluginName]
if (pluginConf && pluginConf.enable) {
if (!isNpmPkg(pluginName)) { // local plugin
pluginName = path.join(appPath, pluginName)
}
processors.push(require(resolveNpmPkgMainPath(pluginName, isProduction, npmConfig, buildAdapter, appPath))(pluginConf.config || {}))
}
}
})
let css = styleObj.css
if (customCssModulesConf.enable) {
css = processStyleUseCssModule(styleObj).css
}
const postcssResult = await postcss(processors).process(css, {
from: styleObj.filePath
})
return postcssResult.css
}
开发者ID:YangShaoQun,项目名称:taro,代码行数:77,代码来源:compileStyle.ts
示例2: function
const postcssPluginCreator = function() {
return [
autoprefixer(),
postcssUrl({
url: (URL: string) => {
// Only convert root relative URLs, which CSS-Loader won't process into require().
if (!URL.startsWith('/') || URL.startsWith('//')) {
return URL;
}
if (deployUrl.match(/:\/\//)) {
// If deployUrl contains a scheme, ignore baseHref use deployUrl as is.
return `${deployUrl.replace(/\/$/, '')}${URL}`;
} else if (baseHref.match(/:\/\//)) {
// If baseHref contains a scheme, include it as is.
return baseHref.replace(/\/$/, '') +
`/${deployUrl}/${URL}`.replace(/\/\/+/g, '/');
} else {
// Join together base-href, deploy-url and the original URL.
// Also dedupe multiple slashes into single ones.
return `/${baseHref}/${deployUrl}/${URL}`.replace(/\/\/+/g, '/');
}
}
})
].concat(
minimizeCss ? [cssnano({ safe: true, autoprefixer: false })] : []
);
};
开发者ID:feloy,项目名称:angular-cli,代码行数:28,代码来源:styles.ts
示例3: function
const postcssPluginCreator = function() {
// safe settings based on: https://github.com/ben-eb/cssnano/issues/358#issuecomment-283696193
const importantCommentRe = /@preserve|@licen[cs]e|[@#]\s*source(?:Mapping)?URL|^!/i;
const minimizeOptions = {
autoprefixer: false, // full pass with autoprefixer is run separately
safe: true,
mergeLonghand: false, // version 3+ should be safe; cssnano currently uses 2.x
discardComments : { remove: (comment: string) => !importantCommentRe.test(comment) }
};
return [
postcssUrl([
{
// Only convert root relative URLs, which CSS-Loader won't process into require().
filter: ({ url }: { url: string }) => url.startsWith('/') && !url.startsWith('//'),
url: ({ url }: { url: string }) => {
if (deployUrl.match(/:\/\//) || deployUrl.startsWith('/')) {
// If deployUrl is absolute or root relative, ignore baseHref & use deployUrl as is.
return `${deployUrl.replace(/\/$/, '')}${url}`;
} else if (baseHref.match(/:\/\//)) {
// If baseHref contains a scheme, include it as is.
return baseHref.replace(/\/$/, '') +
`/${deployUrl}/${url}`.replace(/\/\/+/g, '/');
} else {
// Join together base-href, deploy-url and the original URL.
// Also dedupe multiple slashes into single ones.
return `/${baseHref}/${deployUrl}/${url}`.replace(/\/\/+/g, '/');
}
}
},
{
// TODO: inline .cur if not supporting IE (use browserslist to check)
filter: (asset: any) => !asset.hash && !asset.absolutePath.endsWith('.cur'),
url: 'inline',
// NOTE: maxSize is in KB
maxSize: 10
}
]),
autoprefixer(),
customProperties({ preserve: true })
].concat(
minimizeCss ? [cssnano(minimizeOptions)] : []
);
};
开发者ID:asnowwolf,项目名称:angular-cli,代码行数:44,代码来源:styles.ts
示例4: function
const postcssPluginCreator = function() {
// safe settings based on: https://github.com/ben-eb/cssnano/issues/358#issuecomment-283696193
const importantCommentRe = /@preserve|@license|[@#]\s*source(?:Mapping)?URL|^!/i;
const minimizeOptions = {
autoprefixer: false, // full pass with autoprefixer is run separately
safe: true,
mergeLonghand: false, // version 3+ should be safe; cssnano currently uses 2.x
discardComments : { remove: (comment: string) => !importantCommentRe.test(comment) }
};
return [
postcssUrl({
url: (URL: string) => {
// Only convert root relative URLs, which CSS-Loader won't process into require().
if (!URL.startsWith('/') || URL.startsWith('//')) {
return URL;
}
if (deployUrl.match(/:\/\//)) {
// If deployUrl contains a scheme, ignore baseHref use deployUrl as is.
return `${deployUrl.replace(/\/$/, '')}${URL}`;
} else if (baseHref.match(/:\/\//)) {
// If baseHref contains a scheme, include it as is.
return baseHref.replace(/\/$/, '') +
`/${deployUrl}/${URL}`.replace(/\/\/+/g, '/');
} else {
// Join together base-href, deploy-url and the original URL.
// Also dedupe multiple slashes into single ones.
return `/${baseHref}/${deployUrl}/${URL}`.replace(/\/\/+/g, '/');
}
}
}),
autoprefixer(),
customProperties({ preserve: true})
].concat(
minimizeCss ? [cssnano(minimizeOptions)] : []
);
};
开发者ID:3L4CKD4RK,项目名称:angular-cli,代码行数:38,代码来源:styles.ts
示例5: Error
const postcssPluginCreator = function (loader: webpack.loader.LoaderContext) {
return [
postcssImports({
resolve: (url: string, context: string) => {
return new Promise<string>((resolve, reject) => {
let hadTilde = false;
if (url && url.startsWith('~')) {
url = url.substr(1);
hadTilde = true;
}
loader.resolve(context, (hadTilde ? '' : './') + url, (err: Error, result: string) => {
if (err) {
if (hadTilde) {
reject(err);
return;
}
loader.resolve(context, url, (err: Error, result: string) => {
if (err) {
reject(err);
} else {
resolve(result);
}
});
} else {
resolve(result);
}
});
});
},
load: (filename: string) => {
return new Promise<string>((resolve, reject) => {
loader.fs.readFile(filename, (err: Error, data: Buffer) => {
if (err) {
reject(err);
return;
}
const content = data.toString();
resolve(content);
});
});
}
}),
postcssUrl({
filter: ({ url }: PostcssUrlAsset) => url.startsWith('~'),
url: ({ url }: PostcssUrlAsset) => {
// Note: This will only find the first node_modules folder.
const nodeModules = findUp('node_modules', projectRoot);
if (!nodeModules) {
throw new Error('Cannot locate node_modules directory.')
}
const fullPath = path.join(nodeModules, url.substr(1));
return path.relative(loader.context, fullPath).replace(/\\/g, '/');
}
}),
postcssUrl([
{
// Only convert root relative URLs, which CSS-Loader won't process into require().
filter: ({ url }: PostcssUrlAsset) => url.startsWith('/') && !url.startsWith('//'),
url: ({ url }: PostcssUrlAsset) => {
if (deployUrl.match(/:\/\//) || deployUrl.startsWith('/')) {
// If deployUrl is absolute or root relative, ignore baseHref & use deployUrl as is.
return `${deployUrl.replace(/\/$/, '')}${url}`;
} else if (baseHref.match(/:\/\//)) {
// If baseHref contains a scheme, include it as is.
return baseHref.replace(/\/$/, '') +
`/${deployUrl}/${url}`.replace(/\/\/+/g, '/');
} else {
// Join together base-href, deploy-url and the original URL.
// Also dedupe multiple slashes into single ones.
return `/${baseHref}/${deployUrl}/${url}`.replace(/\/\/+/g, '/');
}
}
},
{
// TODO: inline .cur if not supporting IE (use browserslist to check)
filter: (asset: PostcssUrlAsset) => {
return maximumInlineSize > 0 && !asset.hash && !asset.absolutePath.endsWith('.cur');
},
url: 'inline',
// NOTE: maxSize is in KB
maxSize: maximumInlineSize,
fallback: 'rebase',
},
{ url: 'rebase' },
]),
PostcssCliResources({
deployUrl: loader.loaders[loader.loaderIndex].options.ident == 'extracted' ? '' : deployUrl,
loader,
filename: `[name]${hashFormat.file}.[ext]`,
}),
autoprefixer({ grid: true }),
];
};
开发者ID:rexebin,项目名称:angular-cli,代码行数:94,代码来源:styles.ts
示例6: getStylesConfig
export function getStylesConfig(wco: WebpackConfigOptions) {
const { projectRoot, buildOptions, appConfig } = wco;
const appRoot = path.resolve(projectRoot, appConfig.root);
const entryPoints: { [key: string]: string[] } = {};
const globalStylePaths: string[] = [];
const extraPlugins: any[] = [];
// style-loader does not support sourcemaps without absolute publicPath, so it's
// better to disable them when not extracting css
// https://github.com/webpack-contrib/style-loader#recommended-configuration
const cssSourceMap = buildOptions.extractCss && buildOptions.sourcemap;
// Minify/optimize css in production.
const cssnanoPlugin = cssnano({ safe: true, autoprefixer: false });
// Convert absolute resource URLs to account for base-href and deploy-url.
const baseHref = wco.buildOptions.baseHref;
const deployUrl = wco.buildOptions.deployUrl;
const postcssUrlOptions = {
url: (URL: string) => {
// Only convert absolute URLs, which CSS-Loader won't process into require().
if (!URL.startsWith('/')) {
return URL;
}
// Join together base-href, deploy-url and the original URL.
// Also dedupe multiple slashes into single ones.
return `/${baseHref || ''}/${deployUrl || ''}/${URL}`.replace(/\/\/+/g, '/');
}
};
const urlPlugin = postcssUrl(postcssUrlOptions);
// We need to save baseHref and deployUrl for the Ejected webpack config to work (we reuse
// the function defined above).
(postcssUrlOptions as any).baseHref = baseHref;
(postcssUrlOptions as any).deployUrl = deployUrl;
// Save the original options as arguments for eject.
urlPlugin[postcssArgs] = postcssUrlOptions;
// PostCSS plugins.
const postCssPlugins = [autoprefixer(), urlPlugin].concat(
buildOptions.target === 'production' ? [cssnanoPlugin] : []
);
// determine hashing format
const hashFormat = getOutputHashFormat(buildOptions.outputHashing);
// use includePaths from appConfig
const includePaths: string[] = [];
if (appConfig.stylePreprocessorOptions
&& appConfig.stylePreprocessorOptions.includePaths
&& appConfig.stylePreprocessorOptions.includePaths.length > 0
) {
appConfig.stylePreprocessorOptions.includePaths.forEach((includePath: string) =>
includePaths.push(path.resolve(appRoot, includePath)));
}
// process global styles
if (appConfig.styles.length > 0) {
const globalStyles = extraEntryParser(appConfig.styles, appRoot, 'styles');
// add style entry points
globalStyles.forEach(style =>
entryPoints[style.entry]
? entryPoints[style.entry].push(style.path)
: entryPoints[style.entry] = [style.path]
);
// add global css paths
globalStylePaths.push(...globalStyles.map((style) => style.path));
}
// set base rules to derive final rules from
const baseRules = [
{ test: /\.css$/, loaders: [] },
{ test: /\.scss$|\.sass$/, loaders: ['sass-loader'] },
{ test: /\.less$/, loaders: ['less-loader'] },
// stylus-loader doesn't support webpack.LoaderOptionsPlugin properly,
// so we need to add options in its query
{
test: /\.styl$/, loaders: [`stylus-loader?${JSON.stringify({
sourceMap: cssSourceMap,
paths: includePaths
})}`]
}
];
const commonLoaders = [
// css-loader doesn't support webpack.LoaderOptionsPlugin properly,
// so we need to add options in its query
`css-loader?${JSON.stringify({ sourceMap: cssSourceMap, importLoaders: 1 })}`,
'postcss-loader'
];
// load component css as raw strings
let rules: any = baseRules.map(({test, loaders}) => ({
exclude: globalStylePaths, test, loaders: [
'exports-loader?module.exports.toString()',
...commonLoaders,
...loaders
]
}));
//.........这里部分代码省略.........
开发者ID:itslenny,项目名称:angular-cli,代码行数:101,代码来源:styles.ts
示例7: function
const postcssPluginCreator = function(loader: webpack.loader.LoaderContext) {
return [
postcssImports({
resolve: (url: string, context: string) => {
return new Promise<string>((resolve, reject) => {
if (url && url.startsWith('~')) {
url = url.substr(1);
}
loader.resolve(context, url, (err: Error, result: string) => {
if (err) {
reject(err);
return;
}
resolve(result);
});
});
},
load: (filename: string) => {
return new Promise<string>((resolve, reject) => {
loader.fs.readFile(filename, (err: Error, data: Buffer) => {
if (err) {
reject(err);
return;
}
const content = data.toString();
resolve(content);
});
});
}
}),
postcssUrl({
filter: ({ url }: PostcssUrlAsset) => url.startsWith('~'),
url: ({ url }: PostcssUrlAsset) => {
const fullPath = path.join(projectRoot, 'node_modules', url.substr(1));
return path.relative(loader.context, fullPath).replace(/\\/g, '/');
}
}),
postcssUrl([
{
// Only convert root relative URLs, which CSS-Loader won't process into require().
filter: ({ url }: PostcssUrlAsset) => url.startsWith('/') && !url.startsWith('//'),
url: ({ url }: PostcssUrlAsset) => {
if (deployUrl.match(/:\/\//) || deployUrl.startsWith('/')) {
// If deployUrl is absolute or root relative, ignore baseHref & use deployUrl as is.
return `${deployUrl.replace(/\/$/, '')}${url}`;
} else if (baseHref.match(/:\/\//)) {
// If baseHref contains a scheme, include it as is.
return baseHref.replace(/\/$/, '') +
`/${deployUrl}/${url}`.replace(/\/\/+/g, '/');
} else {
// Join together base-href, deploy-url and the original URL.
// Also dedupe multiple slashes into single ones.
return `/${baseHref}/${deployUrl}/${url}`.replace(/\/\/+/g, '/');
}
}
},
{
// TODO: inline .cur if not supporting IE (use browserslist to check)
filter: (asset: PostcssUrlAsset) => {
return maximumInlineSize > 0 && !asset.hash && !asset.absolutePath.endsWith('.cur');
},
url: 'inline',
// NOTE: maxSize is in KB
maxSize: maximumInlineSize,
fallback: 'rebase',
},
{ url: 'rebase' },
]),
autoprefixer(),
];
};
开发者ID:Serdji,项目名称:angular-cli,代码行数:73,代码来源:styles.ts
注:本文中的postcss-url.default函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。 |
请发表评论