From 6fdbe24883de39d85f9602aa56e42b6c13413d44 Mon Sep 17 00:00:00 2001 From: Gajus Kuizinas Date: Fri, 6 Jan 2017 15:13:56 +0200 Subject: [PATCH] Revert "Feature: having postcss syntax configurable" --- .flowconfig | 3 --- README.md | 22 +------------------ package.json | 7 +++--- src/index.js | 7 +----- src/requireCssModule.js | 16 ++++++-------- .../resolves less stylesheets/actual.js | 3 --- .../resolves less stylesheets/bar.less | 3 --- .../resolves less stylesheets/expected.js | 3 --- .../resolves less stylesheets/options.json | 13 ----------- 9 files changed, 12 insertions(+), 65 deletions(-) delete mode 100644 test/fixtures/react-css-modules/resolves less stylesheets/actual.js delete mode 100644 test/fixtures/react-css-modules/resolves less stylesheets/bar.less delete mode 100644 test/fixtures/react-css-modules/resolves less stylesheets/expected.js delete mode 100644 test/fixtures/react-css-modules/resolves less stylesheets/options.json diff --git a/.flowconfig b/.flowconfig index 8e3973d..689945b 100644 --- a/.flowconfig +++ b/.flowconfig @@ -2,6 +2,3 @@ /node_modules/config-chain/test/broken.json /node_modules/conventional-changelog-core/test/fixtures/_malformation.json /node_modules/npmconf/test/fixtures/package.json - -[options] -module.ignore_non_literal_requires=true diff --git a/README.md b/README.md index 165c8e5..0568908 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,6 @@ In contrast to [`react-css-modules`](https://github.com/gajus/react-css-modules) * [Anonymous reference](#anonymous-reference) * [Named reference](#named-reference) * [Configuration](#configuration) - * [Configurate syntax loaders](#configurate-syntax-loaders) * [Installation](#installation) * [Example transpilations](#example-transpilations) * [Anonymous `styleName` resolution](#anonymous-stylename-resolution) @@ -168,33 +167,14 @@ NODE_ENV=production ./test |Name|Description|Default| |---|---|---| -|`context`|Must match webpack [`context`](https://webpack.github.io/docs/configuration.html#context) configuration. [`css-loader`](https://github.com/webpack/css-loader) inherits `context` values from webpack. Other CSS module implementations might use different context resolution logic.|`process.cwd()`| -|`filetypes`|Configure [postcss syntax loaders](https://github.com/postcss/postcss#syntaxes) like sugerss, LESS and SCSS. || |`generateScopedName`|Refer to [Generating scoped names](https://github.com/css-modules/postcss-modules#generating-scoped-names)|`[path]___[name]__[local]___[hash:base64:5]`| +|`context`|Must match webpack [`context`](https://webpack.github.io/docs/configuration.html#context) configuration. [`css-loader`](https://github.com/webpack/css-loader) inherits `context` values from webpack. Other CSS module implementations might use different context resolution logic.|`process.cwd()`| Missing a configuration? [Raise an issue](https://github.com/gajus/babel-plugin-react-css-modules/issues/new?title=New%20configuration:). > Note: > The default configuration should work out of the box with the [css-loader](https://github.com/webpack/css-loader). -### Configurate syntax loaders - -To add support for different CSS syntaxes (e.g. SCSS), perform the following two steps: - -1. Add the [postcss syntax loader](https://github.com/postcss/postcss#syntaxes) as a development dependency: - - ```bash - npm install postcss-scss --save-dev - ``` - -2. Add a filetype syntax mapping to the Babel plugin configuration - - ```json - "filetypes": { - ".scss": "postcss-scss" - } - ``` - ## Installation When `babel-plugin-react-css-modules` cannot resolve CSS module at a compile time, it imports a helper function (read [Runtime `styleName` resolution](#runtime-stylename-resolution)). Therefore, you must install `babel-plugin-react-css-modules` as a direct dependency of the project. diff --git a/package.json b/package.json index e12b131..63d421c 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,8 @@ "postcss-modules-local-by-default": "^1.1.1", "postcss-modules-parser": "^1.1.0", "postcss-modules-scope": "^1.0.2", - "postcss-modules-values": "^1.2.2" + "postcss-modules-values": "^1.2.2", + "postcss-scss": "^0.4.0" }, "description": "Transforms styleName to className using compile time CSS module resolution.", "devDependencies": { @@ -30,9 +31,7 @@ "flow-bin": "^0.37.4", "husky": "^0.12.0", "mocha": "^3.2.0", - "semantic-release": "^6.3.5", - "postcss-less": "^0.15.0", - "postcss-scss": "^0.4.0" + "semantic-release": "^6.3.5" }, "engines": { "node": ">5.0.0" diff --git a/src/index.js b/src/index.js index b2b655b..f4963e0 100644 --- a/src/index.js +++ b/src/index.js @@ -61,11 +61,7 @@ export default ({ inherits: babelPluginJsxSyntax, visitor: { ImportDeclaration (path: Object, stats: Object): void { - stats.opts.filetypes = stats.opts.filetypes || {}; - - const extension = path.node.source.value.lastIndexOf('.') > -1 ? path.node.source.value.substr(path.node.source.value.lastIndexOf('.')) : null; - - if (extension !== '.css' && Object.keys(stats.opts.filetypes).indexOf(extension) < 0) { + if (!path.node.source.value.endsWith('.css') && !path.node.source.value.endsWith('.scss')) { return; } @@ -88,7 +84,6 @@ export default ({ } filenameMap[filename].styleModuleImportMap[styleImportName] = requireCssModule(targetResourcePath, { - filetypes: stats.opts.filetypes || {}, generateScopedName: stats.opts.generateScopedName }); }, diff --git a/src/requireCssModule.js b/src/requireCssModule.js index 28e8703..9a94d2c 100644 --- a/src/requireCssModule.js +++ b/src/requireCssModule.js @@ -14,21 +14,20 @@ import LocalByDefault from 'postcss-modules-local-by-default'; import Parser from 'postcss-modules-parser'; import Scope from 'postcss-modules-scope'; import Values from 'postcss-modules-values'; +import ScssSyntax from 'postcss-scss'; import type { StyleModuleMapType } from './types'; -const getTokens = (runner, cssSourceFilePath: string, filetypes): StyleModuleMapType => { - const extension = cssSourceFilePath.substr(cssSourceFilePath.lastIndexOf('.')); - const syntax = filetypes[extension]; +const getTokens = (runner, cssSourceFilePath: string): StyleModuleMapType => { + const sourceFilePathIsScss = cssSourceFilePath.endsWith('.scss'); const options: Object = { from: cssSourceFilePath }; - if (syntax) { - // eslint-disable-next-line import/no-dynamic-require, global-require - options.syntax = require(syntax); + if (sourceFilePathIsScss) { + options.syntax = ScssSyntax; } const lazyResult = runner @@ -45,7 +44,6 @@ const getTokens = (runner, cssSourceFilePath: string, filetypes): StyleModuleMap }; type OptionsType = {| - filetypes: Object, generateScopedName?: string, context?: string |}; @@ -62,7 +60,7 @@ export default (cssSourceFilePath: string, options: OptionsType): StyleModuleMap const fromDirectoryPath = dirname(from); const toPath = resolve(fromDirectoryPath, to); - return getTokens(runner, toPath, options.filetypes); + return getTokens(runner, toPath); }; const plugins = [ @@ -79,5 +77,5 @@ export default (cssSourceFilePath: string, options: OptionsType): StyleModuleMap runner = postcss(plugins); - return getTokens(runner, cssSourceFilePath, options.filetypes); + return getTokens(runner, cssSourceFilePath); }; diff --git a/test/fixtures/react-css-modules/resolves less stylesheets/actual.js b/test/fixtures/react-css-modules/resolves less stylesheets/actual.js deleted file mode 100644 index 90aeb49..0000000 --- a/test/fixtures/react-css-modules/resolves less stylesheets/actual.js +++ /dev/null @@ -1,3 +0,0 @@ -import './bar.less'; - -
; diff --git a/test/fixtures/react-css-modules/resolves less stylesheets/bar.less b/test/fixtures/react-css-modules/resolves less stylesheets/bar.less deleted file mode 100644 index 6586489..0000000 --- a/test/fixtures/react-css-modules/resolves less stylesheets/bar.less +++ /dev/null @@ -1,3 +0,0 @@ -@color: #f00; - -.a {background-color: @color;} diff --git a/test/fixtures/react-css-modules/resolves less stylesheets/expected.js b/test/fixtures/react-css-modules/resolves less stylesheets/expected.js deleted file mode 100644 index f87c7c1..0000000 --- a/test/fixtures/react-css-modules/resolves less stylesheets/expected.js +++ /dev/null @@ -1,3 +0,0 @@ -import './bar.less'; - -
; diff --git a/test/fixtures/react-css-modules/resolves less stylesheets/options.json b/test/fixtures/react-css-modules/resolves less stylesheets/options.json deleted file mode 100644 index 903f779..0000000 --- a/test/fixtures/react-css-modules/resolves less stylesheets/options.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "plugins": [ - [ - "../../../../src", - { - "generateScopedName": "[name]__[local]", - "filetypes": { - ".less": "postcss-less" - } - } - ] - ] -}